Web browser automation with AI-optimized snapshots

Browser Automation Skill

by ruvnet · MIT license · ★ 94,702 on GitHub · v1.0.0 · updated Sep 22

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

---
name: browser
description: Web browser automation with AI-optimized snapshots for claude-flow agents
version: 1.0.0
triggers:
  - /browser
  - browse
  - web automation
  - scrape
  - navigate
  - screenshot
tools:
  - browser/open
  - browser/snapshot
  - browser/click
  - browser/fill
  - browser/screenshot
  - browser/close

Overview

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

Manual install (npx, ZIP)

Claude Codenpx skills add ruvnet/RuView --skill browser -g -a claude-code

Claude Code (manual)

mkdir -p ~/.claude/skills && curl -sL https://codeload.github.com/ruvnet/RuView/tar.gz/33a9e90896a6 \
  | tar -xz -C ~/.claude/skills --strip-components=3 RuView-33a9e90896a6/.claude/skills/browser

Windows (PowerShell)

New-Item -ItemType Directory -Force "$HOME\.claude\skills" | Out-Null; Invoke-WebRequest "https://m.agentalley.io/zip/81fe85bb99dd02aea3a5/browser.zip" -OutFile "$env:TEMP\browser.zip"; Expand-Archive "$env:TEMP\browser.zip" -DestinationPath "$HOME\.claude\skills" -Force

Claude.ai / desktopDownload the ZIP and upload it under Settings → Capabilities → Skills.

Codex, Cursor, other agentsPoint them at SKILL.md. The other files are plain text.

Connects with Agent Alley MCP · agentalley.io/mcp

Files included

SKILL.md5.2 KB

Read the files here

ruvnet/33a9e901 file

SKILL.md5.2 KB

SKILL.md

Show the full text205 lines

browser/SKILL.md205 lines · 5.2 KB · 33a9e90

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

# 1. Navigate to page
agent-browser open <url>

# 2. Get accessibility tree with element refs
agent-browser snapshot -i    # -i = interactive elements only

# 3. Interact using refs from snapshot
agent-browser click @e2
agent-browser fill @e3 "text"

# 4. Re-snapshot after page changes
agent-browser snapshot -i

Quick Reference

Command	Description
`open <url>`	Navigate to URL
`back`	Go back
`forward`	Go forward
`reload`	Reload page
`close`	Close browser

Snapshots (AI-Optimized)

Command	Description
`snapshot`	Full accessibility tree
`snapshot -i`	Interactive elements only (buttons, links, inputs)
`snapshot -c`	Compact (remove empty elements)
`snapshot -d 3`	Limit depth to 3 levels
`screenshot [path]`	Capture screenshot (base64 if no path)

Interaction

