Browser

ruvnet/ruflo/v3/@claude-flow/cli/.claude/skills/browser

作者 ruvnet5f709e36799274be6bb68fff69090bdbc8621220無授權條款74K 個星標收錄於 2026年10月9日更新於 2026年10月9日儲存庫今天更新

Web browser automation with AI-optimized snapshots for claude-flow agents

僅含說明Productivity & Workflow
AI 產生的概覽

透過 agent-browser 命令列工具自動化網頁瀏覽器，使用針對 AI 最佳化的無障礙快照與元素參照。

功能
此技能記錄了一套驅動網頁瀏覽器的命令列工作流程：開啟網址、取得無障礙樹快照，並透過點擊、填寫表單、輸入、捲動與等待來與頁面互動。內容涵蓋導覽、快照、互動、資訊取得、等待、工作階段，以及元素參照、CSS 選擇器與語意定位器等選擇器策略。它也說明了與 Claude Flow 的整合方式，包括 MCP 工具、記憶儲存與掛鉤。
適用情境
當代理需要瀏覽網站、填寫並送出表單、擷取頁面資料或截取螢幕畫面時使用。它也適合需要隔離工作階段或共用驗證狀態的平行瀏覽任務。
執行需求
需要安裝並可使用 agent-browser 命令列工具，並具備連線至目標網站的網路存取能力。選用的 Claude Flow 整合使用 npx @claude-flow/cli 進行記憶儲存與掛鉤呼叫。此技能未附帶指令碼，僅為說明文件。

Browser Automation Skill

Web browser automation using agent-browser with AI-optimized snapshots. Reduces context by 93% using element refs (@e1, @e2) instead of full DOM.

Core Workflow

bash
# 1. Navigate to pageagent-browser open <url>
# 2. Get accessibility tree with element refsagent-browser snapshot -i    # -i = interactive elements only
# 3. Interact using refs from snapshotagent-browser click @e2agent-browser fill @e3 "text"
# 4. Re-snapshot after page changesagent-browser snapshot -i

Quick Reference

Navigation

CommandDescription
open <url>Navigate to URL
backGo back
forwardGo forward
reloadReload page
closeClose browser

Snapshots (AI-Optimized)

CommandDescription
snapshotFull accessibility tree
snapshot -iInteractive elements only (buttons, links, inputs)
snapshot -cCompact (remove empty elements)
snapshot -d 3Limit depth to 3 levels
screenshot [path]Capture screenshot (base64 if no path)

Interaction

CommandDescription
click <sel>Click element
fill <sel> <text>Clear and fill input
type <sel> <text>Type with key events
press <key>Press key (Enter, Tab, etc.)
hover <sel>Hover element
select <sel> <val>Select dropdown option
check/uncheck <sel>Toggle checkbox
scroll <dir> [px]Scroll page

Get Info

CommandDescription
get text <sel>Get text content
get html <sel>Get innerHTML
get value <sel>Get input value
get attr <sel> <attr>Get attribute
get titleGet page title
get urlGet current URL

Wait

CommandDescription
wait <selector>Wait for element
wait <ms>Wait milliseconds
wait --text "text"Wait for text
wait --url "pattern"Wait for URL
wait --load networkidleWait for load state

Sessions

CommandDescription
--session <name>Use isolated session
session listList active sessions

Selectors

Element Refs (Recommended)

bash
# Get refs from snapshotagent-browser snapshot -i# Output: button "Submit" [ref=e2]
# Use ref to interactagent-browser click @e2

CSS Selectors

bash
agent-browser click "#submit"agent-browser fill ".email-input" "[email protected]"

Semantic Locators

bash
agent-browser find role button click --name "Submit"agent-browser find label "Email" fill "[email protected]"agent-browser find testid "login-btn" click

Examples

Login Flow

bash
agent-browser open https://example.com/loginagent-browser snapshot -iagent-browser fill @e2 "[email protected]"agent-browser fill @e3 "password123"agent-browser click @e4agent-browser wait --url "**/dashboard"

Form Submission

