Stack context: Foundry is a Next.js 15 (App Router) + React 19 + TypeScript + Tailwind CSS 4.1 application. Components use Untitled UI primitives. Auth is Clerk. Backend is Convex (reactive BaaS). All data hooks (useQuery, useMutation) require mock decorators in stories.
Component domains (25): ai, ai-features, audit, comments, coordination, dashboard, discovery, documents, gates, integrations, layout, mission-control, pipeline, pipeline-lab, playbooks, programs, risks, sandbox, search, shared, skills, source-control, sprints, tasks, videos
Pages (42+): All under src/app/(dashboard)/[programId]/ plus auth pages at src/app/sign-in/, src/app/sign-up/.
Story standards — every story file MUST include:
- Default visual story per component variant
- Play functions for interactive elements (click, type, select, hover)
- Accessibility assertions via
@storybook/test (expect + within)
- Responsive viewport stories (mobile 375px, tablet 768px, desktop 1280px)
- Mock decorators for Convex queries/mutations and Clerk auth context
Subagent parallelization: Component domains are independent. Deploy one subagent per domain directory (up to 6 concurrent). Each subagent discovers .tsx files (excluding .test.tsx, .stories.tsx), reads each component, and generates a .stories.tsx file beside it.
File naming: ComponentName.stories.tsx placed adjacent to ComponentName.tsx.
Never generate stories for: test files, type-only files, barrel exports (index.ts), layout wrappers that only compose providers.
- Initialize Storybook — Install and configure Storybook for Foundry from scratch
- Generate all stories — Deploy subagents to create stories for every component and page
- Full setup — Initialize Storybook AND generate all stories in one run
- Add a story — Generate a story for a single new component
Wait for response before proceeding.
After reading the workflow, follow it exactly.
Codebase map: foundry-component-map.md — All 25 component domains with file listings and page routes
Story patterns: story-templates.md — CSF3 story templates with full coverage (visual, interaction, a11y, responsive)
Storybook config: storybook-config.md — Configuration patterns for Next.js 15 + Tailwind 4.1 + Convex + Clerk
1---2name: generate-storybook3description: Initializes Storybook for the Foundry codebase, discovers all components and pages, then deploys parallel subagents to generate comprehensive stories with visual, interaction, accessibility, and responsive coverage. Use when setting up Storybook or generating stories for components.4---56<essential_principles>78**Stack context:** Foundry is a Next.js 15 (App Router) + React 19 + TypeScript + Tailwind CSS 4.1 application. Components use Untitled UI primitives. Auth is Clerk. Backend is Convex (reactive BaaS). All data hooks (`useQuery`, `useMutation`) require mock decorators in stories.910**Component domains (25):** ai, ai-features, audit, comments, coordination, dashboard, discovery, documents, gates, integrations, layout, mission-control, pipeline, pipeline-lab, playbooks, programs, risks, sandbox, search, shared, skills, source-control, sprints, tasks, videos1112**Pages (42+):** All under `src/app/(dashboard)/[programId]/` plus auth pages at `src/app/sign-in/`, `src/app/sign-up/`.1314**Story standards — every story file MUST include:**15- Default visual story per component variant16- Play functions for interactive elements (click, type, select, hover)17- Accessibility assertions via `@storybook/test` (`expect` + `within`)18- Responsive viewport stories (mobile 375px, tablet 768px, desktop 1280px)19- Mock decorators for Convex queries/mutations and Clerk auth context2021**Subagent parallelization:** Component domains are independent. Deploy one subagent per domain directory (up to 6 concurrent). Each subagent discovers `.tsx` files (excluding `.test.tsx`, `.stories.tsx`), reads each component, and generates a `.stories.tsx` file beside it.2223**File naming:** `ComponentName.stories.tsx` placed adjacent to `ComponentName.tsx`.2425**Never generate stories for:** test files, type-only files, barrel exports (index.ts), layout wrappers that only compose providers.26</essential_principles>2728<intake>29What would you like to do?30311. **Initialize Storybook** — Install and configure Storybook for Foundry from scratch322. **Generate all stories** — Deploy subagents to create stories for every component and page333. **Full setup** — Initialize Storybook AND generate all stories in one run344. **Add a story** — Generate a story for a single new component3536**Wait for response before proceeding.**37</intake>3839<routing>40| Response | Workflow |41|----------|----------|42| 1, "init", "initialize", "install", "setup storybook" | `workflows/initialize-storybook.md` |43| 2, "generate", "stories", "all stories", "create stories" | `workflows/generate-stories.md` |44| 3, "full", "both", "everything", "full setup" | `workflows/initialize-storybook.md` THEN `workflows/generate-stories.md` |45| 4, "add", "single", "one component", "new story" | `workflows/add-story.md` |4647**After reading the workflow, follow it exactly.**48</routing>4950<reference_index>51All domain knowledge in `references/`:5253**Codebase map:** foundry-component-map.md — All 25 component domains with file listings and page routes54**Story patterns:** story-templates.md — CSF3 story templates with full coverage (visual, interaction, a11y, responsive)55**Storybook config:** storybook-config.md — Configuration patterns for Next.js 15 + Tailwind 4.1 + Convex + Clerk56</reference_index>5758<workflows_index>59| Workflow | Purpose |60|----------|---------|61| initialize-storybook.md | Install deps, configure Storybook for Foundry's stack |62| generate-stories.md | Deploy parallel subagents to create stories for all components and pages |63| add-story.md | Generate a story for a single component |64</workflows_index>6566<success_criteria>67- Storybook launches without errors via `bun run storybook`68- Every `.tsx` component in `src/components/` has a corresponding `.stories.tsx`69- Every page in `src/app/` has a corresponding `.stories.tsx`70- Stories render visually, pass interaction tests, include a11y checks, and test responsive viewports71- No stories generated for test files, types, or barrel exports72</success_criteria>
qdhenry