---
chain-id: 6
name: Storybook generation
path: A / B / C
status: live
prompts: [13, 14]
inputs: output/framework/*.tsx|.vue|.svelte (from Prompt 13) + output/tokens.css
outputs: output/stories/*.stories.tsx — one file per component, all variants + states
documented-in: Ch22 — Prompt Chains
---

# Chain 6 — Storybook Generation

Generates complete Storybook story files for every component in the framework wrapper set. Each story file covers all variants, all interactive states, Controls wiring, a11y annotations, and dark/light mode testing stories.

**When to use:** After Chain 3 Step 6 (Prompt 13 — framework wrappers). Run this chain immediately after framework wrappers are generated, while the component props are still fresh.

**Expected runtime:** 15–25 minutes for a typical foundation + composite set (10–15 components).

**Prerequisites:** `output/framework/` directory with component files from Prompt 13. `output/tokens.css`. Storybook installed in the target project (`npx storybook@latest init` if not already set up).

---

## Step table

| Step | Prompt | What lands | Checkpoint |
|---|---|---|---|
| 1 | `13-framework-wrappers.md` | `output/framework/*.tsx` — typed component wrappers | Confirm prop types are complete before stories |
| 2 | `14-storybook-generation.md` | `output/stories/*.stories.tsx` — one file per component | Run `npx storybook dev` and verify in browser |

---

## Step-by-step walkthrough

### Step 1 — Confirm framework wrappers (Prompt 13)

If you have already run Prompt 13 and have `output/framework/` files, skip to Step 2.

If you need to (re-)generate framework wrappers, run Prompt 13 first. Specify your framework target (React / Vue / Svelte / Web components). The story generator (Prompt 14) reads prop types directly from the wrapper files — if prop types are incomplete or use `any`, stories will be incomplete.

**What to verify before Step 2:**
- Every component has a typed `variant` prop (or equivalent) with all variants listed as a union type
- Every component passes `disabled`, `loading`, and other state props through to the DOM
- No `any` types in the prop interface — Storybook Controls cannot generate UI for untyped props

---

### Step 2 — Generate Storybook stories (Prompt 14)

**What to paste:**
1. `specs/governance.spec.md`
2. `specs/[archetype].spec.md`
3. `output/tokens.css`
4. All files from `output/framework/` (paste all component files)
5. Your Storybook version target (default: 8.x)

**What the prompt generates — per component:**
- `Default` — default props, the canonical neutral story
- `AllVariants` — all variants rendered side by side in a flex row
- `AllSizes` — all sizes side by side (if component has sizes)
- `Disabled` — disabled state (with a11y contrast rule disabled, WCAG exempt)
- `Loading` — loading state (if component has one)
- `Focus` — focus ring visible (autoFocus prop)
- `DarkMode` — wrapped in `data-theme="dark"`
- `LightMode` — wrapped in `data-theme="light"`
- For interactive components: `Open`, `Closed`, `WithKeyboard` stories

**What to check after generation:**

1. Run `npx storybook dev` in the project root
2. Open http://localhost:6006
3. In the sidebar: confirm every component from `output/framework/` appears in the tree under `[Archetype]/Foundation`, `[Archetype]/Composite`, etc.
4. Select any component → Controls tab: confirm the controls render for all props (variant selector, boolean toggles, text inputs)
5. Select any component → A11y tab: confirm no violations for non-disabled stories. Disabled stories will show a color-contrast warning — this is expected and correct.
6. Click through `DarkMode` and `LightMode` stories: confirm the theme switch applies correctly.

**Common failures:**
- *Story file has a TypeScript error:* Paste the error into a new message with the prompt: "Fix this TypeScript error in [story filename]: [error text]." The prompt patches the specific file.
- *Controls tab is empty:* The component prop types were not inferred. Check that the framework wrapper uses explicit TypeScript types (not `any`). Re-run Prompt 13 with: "Use explicit TypeScript union types for all variant and size props."
- *Dark mode story doesn't switch:* The `data-theme` attribute must be on the wrapping `<div>`, not on the component itself, and tokens.css must use `[data-theme="light"]` as the override selector. Confirm this in `output/tokens.css`.

---

## What this gives you

**Living documentation:** generated alongside components, not retrofitted after the fact. Stories describe exactly what props exist, what states are possible, and what the component looks like in each state.

**A11y continuous testing:** the `@storybook/a11y` addon runs WCAG checks on every story automatically. Any new component that introduces a contrast failure or missing ARIA attribute shows up in the A11y panel immediately.

**Design handoff reference:** share the Storybook URL with designers. Every variant is visible without opening code. Dark/light mode stories let designers verify both themes without switching their OS setting.

**CI integration:** add `storybook build` to CI and run `test-storybook` for automated story testing. Any story that fails to render without error fails the build.

---

*Chain 6 · Storybook Generation · Design Systems That Build Themselves · © 2026 Ishdeep S Sahni*