Browser Skill for Claude

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

Navigation

| 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

Login Flow

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