Menu
Agent Browser（Headlessブラウザ自動化CLI）を使ったUI検証・E2Eテスト・スクリーンショット取得の判断軸。アクセシビリティツリーベースの要素選択を優先し、壊れにくいテスト設計を目指す。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
ディズニーの12原則とジブリ的自然運動をベースに、UIアニメーションの「なぜ動かすか」「どう動かすか」を判断する。アニメーション/モーション/トランジション設計の相談で、ツール非依存の概念的判断軸として使う。
体験品質（動き/触感/視線誘導）を「実装可能な制約」に落とし、アクセシビリティとパフォーマンスを犠牲にせずに表現を実現する。UIの表現・アニメーション・インタラクション設計/実装の相談で使う。
【穴埋め雛形】このプロジェクト固有の「存在設計・体験設計」のSSOT。judgment-harness のプロジェクト層スキルとして、立ち上げ時に本ファイルを埋めて使う（雛形のままなら未確定＝推測で決めない）。デザイン/UI/モーション/コピーの方針判断、見た目や体験のトーン決め、画面・コンポーネント設計の前段で必ず参照する。
UIを「情報設計（優先度/構造）＋インタラクション（状態遷移）＋ビジュアル（トーン）」として設計し、実装可能な仕様へ落とす。見た目だけでなく、ルール化（コンポーネント/トークン）に寄せる。
セマンティックHTML/JSXとWAI-ARIAを「最小で正しく」適用し、キーボード操作・スクリーンリーダ・コントラスト等を満たす実装を作るための判断軸。ネイティブ要素優先、ARIAの過剰使用を避ける。
アーキテクチャ設計（境界/依存/データフロー/非機能/運用）を、制約とトレードオフで言語化し、ADR-liteで合意形成しながら段階的に形にする。doc/input/rdd.md にアーキテクチャ/非機能/運用の要求がある、または設計判断（分割/責務/インタフェース/データ整合/観測性/スケール）相談で使う。
| 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環境で不安定になる