agent-browser

# Agent Browser Skill

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

## Agent Browser とは

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

## 前提条件

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

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

```bash
npm 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: 前提条件チェック

```bash
npx agent-browser --version
```

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

```
agent-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）
作業完了後に何を報告すべきかを指示する。

**プロンプトテンプレート：**
```
## 目的
[ユーザーが達成したいこと]

## 目標
- 対象URL: [URL]
- 操作手順:
  1. [手順1]
  2. [手順2]