bash
agent-browser open https://example.com/contactagent-browser snapshot -iagent-browser fill @e1 "John Doe"agent-browser fill @e2 "[email protected]"agent-browser fill @e3 "Hello, this is my message"agent-browser click @e4agent-browser wait --text "Thank you"

Data Extraction

bash
agent-browser open https://example.com/productsagent-browser snapshot -i# Iterate through product refsagent-browser get text @e1  # Product nameagent-browser get text @e2  # Priceagent-browser get attr @e3 href  # Link

Multi-Session (Swarm)

bash
# Session 1: Navigatoragent-browser --session nav open https://example.comagent-browser --session nav state save auth.json
# Session 2: Scraper (uses same auth)agent-browser --session scrape state load auth.jsonagent-browser --session scrape open https://example.com/dataagent-browser --session scrape snapshot -i

Integration with Claude Flow

MCP Tools

All browser operations are available as MCP tools with browser/ prefix:

  • browser/open
  • browser/snapshot
  • browser/click
  • browser/fill
  • browser/screenshot
  • etc.

Memory Integration

bash
# Store successful patternsnpx @claude-flow/cli memory store --namespace browser-patterns --key "login-flow" --value "snapshot->fill->click->wait"
# Retrieve before similar tasknpx @claude-flow/cli memory search --query "login automation"

Hooks

bash
# Pre-browse hook (get context)npx @claude-flow/cli hooks pre-edit --file "browser-task.ts"
# Post-browse hook (record success)npx @claude-flow/cli hooks post-task --task-id "browse-1" --success true

Tips

  1. Always use snapshots - They're optimized for AI with refs
  2. Prefer -i flag - Gets only interactive elements, smaller output
  3. Use refs, not selectors - More reliable, deterministic
  4. Re-snapshot after navigation - Page state changes
  5. Use sessions for parallel work - Each session is isolated

來源與署名

來源：ruvnet/ruflo位於v3/@claude-flow/cli/.claude/skills/browser提交5f709e3

授權條款： 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 ruvnet/ruflo 的技能

Sparc Methodology

ruvnet

依 SPARC 階段引導軟體開發：規格說明、虛擬碼、架構、精煉、完成。

Software Development74K今天更新

Performance Analysis

ruvnet

指導效能剖析、基準測試與最佳化，並強調可重現的量測實務。

Software Development74K今天更新

Swarm Advanced

ruvnet

記錄 Claude Flow 進階叢集編排模式，用於研究、開發、測試與分析工作流程。

AI & Agents74K今天更新

Stream Chain

ruvnet

編排多步驟代理工作流程，讓每一步的輸出流入下一步，支援自訂鏈與預先定義的管線。

AI & Agents74K今天更新

Sparc Methodology

ruvnet

介紹 SPARC 軟體開發方法論及其 17 種 Claude Flow 多代理模式。

Software Development74K今天更新

Github Workflow Automation

ruvnet

指導使用 AI 叢集協調、工作流程範本和儲存庫管理指令來自動化 GitHub Actions CI/CD。

DevOps & Cloud74K今天更新

更多Productivity & Workflow技能

Morning Note

anthropics

精選

為追蹤個股撰寫簡明的晨會筆記，涵蓋隔夜動態、交易想法與當日關鍵事件。

Productivity & Workflow39K2 週前更新

Dd Meeting Prep

anthropics

精選

為盡職調查會議（如管理層簡報、專家訪談）準備問題清單、基準數據與需重點探查的風險訊號。

Productivity & Workflow39K2 週前更新

Dd Checklist

anthropics

精選

產生並追蹤依產業量身打造的盡職調查清單，涵蓋各工作流程、狀態追蹤與紅旗升級。

Productivity & Workflow39K2 週前更新

Deal Tracker

anthropics

精選

追蹤進行中的併購交易，管理里程碑、截止期限、行動項目與每週交易檢視。

Productivity & Workflow39K2 週前更新

Client Review

anthropics

精選

為客戶檢視會議準備投資組合績效、配置分析、談話重點與行動項目。

Productivity & Workflow39K2 週前更新

Morning Note

anthropics

精選

為追蹤個股撰寫簡明的晨會筆記，涵蓋隔夜動態、交易想法與當日關鍵事件。

Productivity & Workflow39K2 週前更新