Build JoonWeb Section with Claude

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

Overview & Claude Setup #

Anthropic's **Claude 3.5 Sonnet** offers industry-leading reasoning for structural code generation, responsive Bootstrap 5.3 markup, and JSON schema formatting.

By linking Claude to the official **`jw-theme-sections`** skill, you can generate complete, error-free `.jw` templates that adhere strictly to JoonWeb's storefront architecture.

---

### Quick Launch (1-Click Pre-Loaded Prompt)
[**⚡ Launch in Claude with Pre-Loaded Prompt**](https://claude.ai/new?q=You%20are%20an%20Expert%20JoonWeb%20Theme%20Developer.%20Follow%20the%20official%20JoonWeb%20section%20specifications%20at%20https%3A%2F%2Fjoonweb.dev%2Fskills%2Fjw-theme-sections%2FSKILL.md%20to%20build%20a%20production-ready%20.jw%20section.)

Claude natively supports instant prompt pre-loading via URL parameter (`https://claude.ai/new?q=...`), allowing you to start generating sections in one click.

### Integrating the Skill into Claude Projects
1. Open [Claude.ai](https://claude.ai) and navigate to **Projects**.
2. Create or open your JoonWeb development project.
3. Under **Project Knowledge**, add a reference or paste the contents of:
   `https://joonweb.dev/skills/jw-theme-sections/SKILL.md`
4. Now, any section generation prompt in your project will automatically follow official JoonWeb guidelines.

Claude Prompt Template #

Copy and paste this prompt directly into your Claude chat:

```markdown
Please review the official JoonWeb Theme Development Skill:
https://joonweb.dev/skills/jw-theme-sections/SKILL.md

Generate a complete, production-ready `.jw` section for: [SECTION_NAME].

Architecture Guidelines:
1. Top Comment: {# Copy and paste this code directly into the JoonWeb Theme Editor (.jw file) #}
2. File Order: Variables {% set %} -> <style> (Scoped CSS MUST come BEFORE <section>) -> <section> (Outer HTML container) -> <script> -> {# Do not change if you don't know #} -> {% rules %}.
3. Outer Wrapper: <section id="jw-section-{{ section.id }}" class="xx background{{ sc }} ..." data-xx="1" data-bl="{{ site ? 0 : 1 }}" style="...">.
4. Conditionals: Use != '' (never != blank). Loops use {% for %}.
5. Scoped CSS: Scope all rules under {{ S }} with builder overrides {{ S }}[data-bl="1"].
6. Editable Blocks: Use data-jw-block.
7. Schema & Presets: ONLY valid types (radio yes/no, quickEditor, text, image_picker, range). Append {"type": "themes"} and {"type": "apps"} to schema blocks. NEVER include themes or apps in presets.
8. E-Commerce Elements: Use ProductFeed, JWCart.add, cart, and site.currency where applicable.
9. Clean Comments: No unnecessary, bulky decorative comments.
```

Claude Example Prompts & Scenarios #

Key Technical Rules for Claude Outputs #

Last modified: Oct 12, 2026

Build JoonWeb Section with Claude

Overview & Claude Setup #

Claude Prompt Template #

Claude Example Prompts & Scenarios #

Key Technical Rules for Claude Outputs #

Endpoint Title