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에 config, catalog, 합성 fixtures, preview entry, 검증 가능한 journeys를 만듭니다. Adapter는 실제 페이지, providers, 스타일을 가져옵니다. 데이터와 의존성만 교체하고 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로 전체 화면과 상태 그래프를 보고 흐름을 재생하세요. 에이전트는 실제 앱 코드를 수정합니다. 기존 preview는 다시 빌드되지만 새 경로와 상태는 inventory, fixture, journey 업데이트가 필요합니다. 인계 전에 전체 검증을 요구하세요.

   npm run ui:review

앱 저장소에 남는 파일

공유 패키지는 viewer, CLI, skill을 관리합니다. 각 저장소는 adapter, fixtures, 독립 inventory, catalog, 상호작용 검증을 관리합니다. 실행 가능한 React/Vite 예제로 시작하고 다른 스택에는 전용 adapter를 사용하세요.

선택 사항인 Agent Skill

Codex와 Claude Code는 포함된 skill을 설치할 수 있습니다. 다른 에이전트는 AGENT_GUIDE.md를 직접 읽습니다. Runtime은 모델을 호출하지 않으며 API 키도 필요 없습니다. 선택한 에이전트 자체의 비용과 권한은 별도입니다.

npx agent-canvas install --target both