Build JoonWeb Section with Cursor

Detailed technical documentation and implementation guide for Build JoonWeb Section with Cursor.

Overview & 1-Click Installation in Cursor #

**Cursor AI** allows you to scaffold, edit, and refactor `.jw` sections directly inside your local development workspace using inline chat and Composer.

To make Cursor understand JoonWeb architecture and activate the **`@jw-theme`** command, external developers must install the skill locally into their workspace.

---

### Step 1: 1-Click Skill Installation (Terminal)

Run this single command in the root folder of your theme repository:

```bash
mkdir -p .cursor/rules && curl -s https://joonweb.dev/skills/jw-theme-sections/SKILL.md > .cursor/rules/jw-theme.mdc
```

This immediately downloads the official 1,000+ line JoonWeb Theme Skill into `.cursor/rules/jw-theme.mdc`. Cursor v0.42+ will automatically index the file, enabling the **`@jw-theme`** symbol across Composer and Chat without needing to restart!

---

### Alternative Installation Methods

#### For AI Agents (Google Antigravity, Windsurf, Copilot Workspace):
```bash
mkdir -p .agents/skills/jw-theme-sections && curl -s https://joonweb.dev/skills/jw-theme-sections/SKILL.md > .agents/skills/jw-theme-sections/SKILL.md
```

#### For Legacy Universal `.cursorrules`:
```bash
curl -s https://joonweb.dev/skills/jw-theme-sections/SKILL.md > .cursorrules
```

Cursor In-Editor Commands & Composer Prompts #

Once `.cursorrules` is set up, you can command Cursor directly in **Composer (Cmd+I / Ctrl+I)** or **Chat (Cmd+L / Ctrl+L)**:

#### Scaffold a New Section
```text
@jw-theme Generate a new sections/customer-reviews.jw section with 5-star ratings, avatar image picker, quote block, and responsive 3-column Bootstrap card layout with populated presets.
```

#### Add Ajax Add-to-Cart to Existing Cards
```text
@jw-theme Update the product card button in this .jw file to use JWCart.add(variantId, 1, this) with a loading spinner state on click.
```

#### Add Settings to Rules Schema
```text
@jw-theme Add background color picker, padding top/bottom range sliders (20px to 120px), and an alignment select dropdown to the {% rules %} schema.
```

#### Build Storefront Header with Live Search (/suggestions.json)
```text
@jw-theme Generate a sticky header.jw section with brand logo, nav links, cart count badge, and debounced predictive search calling /suggestions.json?q={query}&limit=8 displaying products, collections, and blog articles.
```

Last modified: Oct 12, 2026

Build JoonWeb Section with Cursor

Overview & 1-Click Installation in Cursor #

Cursor In-Editor Commands & Composer Prompts #

Endpoint Title