How it works

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

1. 01

   Gather the product story

   Ask for, or draft in a calm, specific product voice:

2. 02

   Choose the target stack

   Use the framework the user asks for. If they are working inside an existing repository, detect the stack from its signals (`package.json` dependencies, framework config, existing component folders) and build there in that stack's idiom. With no repository and no preference, defau

3. 03

   Read the style guide

   Read [references/style-guide.md](references/style-guide.md). Non-negotiables:

4. 04

   Plan the pages

   Read [references/page-library.md](references/page-library.md) for every section, its slots and its interaction. Keep the five pages in the nav in this order: Product, Pricing, Resources, Events, Changelog. Drop a page only when the user asks; if you drop one, remove it from the n

5. 05

   Set the icons

   Read [references/icon-library.md](references/icon-library.md). All icons are inline SVG from one sprite: Lucide strokes at 2px for UI (arrows on CTAs and "N articles" links, checks in plan lists and release notes, plus/minus on FAQ, search, play, RSS, download on the primary CTA,

6. 06

   Set the imagery

   The style is mostly drawn in code — the app window, charts, glows and video thumbnails are HTML/CSS/SVG. Photographs are only people: small round avatars (28–40px) and one 3:4 portrait inside the bento "agent" ID card.

Report the pages built, where the files are, which images were generated or supplied, and any interaction that is simulated locally rather than connected to a real service.

• SKILL.mddoc · 8 KB
• references/framework-adaptation.mddoc · 2 KB
• references/icon-library.mddoc · 2 KB
• references/page-library.mddoc · 3 KB
• references/style-guide.mddoc · 3 KB
• references/template.htmlweb · 154 KB
• references/third-party-notices.mddoc · 1 KB
• scripts/validate-site.mjscode · 3 KB