browser-agent

原文涵盖的主题

• Browser Agent Skill - agent-browser CLIによるUI検証
• 前提条件
• Core Workflow
• Quick Reference
• 検証チェックリスト
• 1. 表示確認（必須）
• 2. インタラクション検証（フォーム/ボタンがある場合）
• 3. レスポンシブ確認（UIコンポーネントの場合）

導入先の補足ファイル documents/development/project/browser-agent.md があれば、その段で読む。補足ファイルは製品への当てはめ（コマンド・パス・ポート等）だけを持ち、本スキルの規則を緩めない。食い違えば本スキルが優先する。 agent-browser がインストール済み（npm install -g agent-browser && agent-browser install） フロントエンドとバックエンドが起動済み（server-startupスキル参照） 必ず snapshot（構造確認）と screenshot（視覚確認）の両方 を取る。 ブラウザプロセスを残すとプロセスが大量に残りCPUを消費する。 検証が正常終了・異常終了を問わず、必ず agent-browser close を実行すること。 1. コードを読むな、画面を見ろ: ソースコード分析は最小限にし、ブラウザの結果に集中する 2. screenshot必須: snapshotだけでは色・レイアウト・視覚的バグがわからない 3. 正常系と異常系の両方をテスト: 正しい入力だけでなく、空入力・不正入力も試す 4. refは再取得: ページ遷移やDOM変更後は必ず snapshot を再実行 5. errorsを確認: ページ表示後とインタラクション後に errors でJSエラーを確認 6. 本番環境に対するテスト実行禁止 7. 必ずcloseする: 検証完了後、必ず agent-browser close を実行