mcpbeat Sign in

Agent Browser Skill for Claude

by majiayu000

ブラウザを手足のように操る。ページ遷移、フォーム入力、スクショ、なんでもこい。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.

2k tokens
context cost
the whole folder, loaded on every use
2
files
instructions only
0
copies elsewhere
how many repositories repackaged it
532
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/majiayu000/claude-skill-registry --skill agent-browser

What comes with it

892 bytes besides the instruction
metadata.json

The instruction itself

6 sections, as written by the author

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 "[email protected]"
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 するまで維持される
  • 認証が必要なサイトはセッションを活用

Other skills for the same job

different authors, same section of the catalogue
Webapp Testing
by anthropics
vendor ×12

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

6k tokens scripts
Notebooklm
by ZhanlinCui
×6

Use this skill to query your Google NotebookLM notebooks directly from Claude Code for source-grounded, citation-backed answers from Gemini. Browser automation, library management, persistent auth. Drastically reduced hallucinations through document-only responses.

26k tokens scripts
Playwright Skill
by lackeyjb
×4

Complete browser automation with Playwright. Auto-detects dev servers, writes clean test scripts to /tmp. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use when user wants to test websites, automate browser interactions, validate web functionality, or perform any browser-based testing.

12k tokens scripts
Electron
by vercel-labs
vendor ×2

Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include "automate Slack app", "control VS Code", "interact with Discord app", "test this Electron app", "connect to desktop app", or any task requiring automation of a native Electron application.

2k tokens
Anchor Browser Automation
by christophacham
×2

Automate Anchor Browser tasks via Rube MCP (Composio). Always search tools first for current schemas.

756 tokens needs MCP
Browser Tool Automation
by christophacham
×2

Automate Browser Tool tasks via Rube MCP (Composio). Always search tools first for current schemas.

749 tokens needs MCP
Giil
by Dicklesworthstone
×2

Get Image [from] Internet Link - Zero-setup CLI for downloading full-resolution images from iCloud, Dropbox, Google Photos, and Google Drive share links. Four-tier capture strategy, browser automation, HEIC conversion, album support. Node.js/Playwright.

3k tokens
Browser Extension Builder
by ComeOnOliver
×2

Expert in building browser extensions that solve real problems - Chrome, Firefox, and cross-browser extensions. Covers extension architecture, manifest v3, content scripts, popup UIs, monetization strategies, and Chrome Web Store publishing. Use when: browser extension, chrome extension, firefox addon, extension, manifest v3.

4k tokens

How to use it

Copy the folder

Take majiayu000/claude-skill-registry-agent-browser-chachamaru127-claude-code-harness-4-agent-browser from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.

Install what it needs

The instructions reference npm. Without those the skill loads but fails at the first command.