菜单
Agent Browser（Headlessブラウザ自動化CLI）を使ったUI検証・E2Eテスト・スクリーンショット取得の判断軸。アクセシビリティツリーベースの要素選択を優先し、壊れにくいテスト設計を目指す。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | agent-browser |
| user-invocable | false |
| description | Agent Browser（Headlessブラウザ自動化CLI）を使ったUI検証・E2Eテスト・スクリーンショット取得の判断軸。アクセシビリティツリーベースの要素選択を優先し、壊れにくいテスト設計を目指す。 |
npm install -g agent-browser && agent-browser installdoc/input/rdd.md に Agent Browser や E2Eテスト UI検証 が記載されている場合、このSkillの方針をデフォルト採用する。@e1 等）やセマンティックロケータ（role/label）を優先。CSSセレクタは最終手段。npm i -g）を推奨。npx 経由はNode.jsフォールバックで遅い。sleep を避け、要素の出現/状態変化を待つ。agent-browser open <url> # ページを開く
agent-browser goto <url> # 別URLへ遷移
agent-browser screenshot [file] # スクリーンショット取得
agent-browser pdf [file] # PDF保存
agent-browser click <selector> # クリック
agent-browser fill <selector> <text> # 入力欄にテキスト入力
agent-browser press <key> # キー押下（Enter等）
agent-browser scroll <direction> # スクロール
# 1. セマンティックロケータ（推奨）
agent-browser click "role=button[name='Submit']"
agent-browser fill "role=textbox[name='Email']" "test@example.com"
# 2. アクセシビリティツリー参照
agent-browser click @e1 # ツリー上のID
# 3. テキストマッチ
agent-browser click "text=ログイン"
# 4. CSSセレクタ（最終手段）
agent-browser click "#submit-btn"
agent-browser text [selector] # テキスト取得
agent-browser title # ページタイトル
agent-browser url # 現在のURL
agent-browser count <selector> # 要素数
agent-browser --viewport 375x812 # モバイルビューポート
agent-browser --device "iPhone 15" # デバイスエミュレーション
agent-browser --color-scheme dark # ダークモード
agent-browser がグローバルインストール済みか（agent-browser --version）agent-browser install）sleep ではなく明示的な待機条件を使っているかnpx agent-browser で毎回起動すると遅い（グローバルインストール推奨）sleep(3000) のような固定待機はCI環境で不安定になるディズニーの12原則とジブリ的自然運動をベースに、UIアニメーションの「なぜ動かすか」「どう動かすか」を判断する。アニメーション/モーション/トランジション設計の相談で、ツール非依存の概念的判断軸として使う。
体験品質（動き/触感/視線誘導）を「実装可能な制約」に落とし、アクセシビリティとパフォーマンスを犠牲にせずに表現を実現する。UIの表現・アニメーション・インタラクション設計/実装の相談で使う。
【穴埋め雛形】このプロジェクト固有の「存在設計・体験設計」のSSOT。judgment-harness のプロジェクト層スキルとして、立ち上げ時に本ファイルを埋めて使う（雛形のままなら未確定＝推測で決めない）。デザイン/UI/モーション/コピーの方針判断、見た目や体験のトーン決め、画面・コンポーネント設計の前段で必ず参照する。
UIを「情報設計（優先度/構造）＋インタラクション（状態遷移）＋ビジュアル（トーン）」として設計し、実装可能な仕様へ落とす。見た目だけでなく、ルール化（コンポーネント/トークン）に寄せる。
セマンティックHTML/JSXとWAI-ARIAを「最小で正しく」適用し、キーボード操作・スクリーンリーダ・コントラスト等を満たす実装を作るための判断軸。ネイティブ要素優先、ARIAの過剰使用を避ける。
アーキテクチャ設計（境界/依存/データフロー/非機能/運用）を、制約とトレードオフで言語化し、ADR-liteで合意形成しながら段階的に形にする。doc/input/rdd.md にアーキテクチャ/非機能/運用の要求がある、または設計判断（分割/責務/インタフェース/データ整合/観測性/スケール）相談で使う。