跳到正文
cccskills
免费在 GitHub 公开

agent-browser

Use the agent-browser CLI to navigate web pages, inspect interactive elements, fill forms, capture screenshots, and collect page information. It helps check web app behavior through browser actions and snapshots.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

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.

Chachamaru127/claude-code-harness星标 3,187(GitHub 3,187 + cccskills 0)
集成工具Playwright

实测评分 未实测

查看安装方法

适用场景

  • Navigate a page and inspect its current state
  • Fill and submit a web form
  • Capture a screenshot for a UI check
  • Collect text or page details

包含的文件(3)

  • SKILL.md6.0 KB
  • references/ai-snapshot-workflow.md6.6 KB
  • references/browser-automation.md6.5 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

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
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 -cAI 向けスナップショット
click @e1要素をクリック
fill @e1 "text"フォームに入力
type @e1 "text"テキストを入力
press Enterキーを押す
screenshot [path]スクリーンショット
closeブラウザを閉じる

ナビゲーション

コマンド説明
back戻る
forward進む
reloadリロード

情報取得

コマンド説明
get text @e1テキスト取得
get html @e1HTML 取得
get url現在の URL
get titleページタイトル

待機

コマンド説明
wait @e1要素を待機
wait 10001秒待機

デバッグ

コマンド説明
--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★★★明示指定された CLI によるスナップショット操作
chrome-devtools MCP★★☆Chrome が既に開いている場合
playwright MCP★★☆複雑な E2E テスト

原則: ユーザー指定のブラウザ経路を優先する。指定がなければ利用可能な Browser Use / Playwright 等の経路を使い、agent-browser の導入を前提にしない。


注意事項

  • agent-browser はヘッドレスモードがデフォルト
  • --headed オプションでブラウザを表示可能
  • セッションは明示的に close するまで維持される
  • 認証が必要なサイトはセッションを活用

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

breezing

免费

Run planned work through a team workflow: delegate implementation to workers, coordinate independent review and revisions, then report the outcome. Select a task range or backend, or run all unfinished tasks in one command.

中文简介正在准备中。当前显示英语简介。

  • Run all unfinished planned tasks
  • Delegate a selected task range
  • Request implementation through the Codex or Cursor backend
Chachamaru127/claude-code-harness31872026年10月26日 更新

breezing

免费

Run planned software tasks as a coordinated team workflow. It assigns ready tasks to isolated workers, performs per-task and integrated reviews, incorporates approved changes, and reports progress and completion. Worker execution can use the selected backend, including optional Cursor delegation.

中文简介正在准备中。当前显示英语简介。

  • Run all remaining planned tasks as a team
  • Delegate a selected task range to workers
  • Use Cursor for worker implementation
Chachamaru127/claude-code-harness31872026年10月26日 更新

Review changes that integrate Claude Code or Codex updates. Classify each new Feature Table entry as implemented, inherited upstream, or tracked in Plans, and flag entries that are only documented without supporting work.

中文简介正在准备中。当前显示英语简介。

  • Review a Claude Code or Codex update integration
  • Check new Feature Table entries against implementation
  • Confirm future work is recorded in Plans
Chachamaru127/claude-code-harness31872026年10月26日 更新

ci

免费

Diagnose failed CI runs by reviewing logs, reproduction details, specifications, and recent commits. Identify whether the cause lies in implementation, tests, or the environment, then make authorized fixes without hiding failures by skipping checks.

中文简介正在准备中。当前显示英语简介。

  • Find the cause of a failed CI run
  • Trace a build error to a recent commit
  • Fix implementation issues behind failing tests
Chachamaru127/claude-code-harness31872026年10月26日 更新

Send a question, investigation, or design discussion to cursor-agent in read-only ask mode. It returns a second opinion or evidence-based findings that the host agent summarizes, without making file changes or running implementation work.

中文简介正在准备中。当前显示英语简介。

  • Ask for a second opinion on a design decision
  • Investigate code or configuration and request supporting evidence
  • Get an adversarial sanity check on a proposed change
Chachamaru127/claude-code-harness31872026年10月26日 更新

cursor-do

免费

Delegate one implementation or file editing task to Cursor Composer in a dedicated Git worktree. Review its changes, then cherry-pick the reviewed commit into the current branch and update the matching plan entry when present.

中文简介正在准备中。当前显示英语简介。

  • Implement one feature with Cursor Composer
  • Refactor a file through Cursor
  • Delegate a specific code change
Chachamaru127/claude-code-harness31872026年10月26日 更新

查看 Chachamaru127 的全部技能

报告此技能的问题