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-init
Use when adding Storybook to a project that does not have Storybook configured yet.
Claude Code
$ npx -y skills add storybookjs/storybook --skill storybook-init --agent claude-code
Codex
$ npx skills add storybookjs/storybook --skill storybook-init -a codex -y
Cursor
$ npx skills add storybookjs/storybook --skill storybook-init -a cursor -y
Gemini CLI
$ npx skills add storybookjs/storybook --skill storybook-init -a gemini-cli -y
GitHub Copilot
$ npx skills add storybookjs/storybook --skill storybook-init -a github-copilot -y
OpenCode
$ npx skills add storybookjs/storybook --skill storybook-init -a opencode -y
Windsurf
$ npx skills add storybookjs/storybook --skill storybook-init -a windsurf -y
SKILL.md
storybook-init.SKILL.mdname: storybook-init description: Use when adding Storybook to a project that has no `storybook` dependency yet.
If Storybook is already installed (a `storybook` dependency in `package.json`, or a `.storybook/` directory), do not install it again: switch to `/storybook-setup`.
1. First check the latest stable release with `npm view create-storybook version`. If it is below 11.0, run `npm create storybook@next` inside your project's root directory to get the 11.0 prerelease; otherwise run `npm create storybook@latest`. Add no flags such as `--skip-install`: it detects that an agent runs it, installs the dependencies and asks no questions. Keep the files it adds, such as the Storybook agent skills and `skills-lock.json`. Use the matching package-manager command with the same tag when appropriate, such as `pnpm create storybook@next`. 2. Invoke the `/storybook-setup` skill to help the user set up project-specific Storybook configuration, such as the `.storybook/preview.ts` file.
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-setup
Use this skill when Storybook is already installed and the user wants a working `preview` file and stories for real components.
@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-init.
- Which coding agents can use storybook-init?
- storybook-init 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.