Skill

storybook-init

Initializes Storybook in a project using the official CLI, adds the MCP addon, and configures Claude launch integration.

Storybook

frontend

developer-tools

npx claudepluginhub storybookjs/mcp --plugin storybook

Popularity

Parent stars

248

Parent forks

Invocation

How this skill is triggered — by the user, by Claude, or both

Slash command

/storybook:storybook-init

User invocable

Model invocable

Inline context

Default effort

Context Preview

The summary Claude sees in its skill listing — used to decide when to auto-load this skill

Use this skill when a project does not already have Storybook configured.

SKILL.md

37 lines · ~353 tokens

Similar Skills

storybook-setup-claude-launch

248

Sets up or repairs .claude/launch.json so Claude can start the project's Storybook dev server via the launcher, with autoPort, --ci, and --port flags.

storybook

storybook-mcp-integration

172

Integrates Storybook MCP server to discover components via docs manifest, preview stories with embeddable URLs, and run tests/a11y audits. Use for reusing existing components, visual verification, and MCP-based testing in React/Storybook projects.

5 files5 tools

ork

init

Interactive setup wizard scaffolds claudekit rules, hooks, and MCP servers into .claude/ directory. Invoke /claudekit:init for new project setup or reconfiguration.

7 files

claudekit

Stats

LanguageTypeScript

Parent stars248

Parent forks34

MaintenanceExcellent

Last CommitJun 2, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

Stats

Actions

Help us improve

Share bugs, ideas, or general feedback.

Storybook Init

Use this skill when a project does not already have Storybook configured.

Workflow

Inspect the project to understand its framework, package manager, and workspace layout. Prefer the package manager already used by the repo.

Run Storybook's official initializer from the project root:

npm create storybook@latest

Use the matching package-manager command when appropriate, such as pnpm create storybook@latest or yarn create storybook.

Prefer the recommended setup unless the user asks for a minimal setup.

If auto-detection fails, rerun the initializer with the closest explicit --type value.

Add the MCP addon:

npx storybook add @storybook/addon-mcp

Use /storybook-setup-claude-launch to configure .claude/launch.json and start Storybook through that launch entry.

Note the Storybook invocation directory (where storybook dev runs) as cwd when using Storybook MCP proxy tools.

Guardrails

Do not hand-write a full Storybook config when the official initializer can do it.

Preserve existing app source and package manager choices.

Do not start Storybook as an ad hoc Bash command or background task in Claude; use the Claude launcher entry.

Storybook Init

Use this skill when a project does not already have Storybook configured.

Workflow

Inspect the project to understand its framework, package manager, and workspace layout. Prefer the package manager already used by the repo.
Run Storybook's official initializer from the project root:

npm create storybook@latest

Use the matching package-manager command when appropriate, such as pnpm create storybook@latest or yarn create storybook.

Prefer the recommended setup unless the user asks for a minimal setup.
If auto-detection fails, rerun the initializer with the closest explicit --type value.
Add the MCP addon:

npx storybook add @storybook/addon-mcp

Use /storybook-setup-claude-launch to configure .claude/launch.json and start Storybook through that launch entry.
Note the Storybook invocation directory (where storybook dev runs) as cwd when using Storybook MCP proxy tools.

Guardrails

Do not hand-write a full Storybook config when the official initializer can do it.
Preserve existing app source and package manager choices.
Do not start Storybook as an ad hoc Bash command or background task in Claude; use the Claude launcher entry.

storybook-init

Popularity

Invocation

Context Preview

SKILL.md

Similar Skills

Help us improve

Help us improve

Find plugins for your project

storybook-init

Popularity

Invocation

Context Preview

SKILL.md

Storybook Init

Workflow

Guardrails

Similar Skills

Help us improve

Storybook Init

Workflow

Guardrails