How it works

The real steps pulled from the SKILL.md — the agent runs them in this order.

1. 01

   Establish the content and output location

   Read the target repository and its instructions before writing. Identify the brand, audience, products, page needs and available content: name and one-line promise, the product range (names, prices, sizes, what makes each different), how people buy (online, stockists, wholesale,

2. 02

   Choose the deliverable

   No existing project: build **one self-contained HTML file** from the template, like the store demo. This is the default; do not ask a stack question. The buyer has a framework project or asks for one: inspect it first and port per `references/framework-adaptation.md` (Next.js App

3. 03

   Read and preserve the visual system

   Read `references/style-guide.md` and `references/visual-contract.md`, then open `references/template.html`. Keep these signatures in every output:

4. 04

   Plan the complete page family

   Read `references/page-library.md`, `references/route-inventory.md` and `references/interior-pages.md`. Inventory every navigation item, card, product, recipe, collection and form destination. Give each entity an id, title, category, specific description and its own image subject.

5. 05

   Plan and create the imagery

   Read `references/image-plan.md`. Before generating anything:

6. 06

   Build the structure

   Use shared components for header, mobile menu, search dialog, bag drawer, buttons, chips, product card, recipe card, forms, toast and footer. Keep collections (products, collections, recipes, stockists, FAQs, notes) in data modules rendered by small components. Use semantic landm

• SKILL.mddoc · 20 KB
• references/framework-adaptation.mddoc · 8 KB
• references/icon-library.mddoc · 1 KB
• references/image-plan.mddoc · 6 KB
• references/images/box.webpmedia · 144 KB
• references/images/cafe.webpmedia · 151 KB
• references/images/farm.webpmedia · 217 KB
• references/images/founders.webpmedia · 130 KB
• references/images/mill.webpmedia · 133 KB
• references/images/p-barista.webpmedia · 79 KB
• references/images/p-berry.webpmedia · 44 KB
• references/images/p-cocoa.webpmedia · 72 KB
• references/images/p-coffee.webpmedia · 57 KB
• references/images/p-matcha.webpmedia · 67 KB
• references/images/p-original.webpmedia · 55 KB
• references/images/p-vanilla.webpmedia · 42 KB
• references/images/picnic.webpmedia · 152 KB
• references/images/r-latte.webpmedia · 70 KB
• references/images/r-pancakes.webpmedia · 101 KB
• references/images/r-porridge.webpmedia · 102 KB
• references/images/r-smoothie.webpmedia · 70 KB
• references/images/recipe-bread.webpmedia · 166 KB
• references/images/recipe-cocoa.webpmedia · 104 KB
• references/images/table.webpmedia · 74 KB
• references/images/team.webpmedia · 175 KB
• references/interior-pages.mddoc · 4 KB
• references/motion-system.mddoc · 4 KB
• references/page-library.mddoc · 3 KB
• references/quality-checklist.mddoc · 4 KB
• references/reui-components.mddoc · 2 KB
• references/route-inventory.mddoc · 3 KB
• references/style-guide.mddoc · 11 KB
• references/template.htmlweb · 250 KB
• references/visual-contract.mddoc · 5 KB
• scripts/inline-assets.mjscode · 5 KB
• scripts/validate-design.mjscode · 18 KB