agent-browser

name	agent-browser
description	ブラウザを手足のように操る。ページ遷移、フォーム入力、スクショ、なんでもこい。Use when users ask to navigate websites, fill forms, take screenshots, extract web data, test web apps, or automate browser workflows. Trigger phrases include 'go to [url]', 'click on', 'fill out the form', 'take a screenshot', 'scrape', 'automate', 'test the website', 'log into', or any browser interaction request. Do NOT load for: sharing URLs, embedding links, screenshot image files.
description-en	Control browser like hands and feet. Navigate, fill forms, screenshot, bring it on. Use when users ask to navigate websites, fill forms, take screenshots, extract web data, test web apps, or automate browser workflows. Trigger phrases include 'go to [url]', 'click on', 'fill out the form', 'take a screenshot', 'scrape', 'automate', 'test the website', 'log into', or any browser interaction request. Do NOT load for: sharing URLs, embedding links, screenshot image files.
description-ja	ブラウザを手足のように操る。ページ遷移、フォーム入力、スクショ、なんでもこい。Use when users ask to navigate websites, fill forms, take screenshots, extract web data, test web apps, or automate browser workflows. Trigger phrases include 'go to [url]', 'click on', 'fill out the form', 'take a screenshot', 'scrape', 'automate', 'test the website', 'log into', or any browser interaction request. Do NOT load for: sharing URLs, embedding links, screenshot image files.
allowed-tools	["Bash","Read"]
user-invocable	false
context	fork
argument-hint	[url] [--headless]

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]


agent-browser click @e2           
agent-browser fill @e3 
agent-browser fill @e4 
agent-browser click @e5