@zohofinance/commerce 1.0.0 → 1.0.1

package/ts-dist/mocks/init-theme/.cursor/rules/README.md

@@ -0,0 +1,160 @@
+# .cursor/rules — Theme Development Rules
+
+## Overview
+These rules apply automatically to this theme.
+When you add files under the standard theme folders, path-scoped rules activate
+immediately with zero changes needed.
+
+- **Ordered workflows:** `.cursor/PLAYBOOK.md` (new theme, redesign, bug fix, theme settings).
+- **Slash commands:** `.cursor/commands/*.md` (16 commands — source of truth for invocation text).
+- **Parallel Figma (desktop + mobile):** `.cursor/agents/figma-desktop-mobile-parallel.md` — use when the user gives two Figma selection URLs.
+
+---
+
+## File Map
+
+### Path-scoped rules (auto by glob)
+
+| File | Activates on | Purpose |
+|------|----------------|---------|
+| `general.mdc` | `**/*` | Folder structure, global conventions |
+| `schema.mdc` | `sections/*.liquid`, `pages/*.json` | Custom schema syntax for all field types |
+| `liquid.mdc` | `**/*.liquid` | Liquid patterns, global objects, rendering |
+| `pages.mdc` | `pages/*.json` | Page JSON structure and inline setting values |
+| `javascript.mdc` | `assets/*.js` | Web Components, fetch, event patterns |
+| `i18n.mdc` | `i18n/*.json`, `sections/*.liquid` | Translation key naming conventions |
+| `css.mdc` | `assets/*.css`, `sections/*.liquid` | Tailwind + CSS variable usage |
+| `reference-themes.mdc` | `sections/*.liquid`, `snippets/*.liquid` | Logic from existing sections in this theme, design from Figma |
+| `figma-mcp-resolution.mdc` | `sections/*.liquid`, `snippets/*.liquid` | Resolve Figma MCP `var()` from `figma-variables.json` first |
+| `design-spec-extraction.mdc` | `sections/*.liquid`, `snippets/*.liquid` | Reusable protocol for extracting exact values from Figma MCP — used by build-section, compare-section, redesign-section |
+| `add-theme-setting.mdc` | `settings/schema.json`, `theme.json`, `i18n/en.schema.json` | Theme-level settings (wire to Liquid unless schema-only) |
+
+### Command-paired rules (no globs — use with matching slash command)
+
+These mirror `.cursor/commands/*.md`. Invoke the command (or `@`-mention the rule) so the agent loads the right checklist.
+
+| File | Command | Purpose |
+|------|---------|---------|
+| `create-theme.mdc` | `/create-theme` | Scaffold a new theme |
+| `extract-tokens.mdc` | `/extract-tokens` | Validate `figma-variables.json` exists |
+| `audit-page.mdc` | `/audit-page` | Page plan before code |
+| `build-section.mdc` | `/build-section` | Build section from Figma + reference |
+| `assemble-page.mdc` | `/assemble-page` | Generate page JSON from sections |
+| `add-field.mdc` | `/add-field` | New section setting + page JSON + snippets |
+| `qa-section.mdc` | `/qa-section` | Schema, Liquid, tokens, images, **a11y**, **performance**, **Tailwind vs `{% style %}`** |
+| `compare-section.mdc` | `/compare-section` | Built section vs Figma — mismatch report |
+| `fix-section.mdc` | `/fix-section` | Minimal blast-radius bug fixes |
+| `redesign-section.mdc` | `/redesign-section` | New Figma — preserve logic, replace HTML/CSS |
+
+### Commands without a dedicated `.mdc`
+
+| Command | Notes |
+|---------|--------|
+| `/refactor-section` | Planned refactors (e.g. move static CSS to Tailwind) — see `.cursor/commands/refactor-section.md` |
+| `/sync-theme-settings` | Sync token map into `settings/theme.json` presets |
+| `/qa-sections` | QA every section in a theme |
+| `/validate-page` | Page JSON references real sections/blocks |
+| `/impact` | Snippet → list of dependent sections |
+
+---
+
+## Commands
+
+### New Theme Pipeline (run in order)
+| Command | When to use |
+|---------|-------------|
+| `/create-theme <n>` | Start a new theme — scaffolds folders, copies snippets |
+| `/extract-tokens <n>` | Run once after create — validates `figma-variables.json` exists |
+| `/sync-theme-settings <n>` | Copy mapped token values into `settings/theme.json` presets |
+| `/audit-page <n> <page>` | Plan a page — produces section inventory, no code yet |
+| `/build-section <n> <section>` | Build one section at a time from Figma + reference |
+| `/qa-section <n> <section>` | Audit: schema, Liquid, tokens, images, a11y, performance, Tailwind vs `{% style %}` |
+| `/compare-section <n> <section>` | Compare built section vs Figma — report mismatches by severity |
+| `/assemble-page <n> <page>` | Generate page JSON after all sections are built and QA'd |
+
+### Editing Existing Sections
+| Command | When to use |
+|---------|-------------|
+| `/redesign-section <n> <section>` | New Figma design — keep all logic, replace HTML/CSS only |
+| `/fix-section <n> <section>` | Bug fix — diagnoses root cause before touching anything |
+| `/refactor-section <n> <section>` | Structural / style refactors (often with a short plan first) |
+| `/add-field <n> <section>` | Add a **section** setting — section, page JSON, snippets |
+| `/add-theme-setting <n>` | Add **theme** setting — schema, presets, i18n |
+| `/compare-section <n> <section>` | Check rebuilt/redesigned section against updated Figma |
+
+### Per-Section Quality Gate
+Run these three commands on every section before assembling the page:
+```
+/qa-section       → code correctness (schema, Liquid, tokens, images, a11y, performance)
+/compare-section  → design accuracy (spacing, typography, layout, colour)
+/fix-section      → fix approved issues from either report
+```
+
+Both `/qa-section` and `/compare-section` read the section file and all
+nested snippets automatically — no manual pasting required.
+
+### Batch / theme-level
+| Command | When to use |
+|---------|-------------|
+| `/qa-sections <theme_name>` | QA every section in the theme (e.g. before release) |
+| `/validate-page <theme_name> <page_name>` | After assemble-page: verify page JSON references real sections/blocks |
+| `/impact <theme_name> <snippet_name>` | List sections that use a snippet before changing it |
+
+See `.cursor/PLAYBOOK.md` for full flows (new theme, redesign, bug fix, theme settings).
+
+---
+
+## Agents (subagents)
+
+| Doc | When to use |
+|-----|-------------|
+| `.cursor/agents/figma-desktop-mobile-parallel.md` | User provides **two** Figma selection URLs (desktop + mobile). Runs build/compare/fix/redesign with both viewports in parallel. |
+| `.cursor/agents/visual-compare.md` | `/compare-section --visual` — launches dev server, screenshots rendered section in browser (desktop + mobile via Claude in Chrome), fetches Figma screenshot, produces visual diff report. |
+
+---
+
+## Skills
+Skills live in `.cursor/skills/` and are referenced in chat with `@skill-name`.
+They are part of the project — version controlled alongside your rules and commands.
+
+| File | Reference in chat | Purpose |
+|------|------------------|---------|
+| `design-tokens.md` | `@design-tokens` | Figma px/hex → Tailwind/CSS variable map |
+| `section-anatomy.md` | `@section-anatomy` | Complete section file skeleton |
+| `reference-lookup.md` | `@reference-lookup` | How to extract logic from existing sections in this theme |
+| `qa-accessibility.md` | `@qa-accessibility` | Accessibility checklist for QA |
+| `page-json-contract.md` | `@page-json-contract` | Page JSON shape and validation for assemble/validate |
+
+---
+
+## Adding files to this theme
+1. Keep work inside this theme folder
+2. Follow the standard folder structure (assets, i18n, layouts, sections, snippets, pages, settings)
+3. Path-scoped rules apply automatically — no rule changes needed
+
+## Theme-specific override
+Only add an override if this theme genuinely differs from shared syntax.
+Create `theme-{name}.mdc` with ONLY the differences — never repeat shared rules.
+
+```
+.cursor/rules/
+  schema.mdc              ← shared syntax
+  theme-{name}.mdc        ← only what differs for this theme
+```
+
+---
+
+## Custom Schema Syntax Quick Reference
+
+| Field Type | Default Format |
+|------------|---------------|
+| `url` | `{ "display_name": "t:...", "handle": "/path" }` |
+| `image_picker` | `{ "url": "file.webp", "enable_customisation": true }` |
+| `select` | `{ "display_name": "t:...", "value": "option-value" }` |
+| `menu` | `{ "display_name": "t:...", "handle": "" }` |
+| `text` | `"t:sections.name.settings.id.default"` |
+| `range` | plain number e.g. `40` |
+| `checkbox` | plain boolean `true` / `false` |
+| `color` | hex string `"#000000"` |
+
+All labels, defaults, and content strings must use `t:` translation keys — never hardcoded English.

