# Add Storybook to Project

Sets up Storybook in a project that does not have it configured yet.

- Repository: https://github.com/storybookjs/storybook (91421 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-30
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add storybookjs/storybook --skill storybook-init -g -a claude-code -y`
Codex: `npx skills add storybookjs/storybook --skill storybook-init -g -a codex -y`
Cursor: `npx skills add storybookjs/storybook --skill storybook-init -g -a cursor -y`
Gemini CLI: `npx skills add storybookjs/storybook --skill storybook-init -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add storybookjs/storybook`

## Description

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

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

If Storybook is already installed (a `storybook` dependency in `package.json`, or a `.storybook/` directory), do not install it again: switch to `/storybook-setup`.

1. First check the latest stable release with `npm view create-storybook version`. If it is below 11.0, run `npm create storybook@next` inside your project's root directory to get the 11.0 alpha; otherwise run `npm create storybook@latest`. Use the matching package-manager command with the same tag when appropriate, such as `pnpm create storybook@next`.
2. Invoke the `/storybook-setup` skill to help the user set up project-specific Storybook configuration, such as the `.storybook/preview.ts` file.