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 before running story tests, answering a question about a component's props, API, or usage, starting Storybook, or showing or listing components, stories, or UI states.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Prerequisites:
/storybook-init skill to set up Storybook, but only if the user explicitly invoked this skill and approves a Storybook installation.11.0.0-alpha.x) or a canary build (0.0.0-pr-*) also counts. Treat a request to set up or install Storybook as approval to perform any required Storybook upgrade. For other requests, invoke the /storybook-upgrade skill only after the user explicitly approves an upgrade.Run the Storybook dev server and every Storybook CLI command from the same working directory: the package where Storybook is installed (in a monorepo often a leaf package such as packages/ui).
If the sandbox blocks network access or ports, request escalated permissions for Storybook CLI commands; otherwise the dev server can fail in confusing ways (for example, it finds no free port to bind to).
For docs, props, or usage questions, use npx storybook tools docs list followed by npx storybook tools docs show --id <id> before inspecting source files. Fall back to source inspection only when the documentation commands are unavailable or return no relevant documentation.
Run npx storybook skills stories 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.
Some commands require a running Storybook dev server:
http://localhost:6006) instead of starting a second one. Otherwise start one in the background, using the project's preferred package manager and existing package.json Storybook script (e.g. npm run storybook) instead of inventing a new command whenever possible. Wait until the URL responds before running commands that need it.まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Finds or publishes a pkg.pr.new canary release for a Storybook branch. Use when the user wants the canary package specifier for a branch or needs to trigger the canary workflow manually.
日本語の概要は準備中です。原文の説明を表示しています。
Review, improve, rewrite, author, or plan Storybook documentation in /docs. Use this when asked to review docs, improve a page, rewrite documentation, draft new docs, or advise on docs strategy.
日本語の概要は準備中です。原文の説明を表示しています。
Checks out a PR (including fork PRs), fixes all linting and TypeScript errors, then pushes the changes back. Use when asked to fix lint, types, or TS errors on a PR.
日本語の概要は準備中です。原文の説明を表示しています。
Label GitHub issues and PRs found during QA testing. Use when organizing QA findings with proper labels.
日本語の概要は準備中です。原文の説明を表示しています。
Triage and resolve GitHub PR review comments one by one, interactively. Use when the user asks to handle, address, respond to, or resolve PR review comments, or mentions reviewer feedback on a pull request.
日本語の概要は準備中です。原文の説明を表示しています。
Use when adding Storybook to a project that does not have Storybook configured yet.
日本語の概要は準備中です。原文の説明を表示しています。