Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From storybook
Guides 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.
npx claudepluginhub storybookjs/mcp --plugin storybookHow this skill is triggered — by the user, by Claude, or both
Slash command
/storybook:storiesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
The Storybook MCP is the source of truth for _how_ to write stories. This skill
Generates CSF3 Storybook stories for React/Vue components with variant coverage and state matrices. Use when creating stories or scanning for missing ones.
Configures Storybook preview files and writes co-located example stories from real components in an existing React+Vite Storybook project.
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.
Share bugs, ideas, or general feedback.
The Storybook MCP is the source of truth for how to write stories. This skill is the mandatory, ordered process for working on them.
This is a STRICT, GATED workflow. You MUST execute the steps below in order and
satisfy each step's Gate before moving to the next. Do NOT skip, reorder, or
batch steps. Do NOT write or edit any *.stories.* file until Steps 1 and 2 are
complete. If a gate cannot be satisfied, STOP and report to the user instead of
working around it. Treat any shortcut as a failure of this workflow.
get-storybook-story-instructions output is the only acceptable source for
imports, structure, and conventions.npm run storybook, not storybook dev, not run_in_background, not a
detached process. A backgrounded dev server is not a verifiable preview and
does NOT satisfy this workflow.Call get-storybook-story-instructions and read it fully. Look components up with list-all-documentation / get-documentation rather than assuming props or APIs.
Gate: Do NOT create or edit any *.stories.* file until this tool has
returned and you are following its output. If you have not called it this task,
you are not allowed to write a story yet — go back and call it now.
The Storybook preview MUST be running so the story can be verified.
If any MCP tool returns a "Storybook is not running" error, you MUST NOT ignore it and MUST NOT proceed to write the story. STOP and recover — without asking the user:
.claude/launch.json for a launch entry that starts this project's
Storybook dev server..claude/launch.json Storybook entry..claude/launch.json entry through the
Claude launcher (never via Bash/background, per the Absolute rules).Gate: Do NOT proceed to Step 3 until an MCP tool call succeeds against a running Storybook. If launch setup reports an error, surface it to the user and STOP.
Create or edit the story strictly following the Step 1 instructions.
Gate: Every story you touched must conform to the
get-storybook-story-instructions output. If anything is unclear, re-read it
rather than guessing.
After changes, call preview-stories and include the relevant preview links in your final user-facing response.
Gate: Do NOT claim the task is complete until preview links exist for the stories you created or changed.