storybook

Storybook

Storybook 10 に関わる作業（または Storybook 10 へのアップグレード）では、このスキルを使用します。対象には、ストーリー、CSF、設定、ドキュメント、インタラクション／a11y／ビジュアルテスト、Vitest アドオン、ポータブルストーリー、フレームワークパッケージ、エージェント／MCP ツール、8.x／9.x からの移行が含まれます。

ワークフロー

1. コードを変更する前に、ローカルの Storybook の構成を確認します。
   • storybook、フレームワークパッケージ（例：@storybook/react-vite、@storybook/nextjs-vite）、@storybook/addon-docs、@storybook/addon-a11y、@storybook/addon-vitest、Node、Vite／Vitest、React／Vue／Svelte のピア依存関係のパッケージバージョン。
   • 設定：.storybook/main.ts|js（ESM が必須）、preview.ts|tsx、任意の manager.ts、vitest.setup.ts、ストーリーの glob、staticDirs。
   • ストーリーのスタイル：CSF3 の Meta／StoryObj、実験的な CSF Next（definePreview／preview.meta／meta.story）、MDX ドキュメント、タグ。
   • テストの経路：Vitest アドオン、旧式の test-runner、ポータブルな composeStories、Chromatic／ビジュアルテスト、a11y。
2. バージョンが不明な場合、またはアップグレード、ESM、CSF Next、Vitest のブラウザーモードに関わる作業では、最新のドキュメントを確認します。source-map.md から始めてください。
3. インストール、フレームワーク、main／preview、コア機能とアドオン、CLI については、setup-core.md を使用します。
4. CSF3／CSF Next、args、render、decorators、parameters、tags、docs については、writing-stories.md を使用します。
5. play、storybook/test、Vitest アドオン、ポータブルストーリー、a11y については、testing.md を使用します。
6. ビルド、CI、doctor／upgrade、8→9→10 のパッケージ移行、AI／MCP ツール、よくある失敗については、production-migration.md を使用します。

実装上の判断

• リポジトリで意図的にバージョンを固定している場合を除き、Storybook 10 を対象にします。孤立したレンダラー専用パッケージではなく、型やインポートにはフレームワークパッケージ（@storybook/react-vite）を優先します。
• デフォルトでは CSF3（satisfies Meta、StoryObj）を記述します。CSF Next はオプトインが必要な実験的機能として扱い、承認なしに安定した CSF3 コードベースを書き換えないでください。
• テストユーティリティは storybook/test からインポートします（manager／preview API は storybook/manager-api／storybook/preview-api からインポートします）。@storybook/test、@storybook/addon-interactions、@storybook/addon-essentials を再導入しないでください。
• Controls、actions、viewport、interactions は core に含まれます。これらの機能が必要な場合は、@storybook/addon-docs、@storybook/addon-a11y、@storybook/addon-vitest をインストールします。
• Vite を使う React／Vue／Svelte プロジェクトでは、@storybook/test-runner よりも @storybook/addon-vitest を優先します。Next.js で Vitest アドオンを使用するには、@storybook/nextjs-vite が必要です。
• ストーリーはコンポーネントと同じ場所に配置します。ストーリー内の React state よりも args と Controls を優先し、インタラクションやアサーションには play を使用します。
• タグは目的を持って使用します（autodocs、!autodocs、!test、カスタムフィルター）。meta の title／component は静的に解析可能でなければなりません。
• AI ツール（@storybook/addon-mcp、storybook skills／storybook tools）は 10.6 ではプレビューのみです。依頼があった場合にのみ追加してください。docs ツールセットでは features.componentsManifest: true が必要です。
• Storybook 11 は alpha（next）です。リポジトリでオプトインしていない限り、10.x を使用してください。
• .storybook/main.* は有効な ESM でなければなりません（require／__dirname は使用不可）。パスの計算には import.meta.url を使用します。

検証

リポジトリに既存のチェックがあれば、それを優先します。Storybook に重要な変更を加える場合は、関連する項目を実施します。

• bun run storybook（またはプロジェクトのスクリプト）でスモークテストを行い、ストーリーがコンパイルされてレンダリングされることを確認します。
• main 設定、フレームワーク、Vite エイリアス、ESM の境界を変更した場合は、bunx storybook build を実行します。
• アップグレード後、または @storybook/* のバージョン不一致がある場合は、bunx storybook doctor を実行します。
• play／a11y／カバレッジを変更した場合は、対象を絞った Vitest ストーリープロジェクト（vitest --project=storybook）または UI テスト用ウィジェットを使用します。
• Meta／StoryObj、フレームワークのインポート、storybook/test の使用について型チェックを行います。
• リポジトリに該当するパイプラインがある場合は、ビジュアル／Chromatic または a11y のスモークテストを行います。