web-browser — Claude Code skill: drive Chrome over CDP
Hands your agent a real Chrome: page navigation, clicks, form filling, screenshots, console and network inspection. Useful when a live browser beats scraping HTML.
npx skills add mitsuhiko/agent-stuff --skill web-browser -a claude-codeWhat web-browser does
The skill ships a set of scripts that talk to Chrome or Chromium over the Chrome DevTools Protocol. Launch with ./scripts/start.js --headless, then nav.js opens a URL, eval.js runs JavaScript in the active tab, and screenshot.js captures the viewport or the whole document. Mobile presets such as iphone-14 and pixel-7 come from emulate.js; dismiss-cookies.js clears consent banners and pick.js lets you select elements by clicking.
Everything runs against a separate profile under ~/.cache/agent-web/browser/, so your everyday Chrome stays untouched. Headless launches disable extensions — a copied profile still carries cookies and browser state, but extension-based features are gone. If :9222 is already taken by something unknown, startup fails instead of reusing it. Point BROWSER_DEBUG_PORT at another port or BROWSER_BIN at a non-standard Chrome binary when needed.
Background logging of console output, errors and network traffic starts with the browser and lands as JSONL; logs-tail.js dumps or follows it, net-summary.js groups the responses. pick.js needs a visible window, so start without --headless. Switching between headless and headed means stopping the skill browser first with stop.js, otherwise it will not relaunch with the new settings.
What it helps with
- capture a screenshot of a page for a report
- fill in a form and verify the submission
- catch a console error right after a click
- see which requests the frontend fires
- check layout in a mobile viewport
Example prompts for the agent
- Open
https://example.comin headless Chrome and take a full-page screenshot - Run
document.querySelectorAll("a").lengthin the active tab - Emulate
iphone-14, reload the page and show me the network log
How to install web-browser
1Skills CLI (Vercel)
npx skills add mitsuhiko/agent-stuff --skill web-browser -a claude-code2Manually: put the files in place
~/.claude/skills/web-browser/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/web-browser/
1Skills CLI (Vercel)
npx skills add mitsuhiko/agent-stuff --skill web-browser -a codex2Manually: put the files in place
.agents/skills/web-browser/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add mitsuhiko/agent-stuff --skill web-browser -a cursor2Manually: put the files in place
.cursor/skills/web-browser/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install mitsuhiko/agent-stuff web-browser2Manually: put the files in place
.github/skills/web-browser/SKILL.md1Skills CLI (Vercel)
npx skills add mitsuhiko/agent-stuff --skill web-browser -a gemini-cli2Platform CLI
gemini skills install https://github.com/mitsuhiko/agent-stuff --path skills/web-browserManually: put the files in place
.devin/skills/web-browser/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add mitsuhiko/agent-stuff --skill web-browser -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about web-browser
How do I install web-browser in Claude Code?
Run npx skills add mitsuhiko/agent-stuff --skill web-browser -a claude-code; the skill then lives at ~/.claude/skills/web-browser/SKILL.md.
What does the web-browser skill do?
It drives Chrome or Chromium through the Chrome DevTools Protocol: navigation, clicks, JavaScript evaluation, screenshots, device emulation, plus console and network logs.
Why does pick.js not work?
Element picking needs a visible window. Stop the skill browser and run ./scripts/start.js without the --headless flag.