package/ts-dist/mocks/init-theme/.cursor/rules/accessibility.mdc

@@ -0,0 +1,24 @@
+---
+description: Accessibility standards for theme sections, templates, and components
+globs: **
+alwaysApply: false
+---
+
+# Accessibility (A11y) Guidelines
+
+- Prefer semantic HTML (`<button>`, `<nav>`, `<main>`, `<header>`, `<footer>`, `<section>`, `<h1>`–`<h6>`) over generic `<div>`/`<span>`
+- Each page must have exactly one visible `<h1>` and maintain a logical heading order (no skipping levels)
+- All interactive elements must be real controls (`<button>`, `<a href>`, form elements) — never clickable `<div>`s
+- Clickable elements must be keyboard-focusable and operable with Enter/Space
+- Do not remove the focus outline; customize with clearly visible `outline` or `box-shadow` instead
+- All images must have meaningful `alt` text or `alt=""` when decorative, never omit `alt`
+- Icon-only buttons and links must have accessible names via text, `aria-label`, or `aria-labelledby`
+- Labels must be programmatically associated with form fields (`<label for>` or wrapping the input)
+- Avoid `aria-*` when native HTML semantics are sufficient; when used, keep roles, states, and properties in sync with DOM
+- Ensure color contrast meets WCAG AA (4.5:1 for normal text, 3:1 for large text and UI elements)
+- Do not rely on color alone to convey meaning (add text, icons, or patterns)
+- Provide clear error messages tied to fields via `aria-describedby` or inline descriptions
+- Announce dynamic content changes for screen readers when they are critical (e.g. `aria-live="polite"` or `"assertive"` on small regions)
+- Avoid auto-playing animations; if persistent animation exists, keep motion subtle and provide a way to pause or reduce motion
+- Do not trap keyboard focus in modals, drawers, or menus; when used, move focus inside and restore it on close
+- Ensure tab order matches visual order; avoid positive `tabindex`, use `tabindex="-1"` only for programmatic focus targets

