跳到正文
cccskills
免费在 GitHub 公开

stories

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.

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(1)

  • SKILL.md2.4 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Prerequisites:

  1. 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.
  2. 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.
  3. 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:

  1. 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.
  2. Start the Storybook launch entry with the preview_start tool.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

init

免费

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

中文简介正在准备中。当前显示原文说明。

storybookjs/mcp2702026年9月7日 更新

setup

免费

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

中文简介正在准备中。当前显示原文说明。

storybookjs/mcp2702026年9月7日 更新

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

中文简介正在准备中。当前显示原文说明。

storybookjs/mcp2702026年9月7日 更新

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

中文简介正在准备中。当前显示原文说明。

storybookjs/mcp2702026年9月7日 更新

Use this skill when Storybook exists but needs an upgrade.

中文简介正在准备中。当前显示原文说明。

storybookjs/mcp2702026年9月7日 更新

upgrade

免费

Use this skill when Storybook exists but needs an upgrade.

中文简介正在准备中。当前显示原文说明。

storybookjs/mcp2702026年9月7日 更新

查看 storybookjs 的全部技能

报告此技能的问题