Skip to main content
skill CX Codex

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.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add pedronauck/skills --skill storybook-stories -a claude-code
Open on GitHub

What 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 Button next to the existing ones, same decorators
  • Refactor the UserCard story to StoryObj<typeof meta> and drop the empty args
  • Fix the CheckoutForm story and run the Storybook build check

How to install storybook-stories

1Skills CLI (Vercel)

npx skills add pedronauck/skills --skill storybook-stories -a claude-code

2Manually: put the files in place

~/.claude/skills/storybook-stories/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/storybook-stories/

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.

Similar skills

Everything for Frontend and UI →

From the same set18

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor