agentleFS
Sign inStart free
itsnex1sitsnex1s/awesome-claude-skills/skills/agent-browser/SKILL.md

agent-browser

Skill5 starsChanged 10 months agoMITView on GitHub

Automate browser interactions using agent-browser CLI. Use for taking screenshots, testing deployed sites, checking mobile views, form testing, or browser automation tasks.

  • Installs packages

188 other projects use a version of this, 25 of them edited.

Adopted by

Most recently taken up by

Used with

Projects with it also use time-skill, dep-refs and 10 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • Recepay6358Skill

    time-skill

    Display the current time in Pakistan Standard Time (PKT, UTC+5). Use when the user asks for the current time, Pakistan time, or PKT.

    Also in 6 projects that use this

  • betacatslingSkill

    dep-refs

    Use when needs to inspect TypeScript export references in the z-code workspace, list exports from a file, verify whether an export is unused before deletion, investigate who imports a symbol during refactors, or combine pnpm knip unused-export results with pnpm dep:refs symbol-level reference tracing.

    Also in 5 projects that use this

  • betacatslingSkill

    feature-boundary-planner

    Map a ZCode behavior change to current UI surfaces, state owners, protocol commands, persistence, and validation. Use for impact analysis, product-boundary planning, or an implementation handoff grounded in the checked-out source.

    Also in 5 projects that use this

  • nicepkgSkill

    community-led-growth

    Expert in community-led growth (CLG) - leveraging user communities to drive acquisition, retention, and expansion. Covers building developer communities, user groups, ambassador programs, and turning customers into advocates. Knows the difference between community as a feature vs community as a growth engine, and how to measure community ROI. Use when "community-led, CLG, ambassador program, champion program, user community, developer community, word of mouth, user group, " mentioned.

    Also in 5 projects that use this

  • nicepkgSkill

    ph-community-outreach

    Engage Reddit, Indie Hackers, Hacker News and other communities for Product Hunt launches. Use this skill to identify relevant communities, craft appropriate posts, and drive cross-platform engagement without appearing spammy.

    Also in 5 projects that use this

  • Recepay6358Skill

    weather-svg-creator

    Creates an SVG weather card showing the current temperature for Dubai. Writes the SVG to orchestration-workflow/weather.svg and updates orchestration-workflow/output.md.

    Also in 6 projects that use this

  • +3 more from nicepkg

The file

We split this skill into the rules it gives an agent

2 rules. 0 are common, 1 is distinctive, and 1 is very specific to this project.

  • 0

    Common

    Most of the 172 edited versions we read keep these.

  • 1

    Distinctive

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Default viewport is desktop (1280x720)

    line 192
  2. Very specific:

    Use --json flag for machine-readable output

    line 195

“Common” is measured: kept by at least 6 in 10 of the 172 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

agent-browser

Automate browser interactions for testing, screenshots, and web scraping using the agent-browser CLI tool from Vercel Labs.

Installation

npm install -g agent-browser
agent-browser install

Core Workflow (AI-Optimized)

The recommended pattern uses reference-based selection:

# 1. Navigate to page
agent-browser open "https://example.com"

# 2. Get interactive elements with refs
agent-browser snapshot -i

# 3. Interact using refs (@e1, @e2, etc.)
agent-browser click @e2
agent-browser fill @e3 "text"

Commands Reference

Navigation

agent-browser open <url>           # Navigate to URL
agent-browser back                 # Go back
agent-browser forward              # Go forward
agent-browser reload               # Reload page

Snapshot (Get Element Refs)

agent-browser snapshot             # Full accessibility tree
agent-browser snapshot -i          # Interactive elements only
agent-browser snapshot -c          # Compact (remove empty elements)
agent-browser snapshot -d 3        # Limit depth to 3
agent-browser snapshot --json      # JSON output for parsing

Interaction

