Claude Skill Playwright Browser

claude-skill-playwright-browser

English | 繁體中文

Gives Claude Code a browser that runs in the background. Ask in plain language — "screenshot the homepage on mobile", "why does the Submit button do nothing on this page?", "health-check the checkout page" — and Claude opens a browser, clicks around, takes screenshots, runs checks, and hands you the results and files. It never touches the browser you're using, and it works in any project (frontend, backend, even non-Node projects).

What it does

See it in action

All images were produced by this skill against a small demo site.

Examples

Just talk to Claude — no need to mention "Playwright":

Claude sticks to what you asked: ask for a screenshot and you get a screenshot; ask about one bug and it deals with that bug. A full check with a list of recommendations only happens when you ask for a review or a health check.

Claude in Chrome or this skill?

When both would work, Claude asks which one you prefer and suggests one.

Head-to-head test

Same task for both, run by two fresh Claude agents: *"take mobile screenshots of these 3 report pages"* on a logged-in internal admin app (URLs given).

Takeaways: tokens were a wash for a small job like this — most of both totals is each agent's fixed overhead. The skill was twice as fast and produced true phone-width screenshots; Chrome can't emulate widths below ~500 px, so layout bugs that only appear at 390 px are out of its reach. One run each with URLs provided — tasks with more pages or steps should favour the skill further, but that part hasn't been measured.

Install

Requirements: Claude Code, Node.js 18+ (node -v), macOS / Linux / Windows, about 150 MB of disk for Chromium.

1. Clone into a skills directory (the folder must be named playwright-browser)

On Windows the…