Agent skill · software engineering · yonatangross
storybook-mcp-integration
Reference for the Storybook MCP server (@storybook/addon-mcp): its tools, toolsets and availability. Use when calling those tools on existing components. To build a component from a mockup, use design-to-code.
Why this skill is useful
Adds specific commands and integration patterns for using Storybook MCP tools that the AI wouldn't reliably generate on its own.
What it needs
Requires @storybook/addon-mcp, storybook installed locally. About 3k tokens when loaded. Last updated 2026-08-06. 215 stars on the source repository.
What this skill does
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 Detection Pattern Before using Storybook MCP tools, check availability: Rule Details Load rules on demand with Read("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-architec …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills yonatangross/storybook-mcp-integration