browser
starsforks
How to install browser?
spencermarx/open-code-review/browser
$npx -y skills add spencermarx/open-code-review --skill browserWeb browser automation with AI-optimized snapshots for claude-flow agents
SKILL.md
| 1 | # Browser Automation Skill |
| 2 | |
| 3 | Web browser automation using agent-browser with AI-optimized snapshots. Reduces context by 93% using element refs (@e1, @e2) instead of full DOM. |
| 4 | |
| 5 | ## Core Workflow |
| 6 | |
| 7 | ```bash |
| 8 | # 1. Navigate to page |
| 9 | agent-browser open <url> |
| 10 | |
| 11 | # 2. Get accessibility tree with element refs |
| 12 | agent-browser snapshot -i # -i = interactive elements only |
| 13 | |
| 14 | # 3. Interact using refs from snapshot |
| 15 | agent-browser click @e2 |
| 16 | agent-browser fill @e3 "text" |
| 17 | |
| 18 | # 4. Re-snapshot after page changes |
| 19 | agent-browser snapshot -i |
| 20 | ``` |
| 21 | |
| 22 | ## Quick Reference |
| 23 | |
| 24 | ### Navigation |
| 25 | | Command | Description | |
| 26 | |---------|-------------| |
| 27 | | `open <url>` | Navigate to URL | |
| 28 | | `back` | Go back | |
| 29 | | `forward` | Go forward | |
| 30 | | `reload` | Reload page | |
| 31 | | `close` | Close browser | |
| 32 | |
| 33 | ### Snapshots (AI-Optimized) |
| 34 | | Command | Description | |
| 35 | |---------|-------------| |
| 36 | | `snapshot` | Full accessibility tree | |
| 37 | | `snapshot -i` | Interactive elements only (buttons, links, inputs) | |
| 38 | | `snapshot -c` | Compact (remove empty elements) | |
| 39 | | `snapshot -d 3` | Limit depth to 3 levels | |
| 40 | | `screenshot [path]` | Capture screenshot (base64 if no path) | |
| 41 | |
| 42 | ### Interaction |
| 43 | | Command | Description | |
| 44 | |---------|-------------| |
| 45 | | `click <sel>` | Click element | |
| 46 | | `fill <sel> <text>` | Clear and fill input | |
| 47 | | `type <sel> <text>` | Type with key events | |
| 48 | | `press <key>` | Press key (Enter, Tab, etc.) | |
| 49 | | `hover <sel>` | Hover element | |
| 50 | | `select <sel> <val>` | Select dropdown option | |
| 51 | | `check/uncheck <sel>` | Toggle checkbox | |
| 52 | | `scroll <dir> [px]` | Scroll page | |
| 53 | |
| 54 | ### Get Info |
| 55 | | Command | Description | |
| 56 | |---------|-------------| |
| 57 | | `get text <sel>` | Get text content | |
| 58 | | `get html <sel>` | Get innerHTML | |
| 59 | | `get value <sel>` | Get input value | |
| 60 | | `get attr <sel> <attr>` | Get attribute | |
| 61 | | `get title` | Get page title | |
| 62 | | `get url` | Get current URL | |
| 63 | |
| 64 | ### Wait |
| 65 | | Command | Description | |
| 66 | |---------|-------------| |
| 67 | | `wait <selector>` | Wait for element | |
| 68 | | `wait <ms>` | Wait milliseconds | |
| 69 | | `wait --text "text"` | Wait for text | |
| 70 | | `wait --url "pattern"` | Wait for URL | |
| 71 | | `wait --load networkidle` | Wait for load state | |
| 72 | |
| 73 | ### Sessions |
| 74 | | Command | Description | |
| 75 | |---------|-------------| |
| 76 | | `--session <name>` | Use isolated session | |
| 77 | | `session list` | List active sessions | |
| 78 | |
| 79 | ## Selectors |
| 80 | |
| 81 | ### Element Refs (Recommended) |
| 82 | ```bash |
| 83 | # Get refs from snapshot |
| 84 | agent-browser snapshot -i |
| 85 | # Output: button "Submit" [ref=e2] |
| 86 | |
| 87 | # Use ref to interact |
| 88 | agent-browser click @e2 |
| 89 | ``` |
| 90 | |
| 91 | ### CSS Selectors |
| 92 | ```bash |
| 93 | agent-browser click "#submit" |
| 94 | agent-browser fill ".email-input" "test@test.com" |
| 95 | ``` |
| 96 | |
| 97 | ### Semantic Locators |
| 98 | ```bash |
| 99 | agent-browser find role button click --name "Submit" |
| 100 | agent-browser find label "Email" fill "test@test.com" |
| 101 | agent-browser find testid "login-btn" click |
| 102 | ``` |
| 103 | |
| 104 | ## Examples |
| 105 | |
| 106 | ### Login Flow |
| 107 | ```bash |
| 108 | agent-browser open https://example.com/login |
| 109 | agent-browser snapshot -i |
| 110 | agent-browser fill @e2 "user@example.com" |
| 111 | agent-browser fill @e3 "password123" |
| 112 | agent-browser click @e4 |
| 113 | agent-browser wait --url "**/dashboard" |
| 114 | ``` |
| 115 | |
| 116 | ### Form Submission |
| 117 | ```bash |
| 118 | agent-browser open https://example.com/contact |
| 119 | agent-browser snapshot -i |
| 120 | agent-browser fill @e1 "John Doe" |
| 121 | agent-browser fill @e2 "john@example.com" |
| 122 | agent-browser fill @e3 "Hello, this is my message" |
| 123 | agent-browser click @e4 |
| 124 | agent-browser wait --text "Thank you" |
| 125 | ``` |
| 126 | |
| 127 | ### Data Extraction |
| 128 | ```bash |
| 129 | agent-browser open https://example.com/products |
| 130 | agent-browser snapshot -i |
| 131 | # Iterate through product refs |
| 132 | agent-browser get text @e1 # Product name |
| 133 | agent-browser get text @e2 # Price |
| 134 | agent-browser get attr @e3 href # Link |
| 135 | ``` |
| 136 | |
| 137 | ### Multi-Session (Swarm) |
| 138 | ```bash |
| 139 | # Session 1: Navigator |
| 140 | agent-browser --session nav open https://example.com |
| 141 | agent-browser --session nav state save auth.json |
| 142 | |
| 143 | # Session 2: Scraper (uses same auth) |
| 144 | agent-browser --session scrape state load auth.json |
| 145 | agent-browser --session scrape open https://example.com/data |
| 146 | agent-browser --session scrape snapshot -i |
| 147 | ``` |
| 148 | |
| 149 | ## Integration with Claude Flow |
| 150 | |
| 151 | ### MCP Tools |
| 152 | All browser operations are available as MCP tools with `browser/` prefix: |
| 153 | - `browser/open` |
| 154 | - `browser/snapshot` |
| 155 | - `browser/click` |
| 156 | - `browser/fill` |
| 157 | - `browser/screenshot` |
| 158 | - etc. |
| 159 | |
| 160 | ### Memory Integration |
| 161 | ```bash |
| 162 | # Store successful patterns |
| 163 | npx @claude-flow/cli memory store --namespace browser-patterns --key "login-flow" --value "snapshot->fill->click->wait" |
| 164 | |
| 165 | # Retrieve before similar task |
| 166 | npx @claude-flow/cli memory search --query "login automation" |
| 167 | ``` |
| 168 | |
| 169 | ### Hooks |
| 170 | ```bash |
| 171 | # Pre-browse hook (get context) |
| 172 | npx @claude-flow/cli hooks pre-edit --file "browser-task.ts" |
| 173 | |
| 174 | # Post-browse hook (record success) |
| 175 | npx @claude-flow/cli hooks post-task --task-id "browse-1" --success true |
| 176 | ``` |
| 177 | |
| 178 | ## Tips |
| 179 | |
| 180 | 1. **Always use snapshots** - They'r |
People who liked this also viewed
6 picksType
- agent-browserBrowser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web aSkillsJul 2026
- browser-act--- name: browser-act description: "Browser automation CLI for AI agents. NEVER run browser-act commands directly via Bash — always invoke this skill first. Use browser-act when a user mentions it bSkillsJul 2026
- playwright-cliAutomate browser interactions, test web pages and work with Playwright tests.SkillsJul 2026
- accessibilityAudit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make SkillsJun 2026
- anti-detect-browserLaunch and manage anti-detect browsers with unique real-device fingerprints for multi-account operations, web scraping, ad verification, and AI agent automation. Use when the user needs to run multiplSkillsMar 2026
- web-access所有联网操作必须通过此 skill 处理，包括：搜索、网页抓取、登录后操作、网络交互等。 触发场景：用户要求搜索信息、查看网页内容、访问需要登录的网站、操作网页界面、抓取社交媒体内容（小红书、微博、推特等）、读取动态渲染页面、以及任何需要真实浏览器环境的网络任务。SkillsMay 2026