agent-browser click @e1            # Click by ref
agent-browser click "#submit"      # Click by CSS selector
agent-browser dblclick @e1         # Double-click
agent-browser fill @e3 "text"      # Clear and fill input
agent-browser type @e3 "text"      # Type into element
agent-browser hover @e1            # Hover element
agent-browser focus @e1            # Focus element
agent-browser check @e1            # Check checkbox
agent-browser uncheck @e1          # Uncheck checkbox
agent-browser select @e1 "value"   # Select dropdown option
agent-browser drag @e1 @e2         # Drag and drop
agent-browser upload @e1 file.pdf  # Upload file

Keyboard

agent-browser press Enter          # Press key
agent-browser press Control+a      # Key combination

Scrolling

agent-browser scroll down 500      # Scroll down 500px
agent-browser scroll up 500        # Scroll up 500px
agent-browser scrollintoview @e1   # Scroll element into view

Screenshots & PDF

agent-browser screenshot /tmp/shot.png         # Screenshot
agent-browser screenshot --full /tmp/full.png  # Full page
agent-browser pdf /tmp/page.pdf                # Save as PDF

Get Information

agent-browser get text @e1         # Get element text
agent-browser get html @e1         # Get element HTML
agent-browser get value @e1        # Get input value
agent-browser get attr href @e1    # Get attribute
agent-browser get title            # Get page title
agent-browser get url              # Get current URL

Check State

agent-browser is visible @e1       # Check visibility
agent-browser is enabled @e1       # Check if enabled
agent-browser is checked @e1       # Check if checked

Find Elements (Semantic)

agent-browser find role button click --name "Submit"
agent-browser find text "Click me" click
agent-browser find label "Email" fill "user@test.com"
agent-browser find placeholder "Search..." type "query"

Wait

agent-browser wait @e1             # Wait for element
agent-browser wait 3000            # Wait 3 seconds

Browser Settings

agent-browser set viewport 1920 1080       # Set viewport size
agent-browser set device "iPhone 14"       # Emulate device
agent-browser set media dark               # Dark mode
agent-browser set media reduced-motion     # Reduced motion
agent-browser set offline on               # Offline mode
agent-browser set headers '{"Auth": "Bearer token"}'

Session Management

agent-browser open url --session mytest    # Named session
agent-browser click @e1 --session mytest   # Use same session
agent-browser close --session mytest       # Close session

Debug

agent-browser console               # View console logs
agent-browser errors                # View page errors
agent-browser highlight @e1         # Highlight element
agent-browser --headed open url     # Show browser window

Workflow Examples

Mobile Screenshot

agent-browser open "https://mysite.com" --session mobile
agent-browser set device "iPhone 14" --session mobile
sleep 2
agent-browser screenshot /tmp/mobile.png --session mobile
agent-browser close --session mobile

Form Testing

agent-browser open "https://mysite.com/login" --session test
agent-browser snapshot -i --session test
# Output: textbox "Email" [ref=e1], textbox "Password" [ref=e2], button "Login" [ref=e3]
agent-browser fill @e1 "user@example.com" --session test
agent-browser fill @e2 "password123" --session test
agent-browser click @e3 --session test
agent-browser screenshot /tmp/after-login.png --session test

Full Page Scroll Test

agent-browser open "https://mysite.com" --session scroll
sleep 2
agent-browser scroll down 1000 --session scroll
sleep 1
agent-browser screenshot /tmp/scrolled.png --session scroll

Available Devices

  • iPhone 14 / iPhone 14 Pro Max
  • iPad Pro
  • Pixel 7
  • Galaxy S23

Requirements

  • Node.js 18+
  • Chromium (auto-installed via agent-browser install)

Notes

  • Screenshots are saved as PNG by default
  • Default viewport is desktop (1280x720)
  • Browser runs in headless mode by default (use --headed to show)
  • Sessions are isolated (separate cookies, storage, history)
  • Use --json flag for machine-readable output
  • Refs (@e1, @e2) are deterministic within a page state

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free