---
name: your-skill-name
description: "Brief summary of what this skill does and when the AI should activate it."
metadata:
  author: JoonWeb
  version: "1.0.0"
  platform: JoonWeb Storefront & Site Engine
---

# Your Skill Name

You are an expert specialist in [Skill Domain]. When the user asks to build, modify, or troubleshoot [Skill Features], follow the instructions below.

---

## 1. Overview & Capabilities
- What this skill accomplishes
- Key workflows and features supported

---

## 2. Technical Standards & Constraints
1. **Framework & Engine**: Pure JW Language + Bootstrap 5.3 (no Tailwind in client storefronts).
2. **Architecture**: Scoped CSS (#jw-section-{{ section.id }}) placed BEFORE <section>.
3. **Data Schemas**: Valid types only (radio yes/no, quickEditor, text, image_picker, range).

---

## 3. Step-by-Step Code Examples

### Example 1: Basic Implementation
```jw
{# Copy and paste this code directly into the JoonWeb Theme Editor (.jw file) #}
{% set ss = section.settings %}
{% set S  = '#jw-section-' ~ section.id %}

<style>
  {{ S }} { padding: 40px 0; }
</style>

<section id="jw-section-{{ section.id }}" class="background{{ sc }}" data-xx="1" data-bl="{{ site ? 0 : 1 }}">
  <div class="container" data-id="{{ section.id }}">
    <h2>{{ ss.title | default('Hello World') }}</h2>
  </div>
</section>

{# Do not change if you don't know #}
{% rules %}
{
  "name": "Sample Section",
  "settings": [
    { "type": "text", "id": "title", "label": "Heading", "default": "Hello World" }
  ],
  "presets": [
    { "name": "Sample Section", "settings": { "title": "Hello World" } }
  ]
}
{% endrules %}
```