Claude Skill MartBrowse skillsWhat is a Skill?
 
← Back to list

dev-browser (Browser Automation)

Playwright-based browser automation with persistent page state, driven by small incremental scripts for navigation, form filling, screenshots and scraping.

AutomationIntermediate★ 67,531⑂ 5,507AI score 8/10Last updated: Aug 9, 2026

What it does

This skill runs a local server wrapping Playwright and lets Claude execute short TypeScript scripts to drive a browser. The key idea is that page state survives between script runs — create a named page like client.page("checkout") and the next script reattaches to continue where you left off.

  • Two modes: standalone (fresh Chromium) and extension (attach to your already-logged-in Chrome)
  • getAISnapshot() returns a YAML accessibility tree with [ref=e5] handles, so you can click elements without knowing CSS selectors
  • Screenshots (including full page) plus URL/title/body inspection for state checks
  • Scraping guidance that favors capturing and replaying network requests over DOM scrolling

Who it's for

  • Web developers who repeatedly verify login, form submission, or checkout flows
  • Anyone automating a site whose DOM structure or selectors are unknown
  • Users extracting data from authenticated sites or automating repetitive browser chores

Examples

  1. Local app smoke test: "Open localhost:3000, log in with the test account, and screenshot the dashboard" → login script → state log → tmp/dashboard.png.
  2. Unknown layout: call getAISnapshot() on a news site to list links, then selectSnapshotRef("news", "e8") to click the right article and pull its text.
  3. Paginated scrape: capture the XHR on page one, learn the API schema, then replay the request with different page params and dump everything to JSON.

· · · Install guide · · ·

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the packages/omo-opencode/src/features/builtin-skills/dev-browser folder from the GitHub repo code-yeongyu/oh-my-openagent into my ~/.claude/skills/dev-browser/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/code-yeongyu/oh-my-openagent.git && mkdir -p ~/.claude/skills && cp -r oh-my-openagent/packages/omo-opencode/src/features/builtin-skills/dev-browser ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Confirm Node.js 18+ and npm are installed (node -v).
  2. Clone the repo: git clone https://github.com/code-yeongyu/oh-my-openagent.git
  3. Copy the skill folder: mkdir -p ~/.claude/skills && cp -r oh-my-openagent/packages/omo-opencode/src/features/builtin-skills/dev-browser ~/.claude/skills/
  4. Install dependencies: cd ~/.claude/skills/dev-browser && npm i (add npx playwright install chromium if browsers are missing).
  5. Read references/installation.md inside the skill folder for platform-specific notes such as Windows setup.
  6. Start Claude Code in your project and ask something like "go to example.com and take a screenshot"; the skill launches the server (./skills/dev-browser/server.sh &) and waits for the Ready message.
  7. To drive your existing logged-in Chrome, install the extension from https://github.com/SawyerHood/dev-browser/releases, activate it, and run npm run start-extension.
View source on GitHub ↗License: NOASSERTION