storybook-stories — Claude Code skill: Storybook stories by convention
Writes and edits Storybook stories the way your repo already does it. Handy once a project has plenty of stories and the naming rules live only in people's heads.
npx skills add pedronauck/skills --skill storybook-stories -a claude-codeWhat storybook-stories does
The skill handles four jobs on stories: create, update, refactor, troubleshoot. It finds the nearest existing story and extends that one instead of starting fresh. First it works out which Storybook config owns the layer, since primitives and app or domain stories usually sit apart.
Providers get reused, not copied. Global decorators for QueryClient, the router and MSW stay where they are. Metadata is typed CSF with StoryObj<typeof meta>. Controlled props go through args; compound cases go through render, and a render-only story needs no empty args. Show the smallest set of states that explains real behavior — there is no required story count. The tags: ["autodocs"] policy comes from whoever owns that page, so you don't end up with duplicate pages.
Before composing examples the agent checks the shared primitive inventory and uses its public exports, while domain components stay local. references/patterns.md is read only for the composition pattern in play, and its examples are adaptable rather than a scaffold you must follow. Component implementation, token changes, browser E2E tests and other documentation fall outside the skill, so a request about those won't trigger it.
What it helps with
- add stories for an existing component in the style of its neighbours
- split primitive and domain stories across their own Storybook configs
- rewrite a story as typed CSF instead of a copied template
- drop duplicated provider decorators
- fix a broken story and run the build check
Example prompts for the agent
- Add stories for
Buttonnext to the existing ones, same decorators - Refactor the
UserCardstory toStoryObj<typeof meta>and drop the emptyargs - Fix the
CheckoutFormstory and run the Storybook build check
How to install storybook-stories
1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill storybook-stories -a claude-code2Manually: put the files in place
~/.claude/skills/storybook-stories/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/storybook-stories/
1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill storybook-stories -a codex2Manually: put the files in place
.agents/skills/storybook-stories/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill storybook-stories -a cursor2Manually: put the files in place
.cursor/skills/storybook-stories/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install pedronauck/skills storybook-stories2Manually: put the files in place
.github/skills/storybook-stories/SKILL.md1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill storybook-stories -a gemini-cli2Platform CLI
gemini skills install https://github.com/pedronauck/skills --path skills/mine/storybook-storiesManually: put the files in place
.devin/skills/storybook-stories/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add pedronauck/skills --skill storybook-stories -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about storybook-stories
How do I install storybook-stories in Claude Code?
Run npx skills add pedronauck/skills --skill storybook-stories -a claude-code. The skill lands at ~/.claude/skills/storybook-stories/SKILL.md.
What does storybook-stories do?
It creates, updates, refactors and troubleshoots Storybook stories using your project's conventions: shared decorators, typed CSF metadata, and the autodocs policy of the owning page.
What is out of scope for this skill?
Component implementation, token changes, browser E2E tests and other documentation.