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 guidePart 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