ReddRadar
Agent skill
storybook-mcp-integration
Storybook MCP server integration for component-aware AI development. Covers 6 tools across 3 toolsets (dev, docs, testing): component discovery via list-all-documentation/get-documentation, story previews via preview-stories, and automated testing via run-story-tests. Use when generating components that should reuse existing Storybook components, running component tests via MCP, or previewing stories in chat.
Install this agent skill to your Project
npx add-skill https://github.com/yonatangross/orchestkit/tree/main/src/skills/storybook-mcp-integration
Metadata
Additional technical details for this skill
- category
- document-asset-creation
- mcp server
- storybook-mcp
SKILL.md
Storybook MCP Integration
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.
When to Use
- Component generation — check existing Storybook components before creating new ones
- Component testing — run story tests + a11y audits via MCP instead of CLI
- Visual verification — embed story previews in chat for user confirmation
- Component auditing — inventory components with full metadata via MCP
Quick Reference — 6 Tools, 3 Toolsets
| 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) |
Prerequisites
# 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
Detection Pattern
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
Rule Details
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 |
Toolset Selection
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 |
Chromatic Remote Publishing
For teams using Chromatic, the docs toolset is publishable remotely:
- Published at
https://<chromatic-storybook-url>/mcp - Only docs toolset available remotely (dev + testing need local Storybook)
- Useful for cross-team design system discovery without running Storybook locally
Graceful Degradation
| 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 |
Related Skills
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 patterns
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
yonatangross/orchestkit
expect
Diff-aware AI browser testing — analyzes git changes, generates targeted test plans, and executes them via agent-browser. Reads git diff to determine what changed, maps changes to affected pages via route map, generates a test plan scoped to the diff, and runs it with pass/fail reporting. Use when testing UI changes, verifying PRs before merge, running regression checks on changed components, or validating that recent code changes don't break the user-facing experience.
yonatangross/orchestkit
github-operations
GitHub CLI operations for issues, PRs, milestones, and Projects v2. Covers gh commands, REST API patterns, and automation scripts. Use when managing GitHub issues, PRs, milestones, or Projects with gh.
yonatangross/orchestkit
chain-patterns
Chain patterns for CC 2.1.71 pipelines — MCP detection, handoff files, checkpoint-resume, worktree agents, CronCreate monitoring. Use when building multi-phase pipeline skills. Loaded via skills: field by pipeline skills (fix-issue, implement, brainstorm, verify). Not user-invocable.
yonatangross/orchestkit
component-search
Search 21st.dev component registry for production-ready React components. Finds components by natural language description, filters by framework and style system, returns ranked results with install instructions. Use when looking for UI components, finding alternatives to existing components, or sourcing design system building blocks.
yonatangross/orchestkit
ai-ui-generation
AI-assisted UI generation patterns for json-render, v0, Bolt, and Cursor workflows. Covers prompt engineering for component generation, review checklists for AI-generated code, design token injection, refactoring for design system conformance, and CI gates for quality assurance. Use when generating UI components with AI tools, rendering multi-surface MCP visual output, reviewing AI-generated code, or integrating AI output into design systems.
yonatangross/orchestkit
presentation-builder
Creates zero-dependency, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web slides, or create a slide deck for a talk, pitch, or tutorial. Generates single self-contained HTML files with inline CSS/JS.
Didn't find tool you were looking for?