package/ts-dist/mocks/init-theme/.cursor/rules/add-field.mdc

@@ -0,0 +1,222 @@
+---
+
+description: Add a new setting/field to an existing section — updates section, snippets, and page JSON
+alwaysApply: false
+---
+
+
+# /add-field
+
+Add a new setting or block field to an existing section.
+Updates all affected files: section Liquid, schema, and page JSON defaults.
+
+## Usage
+```
+/add-field <theme_name> <section_name>
+```
+Describe the field: what it controls, what type it should be, where it appears visually.
+
+---
+
+
+## Pre-flight
+1. Open `sections/<section_name>.liquid`
+2. Open `pages/*.json` — find the page JSON that uses this section
+3. Open related snippets if the field affects a snippet render
+4. If field is from Figma → confirm Figma frame is available for reference
+
+---
+
+
+## Stage 1 — Determine Field Spec
+From the user's description (and Figma if provided), determine:
+
+| Property | Decision |
+|----------|----------|
+| Field type | text / richtext / url / image_picker / media_picker / select / checkbox / range / color / menu |
+| Field ID | snake_case, descriptive (e.g. `badge_text`, `show_divider`, `card_image`) |
+| Where used | section-level setting OR local block-level setting OR theme block (`blocks/<name>.liquid`) |
+| Default value | sensible default matching the field type |
+| Label key | `t:sections.<n>.settings.<id>.label` (section) / `t:sections.<n>.blocks.<type>.settings.<id>.label` (local block) / `t:blocks.<name>.settings.<id>.label` (theme block) |
+| Placement in schema | after which existing field? |
+| Placement in Liquid | where in the HTML does it render? |
+
+**Choose `text` vs `richtext`:**
+- Renders in `<h1>`–`<h6>` or as title/eyebrow/badge/button label → `text`
+- Renders as paragraph, description, or multi-line body copy → `richtext`
+- Heading blocks must never use `richtext`
+
+State the spec before making any changes:
+```
+FIELD SPEC
+━━━━━━━━━━━━━━━━━━━━━━
+Type:        select
+ID:          card_size
+Level:       block setting (inside "product-card" block)
+Label key:   t:sections.category-main.blocks.product-card.settings.card_size.label
+Default:     { "display_name": "t:...default", "value": "medium" }
+Options:     small / medium / large
+Renders at:  line 52, inside the card wrapper div as a CSS class
+Schema after: "card_gap" field
+```
+
+Ask: "Proceed with this spec?" before editing.
+
+---
+
+
+## Stage 2 — Update Schema
+Add the new field in the correct file:
+
+**Section-level setting** → section `{% schema %}` inside `"settings": []`
+**Local block-level setting** → section `{% schema %}` inside the correct block in `"blocks": []`
+**Theme block setting** → `blocks/<name>.liquid` `{% schema %}` inside `"settings": []` (not the section file)
+
+Use correct custom syntax for the field type:
+
+```jsonc
+// text (headings, titles, labels, button text)
+{ "type": "text", "id": "badge_text", "label": "t:...", "default": "t:..." }
+
+// richtext (descriptions, body copy, FAQ answers)
+{ "type": "richtext", "id": "description", "label": "t:...", "default": "<p>t:...</p>" }
+
+// url
+{ "type": "url", "id": "cta_url", "label": "t:...", "default": { "display_name": "t:...", "handle": "/" } }
+
+// image_picker
+{ "type": "image_picker", "id": "card_image", "label": "t:...", "default": { "url": "placeholder.webp", "enable_customisation": true } }
+
+// media_picker (video)
+{ "type": "media_picker", "id": "video_media", "label": "t:...", "default": { "url": "video.mp4", "is_video": true } }
+
+// select
+{ "type": "select", "id": "card_size", "label": "t:...",
+  "options": [
+    { "label": "t:...option__1.label", "value": "small" },
+    { "label": "t:...option__2.label", "value": "medium" },
+    { "label": "t:...option__3.label", "value": "large" }
+  ],
+  "default": { "display_name": "t:...default", "value": "medium" }
+}
+
+// checkbox
+{ "type": "checkbox", "id": "show_badge", "label": "t:...", "default": false }
+
+// range
+{ "type": "range", "id": "card_gap", "min": 4, "max": 48, "step": 4, "unit": "px", "default": 16, "label": "t:..." }
+
+// color
+{ "type": "color", "id": "badge_color", "label": "t:...", "default": "#000000" }
+
+// menu
+{ "type": "menu", "id": "section_menu", "label": "t:...", "default": { "display_name": "t:...", "handle": "" } }
+```
+
+---
+
+
+## Stage 3 — Add Liquid Assign
+Add to the `{% liquid %}` assign block at the top of the section:
+
+```liquid
+{% liquid
+  ...existing assigns...
+  assign card_size = section.settings.card_size.value
+  assign badge_text = section.settings.badge_text
+%}
+```
+
+Field type render syntax:
+- `text` → `{{ field | escape }}`
+- `richtext` → `{{ field | raw }}`
+- `url` → `{{ field.handle }}`
+- `select` → `{{ field.value }}`
+- `image_picker` → `{{ field.url }}`
+- `media_picker` → `{{ field.url }}` (and optional `{{ field.is_video }}`)
+- `menu` → `{{ field.handle }}`
+- `checkbox` → `{% if field %}...{% endif %}`
+- `range` / `color` → `{{ field }}`
+
+---
+
+
+## Stage 4 — Add Render in HTML
+Insert the field output at the correct location in the HTML.
+
+Always wrap optional fields with a blank check:
+```liquid
+{% if badge_text != blank %}
+  <span class="text-sm font-medium px-2 py-1 rounded" style="background-color: var(--color-primary); color: var(--color-on-primary);">
+    {{ badge_text | escape }}
+  </span>
+{% endif %}
+```
+
+For classes driven by a select field:
+```liquid
+<div class="card-wrapper {% if card_size == 'large' %}p-8{% elsif card_size == 'small' %}p-2{% else %}p-4{% endif %}">
+```
+
+---
+
+
+## Stage 5 — Update Page JSON
+Find the page JSON file that uses this section.
+Add the new field to the correct section or block settings with proper inline syntax:
+
+```jsonc
+// For section setting
+"settings": {
+  ...existing settings...,
+  "badge_text": "New Arrivals",
+  "card_size": { "display_name": "Medium", "value": "medium" }
+}
+
+// For block setting
+"blocks": {
+  "product-card": {
+    "type": "product-card",
+    "settings": {
+      ...existing...,
+      "card_size": { "display_name": "Medium", "value": "medium" }
+    }
+  }
+}
+```
+
+---
+
+
+## Stage 6 — Update Related Snippets
+If the field value is passed to a `{% render %}` snippet call:
+```liquid
+{% render 'product-card', card_size: card_size, show_badge: show_badge %}
+```
+Open the snippet and add the variable handling there too.
+
+---
+
+
+## Output
+```
+✅ Field added: <field_id> (<type>) → <section_name>
+
+FILES CHANGED:
+1. sections/<section_name>.liquid
+   - Schema: added field at position X in settings/blocks
+   - Liquid: added assign on line X
+   - HTML: added render on line X
+
+2. pages/<page>.json
+   - Added default value for <field_id>
+
+3. snippets/<snippet>.liquid (if applicable)
+   - Added variable handling
+
+⚠️ REMEMBER: Add translation keys to i18n/en.schema.json:
+  "t:sections.<n>.settings.<id>.label": "Your Label Text"
+  "t:sections.<n>.settings.<id>.default": "Default Text"
+
+NEXT: Run /qa-section <theme_name> <section_name> to verify
+```

