Skip to content
Development
Skill

/storybook-setup

Use this skill when Storybook is already installed and the user wants a working `preview` file and stories for real components.

From plugin
storybook
91k20 skills1 MCP
Install
$ npx -y skills add storybookjs/storybook --skill storybook-setup --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/storybook-setup

Context preview

The summary Claude sees to decide when to auto-load this skill.

Use this skill when Storybook is already installed and the user wants a working `preview` file and stories for real components.

SKILL.md

storybook-setup.SKILL.md
name: storybook-setup
description: Use this skill when Storybook is already installed and the user wants a working `preview` file and stories for real components.

Prerequisites:

1. Confirm Storybook exists (`package.json`, `.storybook/`). If not, switch to `/storybook-init`. 2. Storybook must be at least 10.5 (or `next` while 10.5 is not yet released). If it is older, or upgrade/repair is needed first, switch to `/storybook-upgrade`.

Run `npx storybook ai setup` from the project root (or the Storybook package in a monorepo).

**Follow the printed Markdown precisely.** Do not substitute your own plan.

Ships withstorybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation

Get the whole plugin
Stats
90,800
Stars
10,379
Forks
Active
Maintenance
TypeScript
Language
MIT
License
7h ago
Last commit
10y ago
Created

Repo: storybookjs/storybook