dev-browser — Claude Code skill: browser automation
Control a real Chrome with short Puppeteer scripts. Named pages persist across runs, so you can pick up where you left off.
npx skills add SawyerHood/dev-browser --skill dev-browser -a claude-codeWhat dev-browser does
dev-browser is a CLI for controlling Chrome via Puppeteer scripts. It runs as a single daemon that keeps the browser open and lets you use named pages. Each page persists between calls, so if you log into a site, the browser remembers that state next time.
Install via npm install -g dev-browser, then call scripts directly: navigate to a site, click elements, fill forms, take a screenshot, extract data. Scripts are JavaScript — you call methods like page.goto(), page.click(), page.snapshot(). The last expression in the script is returned as output.
Be aware that page.click() does not wait for a load — use waitForSelector() before clicking if needed. Page names are tied to each browser separately (headless and headed are different Chrome instances), and element refs (refs) reset on navigation, so you need to call snapshot() again.
What it helps with
- fill out a form on a website and submit it
- scrape data from a page and return the result
- click through a sequence of buttons to test an interface
- log in and preserve the session for future runs
- take a screenshot or PDF of a page
Example prompts for the agent
- Open example.com, take a screenshot, and show me the result
- Log into my GitHub account and verify I'm logged in
- Click the Download Report button and give me the file URL
How to install dev-browser
1Skills CLI (Vercel)
npx skills add SawyerHood/dev-browser --skill dev-browser -a claude-code2Manually: put the files in place
~/.claude/skills/dev-browser/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/dev-browser/
1Skills CLI (Vercel)
npx skills add SawyerHood/dev-browser --skill dev-browser -a codex2Manually: put the files in place
.agents/skills/dev-browser/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add SawyerHood/dev-browser --skill dev-browser -a cursor2Manually: put the files in place
.cursor/skills/dev-browser/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install SawyerHood/dev-browser dev-browser2Manually: put the files in place
.github/skills/dev-browser/SKILL.md1Skills CLI (Vercel)
npx skills add SawyerHood/dev-browser --skill dev-browser -a gemini-cli2Platform CLI
gemini skills install https://github.com/SawyerHood/dev-browser --path skills/dev-browserManually: put the files in place
.devin/skills/dev-browser/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add SawyerHood/dev-browser --skill dev-browser -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Similar
Questions about dev-browser
How do I install dev-browser in Claude Code?
Run npx skills add SawyerHood/dev-browser --skill dev-browser -a claude-code. The skill installs to ~/.claude/skills/dev-browser/. After that, you can use dev-browser commands in Claude Code.
What does dev-browser do?
It automates a browser. You write short JavaScript scripts that control Chrome: open sites, click elements, fill forms, extract data. Browser state persists between calls.
Why do element refs reset?
Refs are tied to the current page state. When you navigate to a new URL via page.goto(), the page changes and all old refs become invalid. Call page.snapshot() again to get fresh refs.
Source text
SKILL.md · MIT
---
name: dev-browser
description: Browser automation with persistent named pages via the dev-browser CLI. Use when users ask to navigate websites, fill forms, take screenshots, extract web data, test web apps, log into sites, or automate browser workflows. Trigger phrases include "go to [url]", "click on", "fill out the form", "take a screenshot", "scrape", "automate", "test the website", "log into", "open the browser", or any browser interaction request.
---
# dev-browser
CLI for controlling a real Chrome with short Puppeteer scripts. One warm daemon; named pages persist between runs.
```bash
npm install -g dev-browser # bun add -g dev-browser works too; the first run downloads the binary if the install script was blocked
dev-browser install # only if the first run says "No Chrome found"
```
Run `dev-browser --help` (full guide; `dev-browser help <topic>` for one section) before non-trivial work. Quick start:
```bash
dev-browser <<'EOF'
const page = await browser.getPage("main"); // named page persists across runs
await page.goto("https://example.com"); // default waitUntil: domcontentloaded
await page.snapshot({ interactive: true }) // ARIA tree with refs; last expression is printed
EOF
dev-browser -e 'const p = await browser.getPage("main"); await p.click("ref/e6"); await p.waitForLoad(); p.url()'
```
Gotchas: end lines with semicolons (a line starting with `(` continues the previous one); return an object as
`({ a, b })`; `page.click` never waits (use `waitForSelector` first); page names are per browser (`--headless` and
headed are separate Chromes and profiles); refs reset on navigation — re-snapshot; file paths resolve against your cwd
(uploadFile, screenshot/pdf `path`); do not run parallel dev-browser calls against the same named page.
© SawyerHood · MIT · SawyerHood/dev-browser
