How it works

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

1. 01

   Gather the content story

   Ask for, or draft in the confident first-person voice of the style:

2. 02

   Choose the deliverable

   No existing project: build **one self-contained HTML file** from the template, like the store demo (hash router, fonts and images inlined). This is the default; do not ask a stack question. The user has a framework project or asks for one (Vue, React, Astro, Next.js, a starter…):

3. 03

   Interface components come from ReUI (React outputs)

   The template renders its controls in plain HTML so it runs as one sandboxed file. When the output is a React or Next.js port, build the generic controls (buttons, inputs, selects, checkbox and radio chips, segmented toggles, tabs, accordions, the menu sheet, toasts) with [ReUI](h

4. 04

   Read the style guide

   Read `references/style-guide.md` and `references/visual-contract.md`. Non-negotiables:

5. 05

   Plan pages and sections

   Read `references/page-library.md`, `references/route-inventory.md` and `references/interior-pages.md`. The route set follows the buyer's information architecture; the worked example's Work, Services, About, Insights, Process and Contact are one mapping, not a requirement. Always

6. 06

   Plan the imagery

   Read `references/image-plan.md`. Write one art-direction sentence and a slot table (id, role, aspect, crop focus, where used, prompt) before generating. Slots in this style:

• SKILL.mddoc · 20 KB
• references/framework-adaptation.mddoc · 7 KB
• references/icon-library.mddoc · 2 KB
• references/image-plan.mddoc · 9 KB
• references/images/firnook-market.webpmedia · 185 KB
• references/images/firnook-pouches.webpmedia · 93 KB
• references/images/insight-consistency.webpmedia · 50 KB
• references/images/insight-logo.webpmedia · 34 KB
• references/images/insight-personality.webpmedia · 39 KB
• references/images/insight-presscheck.webpmedia · 40 KB
• references/images/juno-bw.webpmedia · 25 KB
• references/images/juno-cutout.webpmedia · 130 KB
• references/images/marrowbay-hut.webpmedia · 118 KB
• references/images/marrowbay-tote.webpmedia · 46 KB
• references/images/process-hands.webpmedia · 153 KB
• references/images/studio-shed.webpmedia · 180 KB
• references/images/wickmoor-evening.webpmedia · 133 KB
• references/images/wickmoor-tins.webpmedia · 40 KB
• references/images/wigglewax-box.webpmedia · 38 KB
• references/images/wigglewax-table.webpmedia · 97 KB
• references/interior-pages.mddoc · 2 KB
• references/motion-system.mddoc · 4 KB
• references/page-library.mddoc · 4 KB
• references/quality-checklist.mddoc · 5 KB
• references/reui-components.mddoc · 2 KB
• references/route-inventory.mddoc · 3 KB
• references/style-guide.mddoc · 8 KB
• references/template.htmlweb · 222 KB
• references/visual-contract.mddoc · 4 KB
• scripts/inline-assets.mjscode · 5 KB
• scripts/validate-marker.mjscode · 20 KB