Agent Canvas を作った理由

既存リポジトリから対話的なキャンバスへ

リポジトリを読み書きし、コマンドを実行できるエージェントに依頼します。既存の Storybook や手作業の画面一覧は不要。インストールだけで画面が揃うわけではありません。

エージェントに貼り付ける指示

Read https://github.com/tombelieber/app-canvas/blob/v0.16.0/AGENT_GUIDE.md and add a completely populated Agent Canvas to this repository. Discover all screens, components, variants, states and navigation from the whole application source. Use original UI code. Create the missing synthetic fixtures and render harnesses. Reconcile an independent source inventory with rendered cases and source-linked runtime checks. Add checked happy, failure and recovery journeys. Group by actual page and feature, connect checked flows, deduplicate repeated captures and resume checkpoints. Run --ui-complete against the original source root; keep the stricter --complete source audit separate and unchanged. Continue until the full landscape is populated and verified; report genuine blockers as incomplete. Keep production sessions, credentials and real user data out of previews.

1. 共通ツールを導入

   Node.js 22+ とプロジェクトのパッケージ管理・lockfile を使用。固定した GitHub リリースとブラウザをインストールします。npm 12 が直接 Git 依存を拒否する場合のみ --allow-git=root を追加。グローバル設定は変更しません。

   npm install --save-dev github:tombelieber/app-canvas#v0.16.0
   npx agent-canvas browsers

2. ケース選択の前に棚卸し

   元のアプリ全体で plan を実行します。全ファイルと UI アンカー、UI に影響する依存関係、実際のナビゲーションを確認し、カタログとは独立して画面と状態を列挙します。未解決の UI は残します。

   npx agent-canvas plan --source-root . --out ui-review/ui-inventory.json
   npx agent-canvas status --inventory ui-review/ui-inventory.json

3. Fixtures で元の UI を描画

   ui-review/canvas.config.mjs、catalog、合成 fixtures、preview entry、検証付き journeys を作成。Web adapter は元のページ、providers、CSS を取り込みます。fixtures はデータと依存関係を置換し、UI は複製しません。未知の通信を拒否します。

   ui-review/
     canvas.config.mjs
     catalog.json
     frame.jsx
     fixtures.js
     README.md
   .artifacts/app-canvas/inventory.json

   // package.json → scripts
   "ui:review": "agent-canvas --config ui-review/canvas.config.mjs"

   React/Vite · エージェントガイド

4. 状態と操作を検証

   通常、空、読み込み、エラー、アクセス拒否、ダイアログ、復旧を網羅。全ケースを確認し、連続フローで実際のコントロールを操作。inventory、ソースに紐づく assertions、routes を照合し、同じルートで --ui-complete を通します。 --complete は別の厳格な全ソース監査です。監査の残件数は不足画面数ではありません。

   npx agent-canvas populate --config ui-review/canvas.config.mjs --source-root . --verify

5. ソースからレビューと保守

   ui:review で全体と状態図を確認し、フローを再生。変更は実際のアプリソースへ依頼します。既存プレビューは再構築されます。新ルートや状態には inventory、fixture、journey の更新が必要。引き渡し前に完全性検証を必須にします。

   npm run ui:review

アプリ側に保持するもの

共通パッケージは viewer、CLI、skill を管理。各リポジトリは adapter、fixtures、独立 inventory、catalog、操作検証を管理します。動作する React/Vite 例を参考にし、他の構成には専用 adapter を用意します。

任意のエージェント Skill

Codex と Claude Code には同梱 skill を導入可能。他のエージェントは AGENT_GUIDE.md を直接読めます。Canvas runtime はモデルを呼ばず API キーも不要。利用するエージェント自体の料金と権限は別です。

npx agent-canvas install --target both