package/ts-dist/mocks/init-theme/.cursor/rules/add-theme-setting.mdc

@@ -0,0 +1,39 @@
+---
+
+description: Add a new theme-level setting to schema.json, theme.json presets, and en.schema.json
+globs:
+  - "settings/schema.json"
+  - "settings/theme.json"
+  - "i18n/en.schema.json"
+alwaysApply: false
+---
+
+
+# /add-theme-setting
+
+When adding or editing **theme-level** settings (not section `{% schema %}`):
+
+## Files
+
+1. `settings/schema.json` — field definitions per group; each group may have `"meta": "global_settings"` or `"component_settings"`.
+2. `settings/theme.json` — add the new key to **every** preset under `presets`.
+3. `i18n/en.schema.json` — human-readable strings under `settings_schema.<group>.settings.<id>`.
+
+## Rules
+
+- All schema `label`, `content`, `placeholder`, and select option labels use **`t:`** keys; English lives in `en.schema.json`.
+- **Select** defaults in schema and theme.json use `{ "value", "label" }` with `label` as `t:...options__N.label` matching an option.
+- **New group:** include `"name"` (t:), `"settings"` array, `"meta"`.
+- **`component_settings`** — safe from blind overwrite by token sync for fields not in sync mapping.
+- **`global_settings`** — candidate for `/sync-theme-settings`; document new mapped fields in `sync-theme-settings.md`.
+- Setting **ids must be unique** across the merged flat preset object.
+
+## Wire-up is required
+
+Unless the user says **schema only**, every new theme setting must be **consumed** in layout, `snippets/theme-settings.liquid`, or JS/CSS so toggles and values actually affect the storefront (including `accounts.liquid` when relevant).
+
+## Not in scope here
+
+Section fields → `/add-field`.  
+Token file validation → `/extract-tokens`.  
+Populating mapped globals from Figma → `/sync-theme-settings`.

