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

dev-browser (Browser Automation)

Browser automation with persistent page state, letting Claude run small incremental scripts to navigate, fill forms, screenshot, and scrape the web.

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

What it does

Spins up a Playwright-backed automation server and lets Claude drive it with short TypeScript scripts. The key idea is persistent page state: pages live on the server between script runs, so login → navigate → fill → verify can be split into separate, verifiable steps.

  • Named pages (client.page("checkout")) with optional viewport sizing
  • getAISnapshot() returns a YAML accessibility tree for element discovery; selectSnapshotRef() clicks/types on refs
  • Screenshots (including full page) and URL/title/body dumps for state inspection
  • Two modes: Standalone (fresh Chromium) and Extension (your existing, already-authenticated Chrome)
  • Guidance for large scrapes via network request capture and paginated API replay instead of DOM scrolling

Who it's for

  • Developers who repeatedly smoke-test web apps
  • Anyone automating admin panels or dashboards behind a login
  • People scraping paginated list pages
  • Anyone working on unfamiliar sites where selectors are unknown

Examples

  1. Authenticated dashboard capture: "Log into our staging site and screenshot the dashboard" → login script → verify state → fullPage screenshot.
  2. Form regression check: fill the checkout form, assert validation messages; on failure the page persists, so a debug screenshot explains what broke.
  3. Bulk data extraction: capture the XHR on page one to learn the API schema, then replay it with page parameters to pull hundreds of records in a single run.

· · · 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/skills-loader-core/src/features/builtin-skills/dev-browser folder from the GitHub repo code-yeongyu/oh-my-openagent into my ~/.claude/skills/code-yeongyu-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 /tmp/oh-my-openagent && mkdir -p ~/.claude/skills && cp -r /tmp/oh-my-openagent/packages/skills-loader-core/src/features/builtin-skills/dev-browser ~/.claude/skills/

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

  1. Open a terminal and clone the repo: git clone https://github.com/code-yeongyu/oh-my-openagent.git
  2. Create the skills folder: mkdir -p ~/.claude/skills
  3. Copy the skill: cp -r oh-my-openagent/packages/skills-loader-core/src/features/builtin-skills/dev-browser ~/.claude/skills/
  4. Install dependencies: cd ~/.claude/skills/dev-browser && npm i, plus npx playwright install chromium if browsers are missing.
  5. Start Claude Code in your project and try: "go to example.com and take a screenshot" — the skill triggers automatically.
  6. To use your logged-in Chrome, install the extension from https://github.com/SawyerHood/dev-browser/releases, run npm run start-extension, and activate the extension until you see "Extension connected".
  7. Note: the doc's snippets assume a skills/dev-browser/ path; adjust commands to wherever you installed it.
View source on GitHub ↗License: NOASSERTION