---
chain-id: 3
name: Component generation
path: A / B / C
status: live
prompts: [03, 04, 05, 06, 07, 13]
inputs: output/tokens.css + governance.spec.md + archetype.spec.md + domain descriptions (for step 5)
outputs: output/foundation.css + output/composite.css + output/patterns.css + output/chrome.css + output/domain.css + output/framework/*.tsx|.vue|.svelte
documented-in: Ch12 — Component Specification · Ch13 — Layout Patterns · Ch14 — Design Patterns
---

# Chain 3 — Component Generation

Generates the full component library in six sequential layers, each building on the tokens and components from the previous step. Outputs production-ready CSS for every component type, plus optional framework wrappers.

**When to use:** After Chain 1 or Chain 2 has produced `output/tokens.css`. Run as many or as few steps as your component scope requires.

**Expected runtime:** 45–90 minutes for the full chain (each step: 8–15 min generation + 5 min review).

**Prerequisites:** `output/tokens.css` must exist. `specs/governance.spec.md` and `specs/[archetype].spec.md` available.

---

## Step table

| Step | Prompt | What lands | Checkpoint |
|---|---|---|---|
| 1 | `03-foundation-components.md` | `output/foundation.css` — Button, Input, Badge, Card, Alert, Dialog, Table, Form, Empty state | Visual + a11y review |
| 2 | `04-composite-components.md` | `output/composite.css` — Modal, Drawer, Popover, Tabs, Accordion, Combobox | Composition review |
| 3 | `05-pattern-components.md` | `output/patterns.css` — archetype-aware page patterns | Pattern review |
| 4 | `06-chrome.md` | `output/chrome.css` — Nav, Header, Footer, Sidebar, Command palette | Chrome review |
| 5 | `07-domain-components.md` | `output/domain.css` — product-specific components from your descriptions | Domain review |
| 6 | `13-framework-wrappers.md` | `output/framework/*.tsx` or `.vue` or `.svelte` | Framework review |

---

## Step-by-step walkthrough

### Step 1 — Foundation components (Prompt 03)

**What to paste:**
1. `specs/governance.spec.md`
2. `specs/[archetype].spec.md`
3. `output/tokens.css`

**What the prompt generates:** The atomic component set — every interactive primitive in your design system. Button (all variants and states), Input (text, search, select, number), Badge, Card, Alert, Dialog/Modal shell, Table (base structure), Form layout, Empty state.

**What to check:**
- Open `output/foundation.css` in a browser (wrap components in a basic HTML scaffold to render them). Verify: hover/focus/disabled states are visually distinct. WCAG contrast passes on all text. Focus rings are visible at 2px minimum.
- Check archetype-specific rules: Lattice buttons should have no filled variant except primary commit actions. Harbor cards should use warm oklch shadows. Sentinel table cells should use tabular numerals.
- Run Chain 5 (a11y audit) on this output before proceeding — fixing a11y issues at the foundation level is cheaper than at the composite level.

**Common failures:**
- *Component uses raw hex instead of tokens:* The prompt should use `var(--token)` throughout. If raw values appear, add to the prompt: "All color, spacing, and radii values must reference tokens from the pasted tokens.css. No hardcoded values."
- *Missing disabled state:* Governance requires disabled as a visually distinct state for every interactive component. If absent, add: "Generate a disabled state for every component using --color-text-disabled and 0.4 opacity on interactive elements."

---

### Step 2 — Composite components (Prompt 04)

**What to paste:**
- `specs/governance.spec.md`, `specs/[archetype].spec.md`, `output/tokens.css`
- `output/foundation.css` (the prompt composes composites from foundation primitives)

**What the prompt generates:** Components that compose multiple foundation elements. Modal (Dialog + overlay + focus trap), Drawer (right/left edge panels), Popover (anchored overlay), Tabs, Accordion, Combobox (Input + dropdown + keyboard navigation).

**What to check:**
- Modal: focus trap works (Tab cycles within the modal, Esc closes). Overlay backdrop is correct opacity from `--shadow-modal`.
- Drawer: slides in from the correct edge. j/k keyboard shortcuts cycle items (Lattice). Esc closes.
- Combobox: keyboard navigation (Arrow keys, Enter, Esc) works. Screen reader announcements present (aria-live region).

**Generation rule:** Each step adds to the output — never replaces. `output/composite.css` imports `output/foundation.css`. If you need to regenerate one composite only, re-run Prompt 04 targeting that component — do not regenerate the whole file.

---

### Step 3 — Pattern components (Prompt 05)

**What to paste:**
- `specs/governance.spec.md`, `specs/[archetype].spec.md`, `output/tokens.css`
- `output/foundation.css`, `output/composite.css`

**What the prompt generates:** Archetype-specific page patterns — recurring layouts that compose foundation and composite components. Examples: Harbor's editorial hero + feature grid + testimonial strip; Sentinel's data table page with filter bar + bulk action toolbar; Lattice's multi-pane workspace with splitters.

**What to check:**
- Patterns are responsive at your target breakpoints. No horizontal overflow.
- Pattern uses archetype section template vocabulary (Harbor's template 01–03, Sentinel's dashboard shell, Lattice's W1–W6 workspace types).
- No pattern introduces a new raw value — everything through tokens.

---

### Step 4 — Chrome (Prompt 06)

**What to paste:**
- `specs/governance.spec.md`, `specs/[archetype].spec.md`, `output/tokens.css`
- `output/foundation.css`

**What the prompt generates:** Navigation chrome — the shell of the application. Global nav, page header, footer, sidebar (if archetype uses one), command palette (Cmd+K, required for Lattice). Sticky behavior, scroll handling, mobile adaptation.

**What to check:**
- Nav is keyboard navigable end-to-end.
- Skip-to-content link is present (governance requirement).
- Command palette (Lattice): opens on Cmd+K, closes on Esc, fuzzy search works, keyboard navigation within results works.
- Mobile: hamburger menu is absent for Lattice (governance bans it); Harbor has a mobile nav drawer.

---

### Step 5 — Domain components (Prompt 07)

**What to paste:**
- `specs/governance.spec.md`, `specs/[archetype].spec.md`, `output/tokens.css`
- `output/foundation.css`, `output/composite.css`
- Your domain component descriptions (up to 5 components, 1–2 sentences each)

**Example descriptions:**
> "Policy rule editor: a two-pane component with a rule list on the left (selectable, reorderable) and a rule detail form on the right. Supports add/remove rules and inline validation."
> "Cluster health card: shows hostname, status dot, CPU sparkline (last 5 min), memory bar, and last-deploy timestamp. Used in a grid on the monitoring dashboard."

**What the prompt generates:** Product-specific components built from foundation + composite primitives, following the archetype's component specification rules.

**What to check:**
- Domain components compose from existing primitives — no new design patterns that conflict with the archetype's vocabulary.
- All interactive states accounted for (loading, error, empty, populated).
- Keyboard navigation documented via tooltip + shortcut hints (Lattice).

---

### Step 6 — Framework wrappers (Prompt 13)

**What to paste:**
- `output/foundation.css`, `output/composite.css`, `output/patterns.css`, `output/chrome.css`, `output/domain.css`
- Your framework target (React / Vue / Svelte / Web components)

**What the prompt generates:** Framework component files that import the generated CSS and expose typed props matching each component's variant and state API.

**Example React output:**
```tsx
// output/framework/Button.tsx
import '../foundation.css';
export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'destructive';
export type ButtonSize = 'xs' | 'sm' | 'md';
export const Button = ({ variant = 'secondary', size = 'md', disabled, children, ...props }) => (
  <button className={`btn btn--${variant} btn--${size}`} disabled={disabled} {...props}>
    {children}
  </button>
);
```

**What to check:**
- Props match the CSS class variants exactly.
- Disabled state is passed through to the DOM element (not just CSS class).
- Framework file imports the CSS — no inline styles.

---

## Component accumulation rule

Each step adds to the output, never replaces. If a step fails mid-run:
1. Keep the output that was generated before the failure.
2. Re-run only the failed step with the same inputs.
3. Append the new output to the existing file — do not overwrite.

Drift detected in any file → re-run only that step via Chain 4 (drift audit) + targeted re-generation. Do not re-run the full chain unless the token layer changed.

---

## What to do with the output

After Chain 3:
- **Run Chain 4** (drift audit) against the generated CSS before shipping. Category A findings (hardcoded hex, raw values) must be resolved.
- **Run Chain 5** (a11y audit) on the rendered components. Critical findings block shipping.
- **Run Chain 7** (spec page) to assemble the generated CSS into a publishable design system reference page.

---

*Chain 3 · Component Generation · Design Systems That Build Themselves · © 2026 Ishdeep S Sahni*