stories

Original：🇺🇸 English

Translated

Invoke FIRST, before creating, editing, or deleting components, stories, styles, CSS, themes, colors, or design tokens — anything that changes how the UI looks, no exceptions. Also for starting or previewing Storybook to verify UI, requests to show, browse, or list components, stories, or UI states, and docs, props, or usage lookups.

3installs

Sourcestorybookjs/mcp

Added on2026-08-27

NPX Install

npx skill4agent add storybookjs/mcp stories

SKILL.md Content

View Translation Comparison →

Prerequisites:

Storybook must be installed in the project. Invoke the
```
/storybook-init
```
skill to set up Storybook, but only if the user explicitly invoked this skill and approves a Storybook installation.
Storybook must be at least 10.5 (or
```
next
```
while 10.5 is not yet released). Invoke the
```
/storybook-upgrade
```
skill to upgrade it, but only if the user explicitly approved a Storybook upgrade.

Ensure

@storybook/addon-mcp

is installed. If it is missing, install it with

npx storybook add @storybook/addon-mcp

.

Run the Storybook dev server and every

storybook ai

command from the same working directory: the package where Storybook is installed (in a monorepo often a leaf package such as

packages/ui

).

Run

STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai --help

and read the output in its entirety to get the mandatory, ordered workflow for working on UI changes, writing stories, and keeping stories in sync with every frontend component you create, modify, or delete. This workflow explains how to write stories, preview stories, and display a curated Storybook review.

Before invoking any

storybook ai

command for the first time in a session, run

STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai <command> --help

and read it fully. The top-level help only lists the commands; each command's payload shape and usage rules (which fields to include when) live in its own help output. Never guess a

--json

payload from the command name — a validation error only reports missing required fields, not the optional fields the workflow expects you to provide.

Some commands require a running Storybook dev server. When Claude preview tooling is available, start the dev server through that tooling:

Ensure there is a Storybook launch entry in
```
.claude/launch.json
```
(the
```
preview_start
```
tool description documents the file format) with
```
autoPort: true
```
and
```
port: 6006
```
. Use the project's preferred package manager and existing
```
package.json
```
Storybook script instead of inventing a new command whenever possible.
Start the Storybook launch entry with the
```
preview_start
```
tool.

stories

NPX Install

Tags

SKILL.md Content