stories

前提条件：

1. プロジェクトに Storybook がインストールされている必要があります。Storybook をセットアップするには、ユーザーがこのスキルを明示的に呼び出し、Storybook のインストールを承認した場合に限り、/storybook-init スキルを実行してください。
2. Storybook は 10.6 以降である必要があります。（10.6 がリリースされるまでは、next で条件を満たします — 10.6.0-alpha.x です。canary ビルドや 0.0.0-pr-* もすべて対象です。）Storybook のセットアップまたはインストールの依頼は、必要な Storybook のアップグレードを実施する承認として扱ってください。それ以外の依頼では、ユーザーがアップグレードを明示的に承認した場合に限り、/storybook-upgrade スキルを実行してください。
3. @storybook/addon-mcp がインストールされていることを確認してください。インストールされていない場合は、npx storybook add @storybook/addon-mcp を実行してインストールしてください。

Storybook の開発サーバーとすべての Storybook CLI コマンドは、同じ作業ディレクトリから実行してください。作業ディレクトリは Storybook がインストールされているパッケージのディレクトリです（モノレポでは、packages/ui などのリーフパッケージであることがよくあります）。

ドキュメント、プロパティ、または使い方についての質問では、ソースファイルを調べる前に npx storybook tools docs list に続けて npx storybook tools docs show を実行してください。ドキュメントコマンドを利用できない場合、または関連するドキュメントが見つからない場合に限り、ソースを調べてください。

npx storybook skills stories を実行し、出力をすべて読んで、UI の変更、ストーリーの作成、作成・変更・削除するすべてのフロントエンドコンポーネントとストーリーの同期を保つための必須の順序付きワークフローを確認してください。このワークフローでは、ストーリーの作成方法、プレビュー方法、厳選された Storybook レビューの表示方法が説明されています。

セッションで初めて npx storybook tools コマンドを実行する前に、末尾に --help を付けて実行し、出力をすべて読んでください。ワークフローで示されているのはコマンド名だけです。各コマンドの引数の形式と使用ルール（どのフィールドをいつ含めるか）は、それぞれのヘルプ出力に記載されています。コマンド名から引数を推測してはいけません。検証エラーでは必須フィールドの不足しか報告されず、ワークフローで指定されている任意フィールドは報告されないためです。

一部のコマンドでは、Storybook の開発サーバーが起動している必要があります。Claude のプレビュー機能を利用できる場合は、次の手順で開発サーバーを起動してください。

1. .claude/launch.json に Storybook の起動エントリがあることを確認してください（ファイル形式は preview_start ツールの説明に記載されています）。エントリには autoPort: true と port: 6006 を指定してください。新しいコマンドを作成するのではなく、可能な限りプロジェクトで推奨されているパッケージマネージャーと既存の package.json の Storybook スクリプトを使用してください。
2. preview_start ツールを使って、Storybook の起動エントリを開始してください。