stories

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

前提条件:

项目中必须已安装Storybook。若用户明确调用此技能并同意安装Storybook，可调用
```
/storybook-init
```
技能来设置Storybook。
Storybook版本至少为10.5（若10.5尚未发布，则使用
```
next
```
版本）。若用户明确同意升级Storybook，可调用
```
/storybook-upgrade
```
技能进行升级。
确保已安装
```
@storybook/addon-mcp
```
。若未安装，使用
```
npx storybook add @storybook/addon-mcp
```
命令进行安装。

请在Storybook所在的包目录（在单体仓库中通常是

packages/ui

这类叶子包）中运行Storybook开发服务器以及所有

storybook ai

命令。

运行

STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai --help

并完整阅读输出内容，以获取处理UI变更、编写stories以及保持stories与所有创建、修改或删除的前端组件同步的强制性有序工作流。此工作流会说明如何编写stories、预览stories以及展示经过筛选的Storybook评审内容。

在会话中首次调用任何

storybook ai

命令之前，请运行

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

并完整阅读帮助信息。顶层帮助仅列出命令，每个命令的负载格式和使用规则（何时需要包含哪些字段）都在其各自的帮助输出中。切勿根据命令名称猜测

--json

负载内容——验证错误仅会报告缺失的必填字段，不会告知工作流期望你提供的可选字段。

部分命令需要运行中的Storybook开发服务器。当Claude预览工具可用时，通过该工具启动开发服务器：

确保
```
.claude/launch.json
```
文件中有Storybook启动项（
```
preview_start
```
工具文档说明了文件格式），且设置了
```
autoPort: true
```
和
```
port: 6006
```
。尽可能使用项目首选的包管理器和现有的
```
package.json
```
中的Storybook脚本，而非创建新命令。
使用
```
preview_start
```
工具启动Storybook启动项。