# Storybook Preview and Stories

Writes a working preview file and stories for real components in an existing Storybook.

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

## Install

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

## Description

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

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

Prerequisites:

1. Confirm Storybook exists (`package.json`, `.storybook/`). If not, switch to `/storybook-init`.
2. Storybook must be 11.0 or later. An 11.0 prerelease (`11.0.0-alpha.x`) or a canary build (`0.0.0-pr-*`) also counts. If it is older, or upgrade/repair is needed first, switch to `/storybook-upgrade` and come back here afterwards. Treat a request to set up or install Storybook as approval to perform any required Storybook upgrade. For other requests, switch only after the user explicitly approves an upgrade.

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

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