/agent-browser

name: agent-browser
description: "Browser automation through the repo agent-browser CLI. Explicit helper for navigation, forms, screenshots, scraping, and web-app checks. Prefer Browser Use or Playwright when available. Do NOT load for: sharing URLs, embedding links, or editing screenshot files."
description-en: "Browser automation through the repo agent-browser CLI. Explicit helper for navigation, forms, screenshots, scraping, and web-app checks. Prefer Browser Use or Playwright when available. Do NOT load for: sharing URLs, embedding links, or editing screenshot files."
description-ja: "repo の agent-browser CLI でブラウザ操作を行う明示補助スキル。ページ遷移、フォーム、スクショ、スクレイピング、Webアプリ確認向け。利用可能なら Browser Use / Playwright を優先。URL共有、リンク埋め込み、スクショ画像編集には使わない。"
allowed-tools: ["Bash", "Read"]
user-invocable: false
disable-model-invocation: true
context: fork
argument-hint: "[url] [--headless]"

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](${CLAUDE_SKILL_DIR}/references/browser-automation.md) | | **AI スナップショットワークフロー** | See [references/ai-snapshot-workflow.md](${CLAUDE_SKILL_DIR}/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

---

クイックリファレンス

基本操作

| コマンド | 説明 | |---------|------| | `open <url>` | URL を開く | | `snapshot -i -c` | AI 向けスナップショット | | `click @e1` | 要素をクリック | | `fill @e1 "text"` | フォームに入力 | | `type @e1 "text"` | テキストを入力 | | `press Enter` | キーを押す | | `screenshot [path]` | スクリーンショット | | `close` | ブラウザを閉じる |

ナビゲーション

| コマンド | 説明 | |---------|------| | `back` | 戻る | | `forward` | 進む | | `reload` | リロード |

情報取得

| コマンド | 説明 | |---------|------| | `get text @e1` | テキスト取得 | | `get html @e1` | HTML 取得 | | `get url` | 現在の URL | | `get title` | ページタイトル |

待機

| コマンド | 説明 | |---------|------| | `wait @e1` | 要素を待機 | | `wait 1000` | 1秒待機 |

デバッグ

| コマンド | 説明 | |---------|------| | `--headed` | ブラウザを表示 | | `console` | コンソールログ | | `errors` | ページエラー | | `highlight @e1` | 要素をハイライト |

---

セッション管理

複数のタブ/セッションを並列管理：

# セッションを指定
agent-browser --session admin open https://admin.example.com
agent-browser --session user open https://example.com

# セッション一覧
agent-browser session list

# 特定セッションで操作
agent-browser --session admin snapshot -i -c

---

MCP ブラウザツールとの使い分け

| ツール | 推奨度 | 用途 | |--------|--------|------| | **agent-browser** | ★★★ | 明示指定された CLI によるスナップショット操作 | | chrome-devtools MCP | ★★☆ | Chrome が既に開いている場合 | | playwright MCP | ★★☆ | 複雑な E2E テスト |

**原則**: ユーザー指定のブラウザ経路を優先する。指定がなければ利用可能な Browser Use / Playwright 等の経路を使い、agent-browser の導入を前提にしない。

---

注意事項

• agent-browser はヘッドレスモードがデフォルト
• `--headed` オプションでブラウザを表示可能
• セッションは明示的に `close` するまで維持される
• 認証が必要なサイトはセッションを活用