# stageboard

> stageboard renders every screen, flow and component of a React app on one board from Storybook-compatible stories with mock data. People annotate it and an agent (Claude Code, Codex, atmOS or any CLI) changes the real components, optionally as live variants.

Install with `npm i -D stageboard`, then `npx stageboard skill` installs an agent skill. Stories are `*.stories.tsx`; variants are `*.variant.tsx`; flows live in `stageboard/board.json`. Agents check their work with `npx stageboard shot` and the MCP server.

Every page in full, as Markdown, in one file: https://docs.stageboard.design/llms-full.txt

## Start here
- [Introduction](https://docs.stageboard.design/index.md): Learn what stageboard is, who it is for and how its annotate-and-fix loop works.
- [Quick start](https://docs.stageboard.design/quick-start.md): Install stageboard, write a first story and open the board, either through your agent or by hand.
- [Configuration](https://docs.stageboard.design/configuration.md): Look up every field of stageboard.config.ts, its type, its default and what it changes.

## Guides
- [Stories](https://docs.stageboard.design/guides/stories.md): Write stories for your components and pages, wrap them in providers and mocks with a preview file, and know how story ids are made.
- [Screens and pages](https://docs.stageboard.design/guides/screens.md): Turn page components into screens with parameters.page, browse them as Desktop, Tablet or Mobile, in light or dark, grouped by area.
- [Flows](https://docs.stageboard.design/guides/flows.md): Build ordered journeys through your screens, describe and play each step, store them in stageboard/board.json and render a whole flow into one image.
- [Annotate](https://docs.stageboard.design/guides/annotate.md): Mark up any screen, component or flow, sketch the change you want on the live page, and send it to your agent with screenshots and source paths.
- [Variants](https://docs.stageboard.design/guides/variants.md): Make a component swappable, add alternatives as *.variant.tsx files, switch between them on the live screen and screenshot each one.
- [Agents](https://docs.stageboard.design/guides/agents.md): Choose which agent stageboard sends requests to, configure it, and see what every request contains.
- [Next.js](https://docs.stageboard.design/guides/nextjs.md): Render a Next.js app's components and pages in stageboard with the nextPreset Vite config.
- [Devtools in your app](https://docs.stageboard.design/guides/devtools.md): Add the stageboard inspector to your running app so you can pick any element and send a change request from there.

## Reference
- [CLI](https://docs.stageboard.design/reference/cli.md): Every stageboard command and option, with a usage line and an example for each.
- [MCP server](https://docs.stageboard.design/reference/mcp.md): Run the stageboard MCP server, connect it to an agent, and use its tools to list, screenshot and compare stories, variants and flows.
- [API reference](https://docs.stageboard.design/reference/react.md): The public exports of stageboard, stageboard/react, stageboard/next and stageboard/node, with signatures and what each is for.
- [Docs for agents](https://docs.stageboard.design/reference/llms.md): Point an agent at the plain-text versions of these docs, or install the stageboard skill in your repo.