component-docs
Look up the components of a project with Storybook, with their props and usage examples, to answer questions about them or to…
@storybookjsInstall SkillFrontend
Skill
/storybook-setup
Use this skill when Storybook is already installed and the user wants a working `preview` file and stories for real components.
Claude Code
$ npx -y skills add storybookjs/storybook --skill storybook-setup --agent claude-code
Codex
$ npx skills add storybookjs/storybook --skill storybook-setup -a codex -y
Cursor
$ npx skills add storybookjs/storybook --skill storybook-setup -a cursor -y
Gemini CLI
$ npx skills add storybookjs/storybook --skill storybook-setup -a gemini-cli -y
GitHub Copilot
$ npx skills add storybookjs/storybook --skill storybook-setup -a github-copilot -y
OpenCode
$ npx skills add storybookjs/storybook --skill storybook-setup -a opencode -y
Windsurf
$ npx skills add storybookjs/storybook --skill storybook-setup -a windsurf -y
SKILL.md
storybook-setup.SKILL.mdname: storybook-setup description: Use this skill when Storybook is already installed and the user wants it set up for the project, with a working `preview` file and stories for its real components. To write or update the stories of a component, use write-stories instead.
Prerequisites:
1. Storybook is installed when `package.json` lists a `storybook` dependency, of any version, or the project has a `.storybook/` directory (hidden: `ls -a` lists it, `rg --files` does not). Only when it has neither, switch to `/storybook-init`. 2. Storybook must be 11.0 or later. An 11.0 prerelease (`11.0.0-alpha.x`, `-beta.x` or `-rc.x`) or a canary build (`0.0.0-pr-*`) also counts. If it is older, or upgrade/repair is needed first, switch to `/storybook-upgrade` and come back here afterwards. Treat a request to set up or install Storybook as approval to perform any required Storybook upgrade. For other requests, switch only after the user explicitly approves an upgrade.
Run `npx storybook skills setup` from the project root (or the Storybook package in a monorepo).
Read its output in full, without `head` or `tail`: every step in it is required. **Follow the printed Markdown precisely.** Do not substitute your own plan.
Stats
91,525
Stars
10,510
Forks
Active
Maintenance
TypeScript
Language
MIT
License
Last commit
Created
Ships withstorybook
Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
91k8 skills1 MCP
Stars on GitHub
Momentum
- stars in total
- 91.4k
Other skills on storybook.
@storybookjsInstall Skillstorybook-init
Use when adding Storybook to a project that does not have Storybook configured yet.
@storybookjsInstall Skillstorybook-upgrade
Use this skill when Storybook exists but needs an upgrade.
@storybookjsInstall Skillui-workflow
Storybook's workflow for UI changes in a project with Storybook - look up the components to reuse, write and update stories, run…
@storybookjsInstall Skillinit
Use when adding Storybook to a project that does not have Storybook configured yet.
@storybookjsInstall Skillsetup
Use this skill when Storybook is already installed and the user wants a working `preview` file and stories for real components.
@storybookjsInstall SkillMore skills from other plugins.
Auto-invoked
migrate-radix-to-base
Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert…
@shadcn-uiInstall Skill
Auto-invoked
taste-skill
tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One…
@leonxlnxInstall SkillQuestions about storybook-setup.
- Which coding agents can use storybook-setup?
- storybook-setup installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.