From ork
Integrates Storybook MCP server to discover components via docs manifest, preview stories with embeddable URLs, and run tests/a11y audits. Use for reusing existing components, visual verification, and MCP-based testing in React/Storybook projects.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ork:storybook-mcp-integrationThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use the Storybook MCP server (`@storybook/addon-mcp`) to give agents awareness of a project's actual component library — props, stories, tests, and live previews.
Use the Storybook MCP server (@storybook/addon-mcp) to give agents awareness of a project's actual component library — props, stories, tests, and live previews.
| Toolset | Tool | Purpose | Key Inputs |
|---|---|---|---|
| dev | get-storybook-story-instructions | Guidance on writing stories + interaction tests | none |
| dev | preview-stories | Returns preview URLs for stories (embeddable) | stories[]: {storyId} or {absoluteStoryPath, exportName} |
| docs | list-all-documentation | Full component + docs manifest index | none |
| docs | get-documentation | Props, first 3 stories, story index, docs | id (required), storybookId (optional) |
| docs | get-documentation-for-story | Full story source + component docs | componentId, storyName (required) |
| testing | run-story-tests | Run component + a11y tests, pass/fail + violations | stories[] (optional), a11y boolean (default true) |
# Storybook 10.3+ with Vite builder (no webpack)
npx storybook@latest upgrade
# Install the addon
npx storybook add @storybook/addon-mcp
# Enable docs toolset (required for component discovery)
# In .storybook/main.ts:
# experimentalComponentsManifest: true
# Enable testing toolset (requires addon-vitest)
# npx storybook add @storybook/addon-vitest
# Register with Claude Code
npx mcp-add --type http --url "http://localhost:6006/mcp" --scope project
Before using Storybook MCP tools, check availability:
# Probe for storybook-mcp tools
ToolSearch(query="+storybook list-all-documentation")
# If tools found → Storybook MCP is available
# If not found → fallback to filesystem-based component discovery
Load rules on demand with Read("${CLAUDE_SKILL_DIR}/rules/<file>"):
| Rule | Impact | Description |
|---|---|---|
component-discovery | HIGH | Use list-all-documentation + get-documentation before generating new components |
story-preview-verification | HIGH | Embed preview-stories URLs for visual confirmation |
mcp-test-runner | CRITICAL | Run run-story-tests with a11y:true after component generation |
Filter toolsets via X-MCP-Toolsets header to reduce agent context:
| Agent Role | Toolsets | Rationale |
|---|---|---|
| component-curator | docs | Inventory + props only, no testing |
| frontend-ui-developer | dev,docs,testing | Full access for gen → verify loop |
| design-system-architect | docs | Component metadata for governance |
For teams using Chromatic, the docs toolset is publishable remotely:
https://<chromatic-storybook-url>/mcp| Storybook MCP | Fallback | Behavior |
|---|---|---|
| Available | — | Use MCP tools for component discovery, testing, previews |
| Unavailable | Filesystem | Glob("**/components/**/*.tsx") + Grep for component inventory |
| Unavailable | 21st.dev | Search public registry via 21st-dev-magic MCP |
| Unavailable | Manual | Claude multimodal analysis of screenshots |
storybook-testing — CSF3 patterns, Vitest integration, Chromatic TurboSnapcomponent-search — 21st.dev registry search (external components)design-to-code — Full mockup-to-component pipeline (uses this skill in Stage 2)ui-components — shadcn/ui + Radix component patternsnpx claudepluginhub yonatangross/orchestkit --plugin orkGuides writing, updating, and reviewing Storybook stories with a strict workflow. Pulls story-writing rules from the MCP, ensures a running preview, and prevents unverified stories.
Creates and reviews Storybook component documentation with stories, MDX, decorators, interaction tests, and visual baselines. Useful for setting up design system presentations or isolated component state previews.
Provides Storybook 10 testing patterns with Vitest integration, CSF3 typesafe factories, play() interactions, Chromatic TurboSnap visual regression, module automocking, a11y tests, and autodocs. Use for component stories, visual testing, CI pipelines, or Storybook 9 migration.