Command	Description
`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

Command	Description
`get text <sel>`	Get text content
`get html <sel>`	Get innerHTML
`get value <sel>`	Get input value
`get attr <sel> <attr>`	Get attribute
`get title`	Get page title
`get url`	Get current URL

Wait

Command	Description
`wait <selector>`	Wait for element
`wait <ms>`	Wait milliseconds
`wait --text "text"`	Wait for text
`wait --url "pattern"`	Wait for URL
`wait --load networkidle`	Wait for load state

Sessions

Command	Description
`--session <name>`	Use isolated session
`session list`	List active sessions

Selectors

Element Refs (Recommended)

# Get refs from snapshot
agent-browser snapshot -i
# Output: button "Submit" [ref=e2]

# Use ref to interact
agent-browser click @e2

CSS Selectors

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

Semantic Locators

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

Examples

agent-browser open https://example.com/login
agent-browser snapshot -i
agent-browser fill @e2 "[email protected]"
agent-browser fill @e3 "password123"
agent-browser click @e4
agent-browser wait --url "**/dashboard"

Form Submission

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

Data Extraction

agent-browser open https://example.com/products
agent-browser snapshot -i
# Iterate through product refs
agent-browser get text @e1  # Product name
agent-browser get text @e2  # Price
agent-browser get attr @e3 href  # Link

Multi-Session (Swarm)

# Session 1: Navigator
agent-browser --session nav open https://example.com
agent-browser --session nav state save auth.json

# Session 2: Scraper (uses same auth)
agent-browser --session scrape state load auth.json
agent-browser --session scrape open https://example.com/data
agent-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

# Store successful patterns
npx @claude-flow/cli memory store --namespace browser-patterns --key "login-flow" --value "snapshot->fill->click->wait"

# Retrieve before similar task
npx @claude-flow/cli memory search --query "login automation"

Hooks

# 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

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

1	---
2	name: browser
3	description: Web browser automation with AI-optimized snapshots for claude-flow agents
4	version: 1.0.0
5	triggers:
6	- /browser
7	- browse
8	- web automation
9	- scrape
10	- navigate
11	- screenshot
12	tools:
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
23	Web 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
29	agent-browser open <url>
30
31	# 2. Get accessibility tree with element refs
32	agent-browser snapshot -i # -i = interactive elements only
33
34	# 3. Interact using refs from snapshot
35	agent-browser click @e2
36	agent-browser fill @e3 "text"
37
38	# 4. Re-snapshot after page changes
39	agent-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
104	agent-browser snapshot -i
105	# Output: button "Submit" [ref=e2]
106
107	# Use ref to interact
108	agent-browser click @e2
109	```
110
111	### CSS Selectors
112	```bash
113	agent-browser click "#submit"
114	agent-browser fill ".email-input" "[email protected]"
115	```
116
117	### Semantic Locators
118	```bash
119	agent-browser find role button click --name "Submit"
120	agent-browser find label "Email" fill "[email protected]"
121	agent-browser find testid "login-btn" click
122	```
123
124	## Examples
125
126	### Login Flow
127	```bash
128	agent-browser open https://example.com/login
129	agent-browser snapshot -i
130	agent-browser fill @e2 "[email protected]"
131	agent-browser fill @e3 "password123"
132	agent-browser click @e4
133	agent-browser wait --url "**/dashboard"
134	```
135
136	### Form Submission
137	```bash
138	agent-browser open https://example.com/contact
139	agent-browser snapshot -i
140	agent-browser fill @e1 "John Doe"
141	agent-browser fill @e2 "[email protected]"
142	agent-browser fill @e3 "Hello, this is my message"
143	agent-browser click @e4
144	agent-browser wait --text "Thank you"
145	```
146
147	### Data Extraction
148	```bash
149	agent-browser open https://example.com/products
150	agent-browser snapshot -i
151	# Iterate through product refs
152	agent-browser get text @e1 # Product name
153	agent-browser get text @e2 # Price
154	agent-browser get attr @e3 href # Link
155	```
156
157	### Multi-Session (Swarm)
158	```bash
159	# Session 1: Navigator
160	agent-browser --session nav open https://example.com
161	agent-browser --session nav state save auth.json
162
163	# Session 2: Scraper (uses same auth)
164	agent-browser --session scrape state load auth.json
165	agent-browser --session scrape open https://example.com/data
166	agent-browser --session scrape snapshot -i
167	```
168
169	## Integration with Claude Flow
170
171	### MCP Tools
172	All 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
183	npx @claude-flow/cli memory store --namespace browser-patterns --key "login-flow" --value "snapshot->fill->click->wait"
184
185	# Retrieve before similar task
186	npx @claude-flow/cli memory search --query "login automation"
187	```
188
189	### Hooks
190	```bash
191	# Pre-browse hook (get context)
192	npx @claude-flow/cli hooks pre-edit --file "browser-task.ts"
193
194	# Post-browse hook (record success)
195	npx @claude-flow/cli hooks post-task --task-id "browse-1" --success true
196	```
197
198	## Tips
199
200	1. Always use snapshots - They're optimized for AI with refs
201	2. Prefer `-i` flag - Gets only interactive elements, smaller output
202	3. Use refs, not selectors - More reliable, deterministic
203	4. Re-snapshot after navigation - Page state changes
204	5. Use sessions for parallel work - Each session is isolated
205