How it works

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

1. 01

   Establish content and output location

   Read the target repository and its instructions first. Collect, or draft in the designer's plain first-person voice: name, discipline label, city, founding year and availability (city and availability are the two hero chips); a three-sentence bio with two or three bolded facts; a

2. 02

   Choose the stack

   With no existing project and no requested framework, the deliverable is **one self-contained HTML file** built from the template, like the store demo: copy `references/template.html` next to an `images/` folder, fill it, then run `scripts/inline-assets.mjs` (images and fonts beco

3. 03

   Keep the signature, read the system

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

4. 04

   Plan the pages

   Use `references/route-inventory.md` and `references/page-library.md`. Home, a project index with one page per project, Contact (the brief form) and Not found always ship; About and Services ship unless the brief has nothing for them. Route names and labels are the buyer's own (re

5. 05

   Plan and make the images

   Follow `references/image-plan.md`. Write one art-direction sentence, then one slot per role: the greyscale cut-out portrait, one type-free artwork per project (each a different print medium, the type zone left empty), one documentary studio photograph, and blank-sheet plates (wal

6. 06

   Build structure and interactions

   Shared components: header, sheet, chip label, buttons, chips, poster card, field, segmented choice, accordion, toast, CTA band, footer. Collections render from data. Required behaviour:

• SKILL.mddoc · 20 KB
• references/framework-adaptation.mddoc · 9 KB
• references/icon-library.mddoc · 2 KB
• references/image-plan.mddoc · 14 KB
• references/images/portrait-jonas.webpmedia · 50 KB
• references/images/poster-cine-claro.webpmedia · 103 KB
• references/images/poster-field-notes.webpmedia · 249 KB
• references/images/poster-harbour-lights.webpmedia · 130 KB
• references/images/poster-low-tide.webpmedia · 107 KB
• references/images/poster-open-kennel.webpmedia · 60 KB
• references/images/poster-ridge-run.webpmedia · 219 KB
• references/images/poster-santo-bairro.webpmedia · 275 KB
• references/images/poster-typewriter-bloom.webpmedia · 280 KB
• references/images/scene-field-notes.webpmedia · 229 KB
• references/images/scene-harbour-lights.webpmedia · 370 KB
• references/images/scene-low-tide-sessions.webpmedia · 90 KB
• references/images/scene-typewriter-bloom.webpmedia · 143 KB
• references/images/studio.webpmedia · 122 KB
• references/interior-pages.mddoc · 2 KB
• references/motion-system.mddoc · 4 KB
• references/page-library.mddoc · 6 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 · 140 KB
• references/visual-contract.mddoc · 3 KB
• scripts/composite-in-place.pycode · 4 KB
• scripts/inline-assets.mjscode · 5 KB
• scripts/validate-mono.mjscode · 22 KB