/storybook-init

Use when adding Storybook to a project that does not have Storybook configured yet.

Guide Boost this skill

storybookjs@storybookjs

GitHub

From plugin

storybook

91k19 skills1 MCP

Install

$ npx -y skills add storybookjs/storybook --skill storybook-init --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.
You can call itInvoke it directly when you want it.
Slash command/storybook-init

Context preview

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

Use when adding Storybook to a project that does not have Storybook configured yet.

SKILL.md

storybook-init.SKILL.md

name: storybook-init
description: Use when adding Storybook to a project that does not have Storybook configured yet.

1. Run `npm create storybook@latest` inside your project's root directory to install the latest version of Storybook (while 10.6 is unreleased, run `npm create storybook@next` instead — the other skills require at least 10.6). Use the matching package-manager command when appropriate, such as `pnpm create storybook@latest` or `yarn create storybook`. 2. After initialization succeeds, run `npx storybook add @storybook/addon-mcp`. 3. Invoke the `/storybook-setup` skill to help the user set up project-specific Storybook configuration, such as the `.storybook/preview.ts` file.

Read it on GitHub ↗

Ships withstorybook

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

Get the whole plugin

Stats

JavaScript React React Native Vue Svelte

+7 tags

Angular HTML CSS GraphQL GitHub Jest iOS

91,055

Stars

10,450

Forks