AgentAlley

Home · Skills · Coding

Browser Automation Skill

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

RawView on GitHub

Nothing to install and no account needed. This one is too long to carry in a link, so Copy & open puts it on your clipboard and opens the chat — press paste.

browser/SKILL.md205 lines5.2 KB33a9e90pushed 46d agoRawView on GitHub
1---
2name: browser
3description: Web browser automation with AI-optimized snapshots for claude-flow agents
4version: 1.0.0
5triggers:
6 - /browser
7 - browse
8 - web automation
9 - scrape
10 - navigate
11 - screenshot
12tools:
13 - browser/open
14 - browser/snapshot
15 - browser/click
16 - browser/fill
17 - browser/screenshot
18 - browser/close
19---
20 
21# Browser Automation Skill
22 
23Web browser automation using agent-browser with AI-optimized snapshots. Reduces context by 93% using element refs (@e1, @e2) instead of full DOM.
24 
25## Core Workflow
26 
27```bash
28# 1. Navigate to page
29agent-browser open <url>
30 
31# 2. Get accessibility tree with element refs
32agent-browser snapshot -i # -i = interactive elements only
33 
34# 3. Interact using refs from snapshot
35agent-browser click @e2
36agent-browser fill @e3 "text"
37 
38# 4. Re-snapshot after page changes
39agent-browser snapshot -i
40```
41 
42## Quick Reference
43 
44### Navigation
45| Command | Description |
46|---------|-------------|
47| `open <url>` | Navigate to URL |
48| `back` | Go back |
49| `forward` | Go forward |
50| `reload` | Reload page |
51| `close` | Close browser |
52 
53### Snapshots (AI-Optimized)
54| Command | Description |
55|---------|-------------|
56| `snapshot` | Full accessibility tree |
57| `snapshot -i` | Interactive elements only (buttons, links, inputs) |
58| `snapshot -c` | Compact (remove empty elements) |
59| `snapshot -d 3` | Limit depth to 3 levels |
60| `screenshot [path]` | Capture screenshot (base64 if no path) |
61 
62### Interaction
63| Command | Description |
64|---------|-------------|
65| `click <sel>` | Click element |
66| `fill <sel> <text>` | Clear and fill input |
67| `type <sel> <text>` | Type with key events |
68| `press <key>` | Press key (Enter, Tab, etc.) |
69| `hover <sel>` | Hover element |
70| `select <sel> <val>` | Select dropdown option |
71| `check/uncheck <sel>` | Toggle checkbox |
72| `scroll <dir> [px]` | Scroll page |
73 
74### Get Info
75| Command | Description |
76|---------|-------------|
77| `get text <sel>` | Get text content |
78| `get html <sel>` | Get innerHTML |
79| `get value <sel>` | Get input value |
80| `get attr <sel> <attr>` | Get attribute |
81| `get title` | Get page title |
82| `get url` | Get current URL |
83 
84### Wait
85| Command | Description |
86|---------|-------------|
87| `wait <selector>` | Wait for element |
88| `wait <ms>` | Wait milliseconds |
89| `wait --text "text"` | Wait for text |
90| `wait --url "pattern"` | Wait for URL |
91| `wait --load networkidle` | Wait for load state |
92 
93### Sessions
94| Command | Description |
95|---------|-------------|
96| `--session <name>` | Use isolated session |
97| `session list` | List active sessions |
98 
99## Selectors
100 
101### Element Refs (Recommended)
102```bash
103# Get refs from snapshot
104agent-browser snapshot -i
105# Output: button "Submit" [ref=e2]
106 
107# Use ref to interact
108agent-browser click @e2
109```
110 
111### CSS Selectors
112```bash
113agent-browser click "#submit"
114agent-browser fill ".email-input" "[email protected]"
115```
116 
117### Semantic Locators
118```bash
119agent-browser find role button click --name "Submit"
120agent-browser find label "Email" fill "[email protected]"
121agent-browser find testid "login-btn" click
122```
123 
124## Examples
125 
126### Login Flow
127```bash
128agent-browser open https://example.com/login
129agent-browser snapshot -i
130agent-browser fill @e2 "[email protected]"
131agent-browser fill @e3 "password123"
132agent-browser click @e4
133agent-browser wait --url "**/dashboard"
134```
135 
136### Form Submission
137```bash
138agent-browser open https://example.com/contact
139agent-browser snapshot -i
140agent-browser fill @e1 "John Doe"
141agent-browser fill @e2 "[email protected]"
142agent-browser fill @e3 "Hello, this is my message"
143agent-browser click @e4
144agent-browser wait --text "Thank you"
145```
146 
147### Data Extraction
148```bash
149agent-browser open https://example.com/products
150agent-browser snapshot -i
151# Iterate through product refs
152agent-browser get text @e1 # Product name
153agent-browser get text @e2 # Price
154agent-browser get attr @e3 href # Link
155```
156 
157### Multi-Session (Swarm)
158```bash
159# Session 1: Navigator
160agent-browser --session nav open https://example.com
161agent-browser --session nav state save auth.json
162 
163# Session 2: Scraper (uses same auth)
164agent-browser --session scrape state load auth.json
165agent-browser --session scrape open https://example.com/data
166agent-browser --session scrape snapshot -i
167```
168 
169## Integration with Claude Flow
170 
171### MCP Tools
172All browser operations are available as MCP tools with `browser/` prefix:
173- `browser/open`
174- `browser/snapshot`
175- `browser/click`
176- `browser/fill`
177- `browser/screenshot`
178- etc.
179 
180### Memory Integration
181```bash
182# Store successful patterns
183npx @claude-flow/cli memory store --namespace browser-patterns --key "login-flow" --value "snapshot->fill->click->wait"
184 
185# Retrieve before similar task
186npx @claude-flow/cli memory search --query "login automation"
187```
188 
189### Hooks
190```bash
191# Pre-browse hook (get context)
192npx @claude-flow/cli hooks pre-edit --file "browser-task.ts"
193 
194# Post-browse hook (record success)
195npx @claude-flow/cli hooks post-task --task-id "browse-1" --success true
196```
197 
198## Tips
199 
2001. **Always use snapshots** - They're optimized for AI with refs
2012. **Prefer `-i` flag** - Gets only interactive elements, smaller output
2023. **Use refs, not selectors** - More reliable, deterministic
2034. **Re-snapshot after navigation** - Page state changes
2045. **Use sessions for parallel work** - Each session is isolated
205 

Alternatives

Also in Coding
Code Review ReceptionUse when receiving code review feedback, before implementing suggestions, especially if feedback seems unclear or technically questionable - requires technical rigor and verification, not performative agreement or blind implementationCoding · MITDispatching Parallel AgentsUse when facing 2+ independent tasks that can be worked on without shared state or sequential dependenciesCoding · MITASO AuditWhen the user wants to audit or optimize an App Store or Google Play listing. Also use when the user mentions 'ASO audit,' 'app store optimization,' 'optimize my app listing,' 'improve app visibility,' 'app store ranking,' 'audit my listing,' 'why aren't peoplCoding · MIT.NET Backend Development PatternsMaster C#/.NET backend development patterns for building robust APIs, MCP servers, and enterprise applications. Covers async/await, dependency injection, Entity Framework Core, Dapper, configuration, caching, and testing with xUnit. Use when developing .NET backends, reviewing C# code, or designing API architectures.Coding · MIT