菜单
UI実装後の検証時に使用。agent-browser CLIでブラウザ上の動作を検証する。「UIを確認」「画面テスト」「E2Eテスト」と言われたら使用。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | browser-agent |
| description | UI実装後の検証時に使用。agent-browser CLIでブラウザ上の動作を検証する。「UIを確認」「画面テスト」「E2Eテスト」と言われたら使用。 |
agent-browser がインストール済み（npm install -g agent-browser && agent-browser install）open → snapshot → screenshot → 操作 → snapshot → screenshot
必ず snapshot（構造確認）と screenshot（視覚確認）の両方 を取る。
# 基本操作
agent-browser open <url> # ページを開く
agent-browser snapshot # アクセシビリティツリー（ref付き）を取得
agent-browser screenshot # 現在のビューポートをキャプチャ
agent-browser screenshot --full # フルページキャプチャ
agent-browser screenshot --annotate # 要素ラベル付きキャプチャ
# 操作
agent-browser fill <sel> "text" # クリア後入力
agent-browser click <sel> # クリック
agent-browser select <sel> "option" # セレクト
agent-browser press Enter # キー入力
# 待機
agent-browser wait --load networkidle # ネットワーク安定待ち
agent-browser wait <selector> # 要素出現待ち
agent-browser wait --text "Welcome" # テキスト出現待ち
# 検査
agent-browser get text <sel> # テキスト取得
agent-browser get url # 現在のURL
agent-browser errors # エラー確認
# セマンティック検索
agent-browser find role button click --name "Submit"
agent-browser find text "Sign In" click
agent-browser find label "Email" fill "test@test.com"
# ビューポート
agent-browser set viewport 375 812 # モバイル（iPhone）
agent-browser set viewport 768 1024 # タブレット
agent-browser set viewport 1280 720 # デスクトップ
# 状態リセット
agent-browser close # ブラウザを閉じる
agent-browser open <url>
agent-browser wait --load networkidle
agent-browser screenshot --full
agent-browser snapshot
agent-browser errors
agent-browser close # 検証完了後に必ず実行
# 正常系
agent-browser fill '[data-testid="email-input"]' "valid@example.com"
agent-browser click '[data-testid="submit-button"]'
agent-browser wait --load networkidle
agent-browser screenshot
# 異常系
agent-browser open <url>
agent-browser fill '[data-testid="email-input"]' "invalid"
agent-browser click '[data-testid="submit-button"]'
agent-browser screenshot
agent-browser set viewport 375 812
agent-browser screenshot /tmp/mobile.png
agent-browser set viewport 1280 720
agent-browser close
ブラウザプロセスを残すとプロセスが大量に残りCPUを消費する。 検証が正常終了・異常終了を問わず、必ず
agent-browser closeを実行すること。
snapshot を再実行errors でJSエラーを確認agent-browser close を実行プッシュ前に必ず実行。静的チェック・テスト・統合レビュー含む6ペルソナレビューを最低2サイクル実施し、自己改善確認後のみpush可能。
Git worktree を使った並列開発時に使用。配置・ポート割当・環境コピー・クリーンアップを標準化する。
Use when completing tasks, implementing major features, or before merging to verify work meets requirements
作業完了前にセッション内の改善ポイントを抽出し、ユーザー承認後にルール・スキル・ドキュメントへ反映する。
開発サーバー・E2E・ブラウザ検証時に使用。既存プロセスを停止してからプロジェクト指定ポートで起動し、作業後に必ず停止する。
Use when creating new skills, editing existing skills, or verifying skills work before deployment