storybook-init

Initializes Storybook in projects lacking an existing Storybook configuration.

6.3k|550|Updated Jan 18, 2017

Search Tags:#storybook #Frontend #component development #NPM #initialize #Setup #addon-mcp

One-click install

npx skills add https://github.com/sanity-io/sanity --skill storybook-init

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: storybook-init
Source: https://github.com/sanity-io/sanity/tree/main/.agents/skills/storybook-init
Command: npx skills add https://github.com/sanity-io/sanity --skill storybook-init

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @storybook/addon-mcp.

What problem does it solve?

Setting up Storybook from scratch involves running the right installer, adding companion addons, and wiring up project-specific configuration, which is easy to get wrong or skip steps on.

Core Features & Use Cases

Storybook Installation: Runs the official npm create storybook@latest initializer with support for pnpm and yarn equivalents.
MCP Addon Setup: Installs the @storybook/addon-mcp addon after initialization completes.
Configuration Handoff: Invokes the /storybook-setup skill to configure project-specific files like .storybook/preview.ts.
Use Case: You have a React component library with no Storybook. Use this Skill to scaffold Storybook, add the MCP addon, and get guided through preview configuration in one flow.

Quick Start

Add Storybook to my project, which does not have Storybook configured yet.

Frequently Asked Questions about storybook-init

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add Storybook to an existing project?▼

Run `npm create storybook@latest` in your project root to initialize Storybook. This Skill also supports the pnpm and yarn equivalents, then installs the @storybook/addon-mcp addon afterward.

How to install the Storybook MCP addon?▼

Run `npx storybook add @storybook/addon-mcp` after Storybook initialization completes. This Skill performs that step automatically once the initial setup succeeds.

Does Storybook setup work with pnpm or yarn?▼

Yes, the initialization step supports matching package-manager commands such as `pnpm create storybook@latest` or `yarn create storybook`. Use the command that matches your project's package manager.

When should I not use the storybook-init skill?▼

Do not use it on projects that already have Storybook configured, since it is designed only for fresh initialization. For existing setups, configure files like `.storybook/preview.ts` directly or use the storybook-setup skill.