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 (if any) and its instructions first. Identify the brand, market, audience, product range and page requirements, then map them onto the template with **Adapting to a real brief** below. Ask only for information that blocks progress. For a real business,

2. 02

   Choose the deliverable

3. 03

   Read the visual system before writing UI

   Read `references/style-guide.md` and `references/visual-contract.md`, then open `references/template.html` (it renders on its own; images ship in `references/images/` and fonts load from the fontsource CDN). Preserve these signatures:

4. 04

   Plan the complete page family

   Read `references/page-library.md`, `references/route-inventory.md` and `references/interior-pages.md`. Inventory every nav item, card, CTA, footer link and form destination before building. Each entity (bike, category, accessory, story, shop) gets an id, specific copy and its own

5. 05

   Plan and produce the imagery as a set

   Read `references/image-plan.md`. Write the art direction once, then plan slots by role: hero (orange studio, one per hero slide), catalog (one studio shot per product), category/lifestyle (dusk, warm rim light), detail macros (orange backdrop), editorial (journal), people/worksho

6. 06

   Build the structure

   Use shared components (header, mega menu, cards, buttons, fields, drawer, footer). Keep content in typed collections separate from components. One `h1` per page, semantic landmarks, skip link, labelled inputs, `aria-*` on custom widgets. Tokens at the top of the CSS; no inline gr

• SKILL.mddoc · 20 KB
• references/framework-adaptation.mddoc · 7 KB
• references/icon-library.mddoc · 1 KB
• references/image-plan.mddoc · 24 KB
• references/images/about-workshop.webpmedia · 136 KB
• references/images/bike-ease.webpmedia · 62 KB
• references/images/bike-grit.webpmedia · 55 KB
• references/images/bike-linea.webpmedia · 57 KB
• references/images/bike-mule.webpmedia · 50 KB
• references/images/bike-pocket.webpmedia · 49 KB
• references/images/bike-scree.webpmedia · 56 KB
• references/images/cat-cargo.webpmedia · 98 KB
• references/images/cat-commute.webpmedia · 149 KB
• references/images/cat-step.webpmedia · 148 KB
• references/images/cat-trail.webpmedia · 95 KB
• references/images/detail-battery.webpmedia · 70 KB
• references/images/detail-brake.webpmedia · 117 KB
• references/images/detail-cockpit.webpmedia · 55 KB
• references/images/detail-drive.webpmedia · 72 KB
• references/images/eq-bag.webpmedia · 39 KB
• references/images/eq-bottle.webpmedia · 16 KB
• references/images/eq-helmet.webpmedia · 19 KB
• references/images/eq-light.webpmedia · 24 KB
• references/images/eq-lock.webpmedia · 13 KB
• references/images/eq-rack.webpmedia · 22 KB
• references/images/hero-linea-stage.webpmedia · 103 KB
• references/images/hero-linea.webpmedia · 98 KB
• references/images/hero-mule-stage.webpmedia · 85 KB
• references/images/hero-mule.webpmedia · 82 KB
• references/images/hero-scree-stage.webpmedia · 96 KB
• references/images/hero-scree.webpmedia · 91 KB
• references/images/journal-cargo.webpmedia · 130 KB
• references/images/journal-coast.webpmedia · 122 KB
• references/interior-pages.mddoc · 2 KB
• references/motion-system.mddoc · 4 KB
• references/page-library.mddoc · 4 KB
• references/quality-checklist.mddoc · 4 KB
• references/reui-components.mddoc · 3 KB
• references/route-inventory.mddoc · 3 KB
• references/style-guide.mddoc · 8 KB
• references/template.htmlweb · 261 KB
• references/visual-contract.mddoc · 5 KB
• scripts/inline-assets.mjscode · 5 KB
• scripts/normalize-images.pycode · 16 KB
• scripts/validate-design.mjscode · 16 KB