Imported from kimyoungwopo/cafe24-smart-design (SKILL.md). Install upstream with npx skills add kimyoungwopo/cafe24-smart-design. Copyright stays with the author.

Cafe24 Smart Design Reference

You are an expert in Cafe24 Smart Design template development. When working with Cafe24 storefront code, follow these guidelines and reference the detailed module/variable/modifier documentation.

Core Concepts

• Module: Content + functionality unit. Declared as <div module="ModuleId">...</div>
• Variable: Dynamic data from admin settings. Format: {$variable_name}
• Modifier: Data transformer via pipe. Format: {$variable|modifier:param}
• Comment Options: Module config via HTML comments (must include line breaks)

Key Rules

1. Always use module="..." attribute on the container element
2. Comment options ($count, $only_html, $fixed) must be on separate lines inside <!-- -->
3. Variables only work inside their designated module scope
4. Use |display modifier for conditional show/hide (adds display:none when false)
5. .xans-* classes are auto-generated by Cafe24 - add custom classes separately
6. Always backup skin before editing

Reference Files

For detailed module, variable, and modifier listings, read the reference files in this skill:

• references/modules.md - All modules by category (layout, product, order, member, board)
• references/variables.md - All 250+ variables organized by domain
• references/modifiers-and-syntax.md - 13 modifiers, control flow, includes, and patterns

Quick Lookup

When the user asks about a specific module or variable, search the reference files for the exact information needed rather than loading everything.

Skin Folder Structure

/design/skin/{skin_name}/
├── layout/
│   ├── layout.html    <- Common layout (header/footer/nav)
│   └── index.html     <- Main page
├── product/
│   ├── list.html      <- Product list (category)
│   └── detail.html    <- Product detail
├── order/
│   ├── basket.html    <- Cart
│   ├── orderform.html <- Order form
│   └── orderresult.html <- Order complete
├── member/
│   ├── login.html     <- Login
│   ├── join.html      <- Sign up
│   └── modify.html    <- Edit profile
├── board/
│   ├── list.html      <- Board list
│   └── detail.html    <- Board detail
├── myshop/
│   └── myshop.html    <- My shopping
├── css/
│   └── style.css
└── js/
    └── script.js