# storybook-stories

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.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 305 installs · ★ 643
- Author: Pedro Nauck
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/pedronauck/skills/tree/HEAD/skills/mine/storybook-stories/SKILL.md
- Updated: 2026-10-20
- HTML: https://affpapa.org/en/nevibecode/skills/storybook-stories

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add pedronauck/skills --skill storybook-stories -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/storybook-stories/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/storybook-stories/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add pedronauck/skills --skill storybook-stories -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/storybook-stories/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add pedronauck/skills --skill storybook-stories -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/storybook-stories/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install pedronauck/skills storybook-stories
```

2. **Manually: put the files in place**
- File: `.github/skills/storybook-stories/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add pedronauck/skills --skill storybook-stories -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/pedronauck/skills --path skills/mine/storybook-stories
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/storybook-stories/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add pedronauck/skills --skill storybook-stories -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/pedronauck/skills/tree/HEAD/skills/mine/storybook-stories/SKILL.md

## When to use it
- 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
- 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

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [pedronauck/skills](https://affpapa.org/en/nevibecode/by/pedronauck/skills.md) — 18 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md