# Agent Browser

Browser automation through the repo agent-browser CLI.

- Repository: https://github.com/Chachamaru127/claude-code-harness (3190 stars)
- Category: Testing
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Chachamaru127/claude-code-harness --skill agent-browser -g -a claude-code -y`
Codex: `npx skills add Chachamaru127/claude-code-harness --skill agent-browser -g -a codex -y`
Cursor: `npx skills add Chachamaru127/claude-code-harness --skill agent-browser -g -a cursor -y`
Gemini CLI: `npx skills add Chachamaru127/claude-code-harness --skill agent-browser -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add Chachamaru127/claude-code-harness`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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 の確認

```bash
# インストール確認
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 スナップショットワークフロー（推奨）

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

```bash
# 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: 結果の確認

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

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

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

---

## クイックリファレンス

### 基本操作

The rest: https://github.com/Chachamaru127/claude-code-harness/blob/HEAD/codex/.codex/skills/agent-browser/SKILL.md