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 a warm, direct first-person voice:

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, preserve unrelated files, never silently migrate an applicati

3. 03

   Interface components come from ReUI (React outputs)

   In a React output (a framework port: Next.js unless the project uses another React stack), build the generic controls (buttons, inputs, selects, chip groups, accordion, mobile menu sheet, carousel controls) with [ReUI](https://reui.io) components rather than hand-written controls

4. 04

   Plan pages and sections

   Read [references/page-library.md](references/page-library.md), [references/route-inventory.md](references/route-inventory.md) and [references/interior-pages.md](references/interior-pages.md). Always ship Home, About, a services index with one page per service, a work index with o

5. 05

   Plan the imagery before generating anything

   Follow [references/image-plan.md](references/image-plan.md): write one art direction sentence, then a slot table (id, role, aspect, crop focus, where used, prompt). Every project gets its own cover subject; the portrait and the studio photo must show the same person (match hair,

6. 06

   Fill the template

   Copy `references/template.html` with the `images/` you keep into a working folder (for example `site/index.src.html` plus `site/images/`). Work through every `<!-- REPLACE: ... -->` comment, then `SITE`, `SERVICES`, `PROJECTS`, `FAQS`, `FAQ_CATS`, `HOME_FAQS`, `FEATURED` and `FIL

• SKILL.mddoc · 19 KB
• references/framework-adaptation.mddoc · 6 KB
• references/icon-library.mddoc · 2 KB
• references/image-plan.mddoc · 10 KB
• references/images/client-1.webpmedia · 4 KB
• references/images/client-2.webpmedia · 4 KB
• references/images/client-3.webpmedia · 4 KB
• references/images/client-4.webpmedia · 3 KB
• references/images/client-5.webpmedia · 3 KB
• references/images/client-6.webpmedia · 3 KB
• references/images/collab-proofs.webpmedia · 81 KB
• references/images/collab-table.webpmedia · 94 KB
• references/images/kelden.webpmedia · 121 KB
• references/images/mirefield-stationery.webpmedia · 69 KB
• references/images/mirefield.webpmedia · 146 KB
• references/images/ondel.webpmedia · 83 KB
• references/images/portrait.webpmedia · 66 KB
• references/images/saltmere.webpmedia · 141 KB
• references/images/seedlark.webpmedia · 144 KB
• references/images/sketch.webpmedia · 67 KB
• references/images/studio.webpmedia · 79 KB
• references/images/thalla-range.webpmedia · 74 KB
• references/interior-pages.mddoc · 2 KB
• references/motion-system.mddoc · 4 KB
• references/page-library.mddoc · 5 KB
• references/quality-checklist.mddoc · 5 KB
• references/reui-components.mddoc · 3 KB
• references/route-inventory.mddoc · 2 KB
• references/style-guide.mddoc · 10 KB
• references/template.htmlweb · 203 KB
• references/visual-contract.mddoc · 3 KB
• scripts/inline-assets.mjscode · 5 KB
• scripts/validate-lime.mjscode · 19 KB