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 first. Identify the brand, audience, products, policies and pages needed. Ask only for information that blocks progress; otherwise draft clearly fictional, specific content (real sizes, materials, prices, cut-off times, addresses th

2. 02

   Choose the deliverable

   No existing project and no named stack: 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, never silently migrate an application, and

3. 03

   Read the visual system

   Read `references/style-guide.md` and `references/visual-contract.md`, then open `references/template.html` (it runs as-is; images sit in `references/images/` and fonts load from the fontsource CDN). Note the tokens, type scale, frame band, the hero's split card and type ceiling,

4. 04

   Plan the page family

   Read `references/page-library.md`, `references/route-inventory.md` and `references/interior-pages.md`. List every nav item, tile, card, footer link and form destination, and give each a real page. Products, categories, articles, FAQ items and reviews live in typed data collection

5. 05

   Plan and produce the images

   Read `references/image-plan.md` before generating anything.

6. 06

   Build the structure

   Shared components: frame, header (sticky, condenses on scroll, active nav), footer (columns, newsletter, legal), buttons, chips, fields, product card, mini cart, drawers, dialog, toast. Semantic landmarks, skip link, one H1 per route, labelled inputs, `aria-*` on custom widgets.

• SKILL.mddoc · 16 KB
• references/framework-adaptation.mddoc · 7 KB
• references/icon-library.mddoc · 1 KB
• references/image-plan.mddoc · 15 KB
• references/images/about-shop.webpmedia · 199 KB
• references/images/banner-spring.webpmedia · 74 KB
• references/images/banner-sundays.webpmedia · 157 KB
• references/images/cat-blue.webpmedia · 110 KB
• references/images/hero-portrait.webpmedia · 92 KB
• references/images/journal-bath.webpmedia · 105 KB
• references/images/journal-kitten.webpmedia · 73 KB
• references/images/journal-walk.webpmedia · 108 KB
• references/images/p-bristle-brush.webpmedia · 23 KB
• references/images/p-cloud-bed.webpmedia · 35 KB
• references/images/p-cord-bolster.webpmedia · 25 KB
• references/images/p-daily-bowl.webpmedia · 16 KB
• references/images/p-drizzle-coat.webpmedia · 24 KB
• references/images/p-feather-wand.webpmedia · 16 KB
• references/images/p-gentle-wash.webpmedia · 9 KB
• references/images/p-harbor-lead.webpmedia · 24 KB
• references/images/p-play-rope.webpmedia · 15 KB
• references/images/p-puzzle-ball.webpmedia · 14 KB
• references/images/p-salmon-oat-kibble.webpmedia · 15 KB
• references/images/p-soft-harness.webpmedia · 37 KB
• references/images/p-trail-bottle.webpmedia · 9 KB
• references/images/p-weekender-carrier.webpmedia · 35 KB
• references/interior-pages.mddoc · 1 KB
• references/motion-system.mddoc · 4 KB
• references/page-library.mddoc · 3 KB
• references/quality-checklist.mddoc · 5 KB
• references/reui-components.mddoc · 3 KB
• references/route-inventory.mddoc · 3 KB
• references/style-guide.mddoc · 8 KB
• references/template.htmlweb · 240 KB
• references/visual-contract.mddoc · 4 KB
• scripts/inline-assets.mjscode · 5 KB
• scripts/validate-design.mjscode · 16 KB