package/ts-dist/mocks/init-theme/.cursor/rules/assemble-page.mdc

@@ -0,0 +1,130 @@
+---
+
+description: Generate page JSON from completed sections
+alwaysApply: false
+---
+
+
+# /assemble-page
+
+Generate the page JSON file from all completed sections for a page.
+Run this after all sections for a page have been built and QA'd.
+
+## Usage
+```
+/assemble-page <theme_name> <page_name>
+```
+
+---
+
+
+## Step 1 — Identify Sections
+- Read the audit plan produced by `/audit-page` for this page
+- Confirm which sections have been built in `sections/`
+- If any sections from the plan are missing → warn the user and list them
+- Ask: "Proceed with available sections or wait until all are built?"
+
+---
+
+
+## Step 2 — Read Section and Block Schemas
+For each section to include:
+- Open `sections/<section_name>.liquid`
+- Read the `{% schema %}` to extract:
+  - All setting IDs and their types
+  - All block types allowed (local blocks with inline `settings`; theme blocks as `zc_theme__<name>` or `@theme`)
+  - Default values
+- For each **theme block** referenced in the section schema, also read `blocks/<name>.liquid` to get that block's setting IDs and defaults (page JSON `type` is `zc_theme__<name>`)
+
+---
+
+
+## Step 3 — Generate Page JSON
+Build the page JSON using correct inline value syntax for each field type:
+
+```jsonc
+{
+  "layout": "theme",
+  "sections": {
+    "<section_key>": {
+      "type": "<section_filename_without_liquid>",
+      "settings": {
+        // text → plain string
+        "heading": "Section Heading",
+
+        // url → object
+        "cta_url": { "display_name": "Shop Now", "handle": "/collection" },
+
+        // image_picker → object
+        "banner_image": { "url": "banner.webp", "enable_customisation": true },
+
+        // media_picker (video) → object
+        "video_media": { "url": "video.mp4", "is_video": true },
+
+        // select → object
+        "layout_type": { "display_name": "Left Alignment", "value": "left-alignment" },
+
+        // menu → object
+        "nav_menu": { "display_name": "Main Menu", "handle": "main-menu" },
+
+        // checkbox → boolean
+        "show_heading": true,
+
+        // range/number → number
+        "padding_top": 40,
+        "padding_bottom": 40,
+
+        // color → hex string
+        "overlay_color": "#000000"
+      },
+      "blocks": {
+        "<block_key>": {
+          "type": "<block_type>",          // local: bare name; theme: zc_theme__<name>
+          "settings": {
+            // same field type rules as above
+          }
+        }
+      },
+      "block_order": ["<block_key>"]
+    }
+  },
+  "order": ["<section_key_1>", "<section_key_2>"]
+}
+```
+
+Rules for page JSON:
+- `"order"` array must match the visual top-to-bottom order from the Figma page
+- `"block_order"` must list all block keys in intended render order
+- Use descriptive section keys (e.g. `"hero-banner"` not `"section1"`)
+- Default values should be reasonable placeholder content, not lorem ipsum
+- All `display_name` values in url/select/menu can use plain English (not t: keys) in page JSON
+
+---
+
+
+## Step 4 — Save
+Write to: `pages/<page_name>.json`
+
+If the file already exists → show a diff of changes and ask for confirmation before overwriting.
+
+---
+
+
+## Step 5 — Confirm
+```
+✅ Page JSON written: pages/<page_name>.json
+
+SECTIONS INCLUDED (in order):
+1. header
+2. hero-banner
+3. category-grid
+4. featured-products
+5. footer
+
+⚠️ SKIPPED (not yet built):
+- promotional-strip → build with /build-section <theme_name> promotional-strip
+
+NEXT: 
+- Preview the page and run /qa-section on any sections that need adjustment
+- Or proceed to the next page with /audit-page <theme_name> <next_page>
+```

