component-docs
Look up the components of a project with Storybook, with their props and usage examples, to reuse existing components instead of…
@storybookjsInstall SkillFrontend
Skill
/write-stories
The rules for writing Storybook stories in a project. They cover which states get a story, the imports, play functions, and mocks for network requests and modules.
Claude Code
$ npx -y skills add storybookjs/storybook --skill write-stories --agent claude-code
Codex
$ npx skills add storybookjs/storybook --skill write-stories -a codex -y
Cursor
$ npx skills add storybookjs/storybook --skill write-stories -a cursor -y
Gemini CLI
$ npx skills add storybookjs/storybook --skill write-stories -a gemini-cli -y
GitHub Copilot
$ npx skills add storybookjs/storybook --skill write-stories -a github-copilot -y
OpenCode
$ npx skills add storybookjs/storybook --skill write-stories -a opencode -y
Windsurf
$ npx skills add storybookjs/storybook --skill write-stories -a windsurf -y
SKILL.md
write-stories.SKILL.mdname: write-stories description: The rules for writing Storybook stories in a project. They cover which states get a story, the imports, play functions, and mocks for network requests and modules.
Prerequisites:
1. Storybook must be installed in the project. Invoke the `/storybook-init` skill to set up Storybook, but only if the user explicitly invoked this skill and approves a Storybook installation. 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. Treat a request to set up or install Storybook as approval to perform any required Storybook upgrade. For other requests, invoke the `/storybook-upgrade` skill only after the user explicitly approves an upgrade.
Run every Storybook CLI command from the package where Storybook is installed (in a monorepo often a leaf package such as `packages/ui`).
If the sandbox blocks network access, request escalated permissions for Storybook CLI commands.
Run `npx storybook skills write-stories` in a command of its own, without `head` or `tail`, before you write a component or a story, and follow its output: the rules for the stories of this project, with its imports, `play` functions, and mocks.
Stats
91,576
Stars
10,520
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
92k10 skills1 MCP
Stars on GitHub
Momentum
- stars in total
- 91.6k
Other skills on storybook.
@storybookjsInstall Skillstorybook-init
Use when adding Storybook to a project that has no `storybook` dependency yet.
@storybookjsInstall Skillstorybook-setup
Use this skill when Storybook is already installed and the user wants it set up for the project, with a working `preview` file…
@storybookjsInstall Skillstorybook-upgrade
Use this skill when Storybook exists but needs an upgrade.
@storybookjsInstall Skilltest-stories
Run the Storybook story tests of a project, with their accessibility checks, and fix what fails.
@storybookjsInstall Skillui-review
Publish a Storybook review that shows the user the stories a UI change affects, or the components and stories they ask to see.
@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 write-stories.
- Which coding agents can use write-stories?
- write-stories 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.