Agent Skills
› Chachamaru127/claude-code-harness
› agent-browser
agent-browser
GitHub基于agent-browser CLI的浏览器自动化工具，支持页面导航、表单填写、截图及UI调试。核心流程为获取AI快照后通过引用操作元素。适用于自动化测试与网页交互，不适用于链接分享或图片编辑。
Trigger Scenarios
页面打开与URL确认
点击与表单输入操作
UI界面检查与测试
截取屏幕快照
Install
npx skills add Chachamaru127/claude-code-harness --skill agent-browser -g -y
SKILL.md
Frontmatter
{
"name": "agent-browser",
"context": "fork",
"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.",
"allowed-tools": [
"Bash",
"Read"
],
"argument-hint": "[url] [--headless]",
"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共有、リンク埋め込み、スクショ画像編集には使わない。",
"user-invocable": false,
"disable-model-invocation": true
}
Agent Browser Skill
ブラウザ自動化を行うスキル。agent-browser CLI を使用して、UI デバッグ・検証・自動操作を実行します。
トリガーフレーズ
このスキルは以下のフレーズで自動起動します：
- 「ページを開いて」「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
クイックリファレンス
基本操作
| コマンド | 説明 |
|---|---|
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 | ★★★ | 第一選択。AI 向けスナップショットが強力 |
| chrome-devtools MCP | ★★☆ | Chrome が既に開いている場合 |
| playwright MCP | ★★☆ | 複雑な E2E テスト |
原則: まず agent-browser を試し、うまくいかない場合のみ MCP ツールを使用。
注意事項
- agent-browser はヘッドレスモードがデフォルト
--headedオプションでブラウザを表示可能- セッションは明示的に
closeするまで維持される - 認証が必要なサイトはセッションを活用
Version History
- c220671 Current 2026-07-05 14:47