package/ts-dist/mocks/init-theme/.cursor/rules/audit-page.mdc

@@ -0,0 +1,92 @@
+---
+
+description: Audit a Figma page and produce a section build plan before writing any code
+alwaysApply: false
+---
+
+
+# /audit-page
+
+Analyse a Figma page and produce a structured section inventory.
+NO CODE is written during this command — only a build plan is produced.
+The user reviews and approves the plan before any section is built.
+
+## Usage
+```
+/audit-page <theme_name> <page_name>
+```
+Provide the Figma page frame via MCP or screenshot when running.
+
+---
+
+
+## Step 1 — Read the Figma Page
+Scan the full page layout top to bottom. Identify every distinct visual section/block.
+
+For each section found, determine:
+- **Section name** — descriptive slug (e.g. `hero-banner`, `category-grid`, `featured-products`)
+- **Type** — `section` (full layout block) or `snippet` (reusable UI element)
+- **Figma frame name** — the exact frame name in Figma
+- **Reference match** — find the closest existing section in this theme:
+  - Scan `sections/` for a filename that matches the purpose
+  - If found → mark as REUSE with path
+  - If not found → mark as NEW
+
+---
+
+
+## Step 2 — Output Build Plan
+
+Present the plan as a table. Do NOT write any code yet.
+
+```
+Page: <page_name> — <theme_name>
+Source: <Figma frame name>
+
+SECTION BUILD PLAN
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+#  | Section Name         | Type    | Figma Frame          | Reference                                      | Status
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+1  | header               | snippet | —                    | snippets/header.liquid | SHARED (skip)
+2  | hero-banner          | section | Home/Hero            | sections/banner.liquid   | REUSE + REDESIGN
+3  | category-grid        | section | Home/Categories      | sections/category-grid.liquid | REUSE + REDESIGN
+4  | featured-products    | section | Home/Featured        | none found                                     | NEW
+5  | promotional-strip    | section | Home/Promo           | sections/marquee.liquid  | REUSE + REDESIGN
+6  | footer               | section | —                    | sections/footer.liquid   | REUSE + REDESIGN
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+SUMMARY
+- SHARED (skip):      1  → already exists in snippets, no rebuild needed
+- REUSE + REDESIGN:   4  → copy logic from reference, apply new Figma design
+- NEW:                1  → build from scratch using schema.mdc + liquid.mdc
+
+SUGGESTED BUILD ORDER: 2 → 3 → 5 → 4 → 6
+(header is shared infrastructure, build last if changes needed)
+```
+
+---
+
+
+## Step 3 — Ask for Approval
+After presenting the plan, ask:
+
+```
+Does this section plan look correct?
+- Reply YES to proceed to building sections one by one
+- Reply EDIT to adjust any row before building
+- Reply /build-section <number> to jump straight to a specific section
+```
+
+Do NOT proceed to code until the user confirms.
+
+---
+
+
+## Step 4 — On Approval
+Remind the user of the build command:
+```
+Run: /build-section <theme_name> <section_name>
+
+Work through sections in the suggested build order.
+Each section will be built, reviewed, and confirmed before moving to the next.
+```