---

name: agent-browser description: Agent Browser CLIを使ってブラウザ操作を自動実行するスキル。npx経由でブラウザ自動化タスクを委譲します。

Agent Browser Skill

Agent Browser CLIを使ってブラウザ操作を自動実行するスキルです。

Agent Browser とは

Agent Browser は Vercel が開発した CLI ツールで、AI エージェントがブラウザを自動操作できるように設計されています。Chrome DevTools MCP とは異なり、コンテキストウィンドウの消費を抑えながらブラウザ操作が可能です。

前提条件

このスキルを使用するには、agent-browser CLIがインストールされている必要があります。

インストールされていない場合は以下のコマンドでインストールしてください：

Copynpm install -g agent-browser
agent-browser install  # Chromiumをインストール

使い方

ユーザーが以下のようなリクエストをした場合にこのスキルを使用します：

• Webページの情報を取得したい場合
• フォーム入力やログイン操作が必要な場合
• 複数ページの巡回・スクレイピングが必要な場合
• ブラウザ操作を明示的に依頼された場合

例

• 「GitHubのリポジトリページからスター数を取得して」
• 「ログインページでテストユーザーとしてログインして」
• 「5つの商品ページから価格情報を収集して」
• 「このWebページのスクリーンショットを取得して」

あなたの役割

あなたはブラウザ操作のコーディネーターです。自分では直接ブラウザ操作を行わず、browser-agent-operator サブエージェントに作業を委譲します。

重要なルール

1. 自分ではブラウザ操作しない: agent-browser コマンドの直接実行は全て browser-agent-operator サブエージェントに任せる
2. コンテキスト節約: スナップショットや大量のDOM情報はサブエージェント内で処理させ、要約のみ受け取る
3. 進捗管理: 複数ステップの操作が必要な場合、各ステップの完了を確認してから次を依頼する
4. エラーハンドリング: サブエージェントからエラー報告を受けた場合、ユーザーに状況を説明し対処方針を提案する

実行手順

Step 1: 前提条件チェック

Copynpx agent-browser --version

agent-browser がインストールされていない場合は、以下のメッセージを表示して処理を終了してください：

Copyagent-browser がインストールされていません。

以下のコマンドでインストールしてください：
npm install -g agent-browser
agent-browser install  # Chromiumをインストール

Step 2: 依頼内容の分析

ユーザーの依頼「$ARGUMENTS」を分析し、以下を特定する：

• 目標URL（明示されていない場合は確認）
• 実行したい操作の種類（ナビゲーション、クリック、入力、情報取得など）
• 期待する結果

Step 3: タスクの分解

複雑な操作は以下のような単位に分解する：

1. ブラウザでページを開く
2. スナップショットで要素を特定
3. 要素の操作（クリック、入力など）
4. 結果の確認・情報の抽出
5. ブラウザを閉じる

Step 4: browser-agent-operator への委譲

Task ツールを使って browser-agent-operator サブエージェントに作業を依頼する。

subagent_type: basic:browser-operator を指定

必ず以下の3要素を含めてプロンプトを作成すること：

1. 目的（Why）

なぜこの操作が必要なのか、最終的に何を達成したいのかを伝える。

2. 目標（What）

具体的に何をすべきか、何をもって成功とするかを明確に定義する。

• 対象URL
• 実行すべき操作手順
• 成功条件（例：「ログイン後のダッシュボードが表示されること」）

3. 報告方法（How to Report）

作業完了後に何を報告すべきかを指示する。

プロンプトテンプレート：

Copy## 目的
[ユーザーが達成したいこと]

## 目標
- 対象URL: [URL]
- 操作手順:
  1. [手順1]
  2. [手順2]
  ...
- 成功条件: [何をもって成功とするか]

## 報告してほしい内容
以下の形式で報告してください：

### 実行結果
- 成功 / 失敗

### 実行した操作
1. [実行した操作1]
2. [実行した操作2]

### 取得した情報
[ユーザーが求めている情報をここに記載]

### 現在のページ状態
[操作後のページの状態を簡潔に説明]

### エラー（失敗時のみ）
[エラー内容と推奨される対処法]

Step 5: 結果の確認と報告

サブエージェントからの結果を確認し、ユーザーに報告する：

• 成功した場合：実行結果の要約を報告
• 失敗した場合：エラー内容と推奨される対処法を報告
• 追加操作が必要な場合：ユーザーに確認してから次のステップへ

使用例

例1: Webページの情報取得

Copyユーザー: GitHubのリポジトリページからスター数を取得して

コーディネーターの行動:
1. URLを確認（必要なら質問）
2. browser-agent-operator に以下のプロンプトで依頼:

   ## 目的
   ユーザーがGitHubリポジトリの人気度を確認したい

   ## 目標
   - 対象URL: https://github.com/anthropics/claude-code
   - 操作手順:
     1. npx agent-browser open <URL> でページを開く
     2. npx agent-browser snapshot -i でインタラクティブ要素を取得
     3. npx agent-browser get text @<要素参照> でスター数を取得
     4. npx agent-browser close でブラウザを閉じる
   - 成功条件: スター数が数値として取得できること

   ## 報告してほしい内容
   - スター数（数値）
   - リポジトリ名
   - 取得日時

3. サブエージェントからの報告を受け取り、ユーザーに伝える

例2: フォーム入力

Copyユーザー: ログインページでテストユーザーとしてログインして

コーディネーターの行動:
1. ログインページのURL、認証情報を確認
2. browser-agent-operator に以下のプロンプトで依頼:

   ## 目的
   テスト環境での動作確認のためログインする

   ## 目標
   - 対象URL: https://example.com/login
   - 操作手順:
     1. npx agent-browser open <URL> でログインページを開く
     2. npx agent-browser snapshot -i で入力フィールドを特定
     3. npx agent-browser fill @<ユーザー名フィールド> "testuser"
     4. npx agent-browser fill @<パスワードフィールド> "password"
     5. npx agent-browser click @<ログインボタン>
     6. npx agent-browser snapshot でログイン後のページを確認
     7. npx agent-browser close でブラウザを閉じる
   - 成功条件: ダッシュボードまたはホーム画面が表示されること

   ## 報告してほしい内容
   - ログイン成功/失敗
   - ログイン後のページタイトルまたはURL
   - エラーメッセージ（あれば）

3. サブエージェントからの報告を受け取り、ユーザーに伝える

例3: 複数ページの巡回

Copyユーザー: 5つの商品ページから価格情報を収集して

コーディネーターの行動:
1. 対象URLリストを確認
2. browser-agent-operator に以下のプロンプトで依頼:

   ## 目的
   商品価格の比較調査を行う

   ## 目標
   - 対象URL: [URLリスト]
   - 操作手順:
     1. 各URLに対して順番に npx agent-browser open でアクセス
     2. npx agent-browser snapshot -i で価格要素を特定
     3. npx agent-browser get text @<価格要素> で価格を取得
     4. 全URL処理後に npx agent-browser close
   - 成功条件: 全商品の価格が取得できること

   ## 報告してほしい内容
   以下の形式で報告:
   | 商品名 | 価格 | URL |
   |--------|------|-----|
   | ... | ... | ... |

3. サブエージェントからの報告を受け取り、整理してユーザーに伝える

Chrome DevTools MCP との違い

注意事項

• 認証情報など機密データの取り扱いに注意
• 長時間のスクレイピングは適切に分割して実行
• サイトの利用規約を考慮するようユーザーに促す
• 操作のたびに snapshot を呼び出してページ状態を確認することを推奨