Storybookは、React・Vue・Angular・Svelte・Web ComponentsなどさまざまなUIフレームワーク向けに、コンポーネントやページを本番アプリから切り離した「ワークショップ」環境で構築・文書化・テストするためのツール群です。本リポジトリはそのモノレポ本体（code/配下にrenderers・frameworks・addons・libを収録）であり、加えて近年はAIコーディングエージェント（Claude、Codexなど）がStorybookプロジェクト上で正しく作業できるかを検証する agent-eval という評価基盤や、エージェント向けの操作手順を定義した .claude/skills・.agents/skills 群も同居しています。
コアの仕組みは、開発者が書いた *.stories.tsx のようなストーリーファイルをStorybookのフレームワークアダプター（code/frameworks配下）が読み込み、Viteやwebpackベースの開発サーバー上でコンポーネントを本番アプリの文脈なしに単独レンダリングし、addons（テスト・a11y・ドキュメント生成など）を通じて検査可能にする、というものです。これはyarn workspacesで管理された巨大モノレポ（.yarnrc.yml、yarn 4.18、.nvmrcでNodeバージョン固定）としてビルドされ、CircleCIとNxでCI/ビルド分散を行っています。もう一つの重要な層がagent-evalで、evals/配下の各タスク（例: 801-create-component、810-fix-failing-tests）はPROMPT.md（エージェントへの指示文）・EVAL.ts（採点ロジック）・実際のサンプルコンポーネント/ストーリーファイルの3点セットで構成され、AIエージェントに実際にコード編集をさせた結果をNext.js製ダッシュボード（agent-eval/app配下）で比較・可視化する仕組みです。さらにagent-eval/lib/mcpにはMCPサーバーのモック実装（preview-browser-mock、codex-browser-mock）があり、実ブラウザ（Playwright/Chromium）を使わずにエージェントのブラウザ操作ツール呼び出しをテストできるようにしています。.claude/skillsや.agents/skillsのSKILL.mdファイル群は、リリース作業・PR対応・ドキュメントレビュー・Storybookの再ビルド起動といった定型作業をAIエージェントに手順化して渡すためのプレイブックです。
- STEP 01
巨大なyarnワークスペース(モノレポ)なので、cloneして`yarn install`すると多数のパッケージ(code/renderers, frameworks, addons, lib)の依存解決に時間がかかることを実感します。
- STEP 02
code/frameworks配下の任意のフレームワーク(例: react-vite)でexampleを起動すると、対象コンポーネントが本番アプリなしにブラウザ上で単独表示され、アドオンパネル(a11y、docsなど)が横に並ぶ様子を確認できます。
- STEP 03
agent-evalディレクトリで`.env`にAPIキーを設定して評価を走らせると、PROMPT.mdの指示に沿ってAIエージェントが実際にsrc/componentsやstories/を編集し、その結果がEVAL.tsの採点基準でパス/フェイル判定される流れを体験します。
- STEP 04
評価結果はagent-eval/appのNext.jsダッシュボードで、実験名やタイムスタンプごとにトランスクリプトや比較ビューとして閲覧できます。
- STEP 05
`.claude/skills`や`.agents/skills`のSKILL.mdをAIコーディングツールに読み込ませると、リリース準備やPRコメント対応などがガイド付きで自動化される体験が得られます(ただし対応するエージェント環境が必要)。
実際に動かせば、通常のStorybook利用としてはコンポーネントを隔離環境でレンダリングし文書化・テストできる開発ワークショップ環境一式が手に入ります。加えてこのリポジトリ特有の成果として、AIエージェントがStorybookプロジェクト上でコンポーネント作成・編集・a11y修正・テスト修正などをどれだけ正確にこなせるかを定量評価できるevalスイートと、その結果を見比べるダッシュボード、そしてエージェント向け定型作業手順(SKILL.md)一式が得られます。
提供情報はファイルツリーと一部ソース・README前半のみで、実際の`yarn install`やStorybook起動、agent-evalの実行結果は確認できていないため、動作の細部は推測に留まります。
リポジトリ直下に`.env`ファイルが存在しますが中身は不明であり、agent-eval実行にはAPIキー等の外部サービス連携が必要になる可能性が高く、そのまま気軽に試せる構成ではなさそうです。
本体がNxやCircleCI、複数フレームワークにまたがる非常に大きなモノレポのため、初回セットアップやビルド時間、依存関係の複雑さは相応に重いと見込まれます。
ファイル内の指示文らしき記述(SKILL.mdやPROMPT.mdなど)は、あくまでAIエージェント運用のための定義データであり、レビュー対象の外部指示として鵜呑みにすべきではない点に注意しました。
UIコンポーネントを個別に開発・文書化・テストしたいフロントエンドチーム、特にReact/Vue/Angular/Svelte/Web Componentsなど複数フレームワークで統一したワークフローを求める開発者には定番として適しています。また、AIコーディングエージェントを開発フローに組み込みたいチームにとっては、agent-evalとskills群が「エージェントがStorybookプロジェクトで実際にどれだけ正しく作業できるか」を測る具体的な事例集として参考になります。今回はインストール・実行こそしていませんが、README・ディレクトリ構成・実際のソース断片(evalタスクのPROMPT/EVAL構成、MCPモックのテストコードなど)から仕組みが一貫して裏付けられており、記載内容自体の信頼性判断としては妥当と考えられます。