Agent Browser Skill

ブラウザ自動化を行うスキル。agent-browser CLI を使用して、UI デバッグ・検証・自動操作を実行します。

---

トリガーフレーズ

agent-browser が明示指定された時に使う補助スキル。以下は扱える操作の例であり、自動起動の条件ではない:

• 「ページを開いて」「URLを確認して」
• 「クリックして」「入力して」「フォームに」
• 「スクリーンショットを撮って」
• 「UIを確認して」「画面をテストして」
• "open this page", "click on", "fill the form", "screenshot"

---

機能詳細

機能	詳細
ブラウザ自動化	See references/browser-automation.md
AI スナップショットワークフロー	See references/ai-snapshot-workflow.md

実行手順

Step 0: agent-browser の確認

# インストール確認
which agent-browser

# インストールを明示依頼され、未インストールの場合のみ
npm install -g agent-browser
agent-browser install

Step 1: ユーザーのリクエストを分類

リクエストタイプ	対応アクション
URL を開く	agent-browser open <url>
要素をクリック	スナップショット → agent-browser click @ref
フォーム入力	スナップショット → agent-browser fill @ref "text"
状態確認	agent-browser snapshot -i -c
スクリーンショット	agent-browser screenshot <path>
デバッグ	agent-browser --headed open <url>

Step 2: AI スナップショットワークフロー（推奨）

ほとんどの操作で、まずスナップショットを取得してから要素参照で操作します：

# 1. ページを開く
agent-browser open https://example.com

# 2. スナップショット取得（AI 向け、インタラクティブ要素のみ）
agent-browser snapshot -i -c

# 出力例:
# - link "Home" [ref=e1]
# - button "Login" [ref=e2]
# - input "Email" [ref=e3]
# - input "Password" [ref=e4]
# - button "Submit" [ref=e5]

# 3. 要素参照で操作
agent-browser click @e2           # Login ボタンをクリック
agent-browser fill @e3 "user@example.com"
agent-browser fill @e4 "password123"
agent-browser click @e5           # Submit

Step 3: 結果の確認

# 現在の状態をスナップショットで確認
agent-browser snapshot -i -c

# または URL を確認
agent-browser get url

# スクリーンショットを取得
agent-browser screenshot result.png

---

クイックリファレンス

基本操作