stage 4 · componentscomponentsdocumentationbuild-outstewardship

Set Up a Documentation Site

Produces a self-contained docs/index.html with token swatches, component gallery, and usage notes — no build step, openable from the filesystem.

play · setup-documentation-site
You are setting up a lightweight component gallery and token reference that the team can maintain. This is not Storybook — it is a simple, maintainable solution. **Step 1 — Read the living brief:** Read `LIVING_BRIEF.md`. Note the framework and technology stack. **Step 2 — Confirm approach:** Recommend a single `docs/index.html` — a self-contained HTML file that renders all components, tokens, and usage examples with no build step required. Ask the user to confirm or redirect. **Step 3 — Generate docs/index.html:** The file must contain: 1. **Token reference** — all color tokens as swatches with values; all type roles rendered; all radius and shadow tokens shown 2. **Component gallery** — each core component in its variants and states; organized by name 3. **Usage notes** — brief "when to use" for each component (design intent, not API reference) 4. **Page example links** — links to the page example files 5. **Visual direction summary** — the visual direction brief from `establish-visual-language`, condensed for the team Technical requirements: self-contained HTML, reads from the same CSS custom property values used in the product, openable directly from the filesystem. **Step 4 — Update the living brief:** Append to the Decision Log: ``` [date] — Documentation site generated — [approach, sections included] ``` ---
paste intoClaude CodeCursor

Part of a campaign

Tip

Plays work best when your agent has read DESIGN.md first. Run session-start at the beginning of each session to orient it.

How plays work

Covers DESIGN.md setup, pulling KB references into prompts, and running plays end-to-end.

Read the guide