mikekelly/browsing-the-web

Overview

This skill enables efficient browser automation for agents, designed around accessibility-based workflows and ref-based element selection. It provides intuitive commands to navigate pages, inspect interactive elements, fill forms, click buttons, capture screenshots, record video, and scrape data. Use it whenever an agent must interact with live web pages or perform repeatable web tasks.

How this skill works

The skill drives a headless or headed browser via a CLI that returns accessibility snapshots with stable refs (e.g., @e1, @e2). Typical workflow: open a URL, snapshot to discover refs, interact using those refs, and re-snapshot after navigation or DOM changes. It also exposes semantic locators, wait primitives, network controls, and JSON output for programmatic parsing.

When to use it

• Automating form submissions and login flows during agent tasks
• Scraping page content or structured data using accessibility refs
• Taking screenshots, PDFs, or video recordings of page interactions
• Filling inputs, clicking buttons, and navigating multi-step UIs
• Testing or demoing sites where repeatable browser actions are needed

Best practices

• Always run snapshot -i to get interactive elements and stable refs before interacting
• Re-snapshot after navigation or major DOM updates to refresh refs
• Use wait commands (element, URL, or network idle) to avoid race conditions
• Prefer semantic find commands when refs are unstable or for clearer intent
• Save and load session state (cookies/storage) for authenticated flows

Example use cases

• Log into a web app, save authenticated state, and perform dashboard checks
• Scrape product titles and prices by snapshotting and get text/@refs
• Automate a multi-step form: fill fields, submit, wait for success, capture screenshot
• Record a reproducible demo: explore, start recording, perform clicks, stop and save
• Run parallel sessions to compare different pages or user states