Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

playwright-dev — Claude Code skill: what it does, how to install

Explains how to develop Playwright: add APIs, MCP tools, CLI commands, and manage vendor dependencies.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add microsoft/playwright --skill playwright-dev -a claude-code
Open on GitHub

What playwright-dev does

The skill includes guides on library architecture (client/server/dispatcher structure, protocol layer, DEPS rules), adding and modifying APIs (doc definitions, client/server implementation, tests), creating MCP tools and CLI commands, and working with vendor dependencies (utilsBundle, coreBundle, babelBundle, DEPS.list, check_deps).

Inside: instructions for updating the Safari version string in WebKit user-agent, working with the WebView backend for iOS Safari (provisional-target pause/resume, upstream vs Playwright patches, local and CI test setup), bisecting regressions across published npm versions, and the dashboard behind playwright cli show.

Useful for developers planning to modify Playwright internals or add new capabilities to the monorepo.

What it helps with

  • add a new API method to Playwright with docs and tests
  • create an MCP tool or CLI command for the project
  • update a vendored dependency and rebuild the bundle
  • locate a regression between versions by bisecting published releases
  • understand the client/server/dispatcher architecture and DEPS rules

Example prompts for the agent

  • Show me how to add a new API method in Playwright following the playwright-dev guide
  • Explain the MCP tools structure in Playwright according to the skill
  • How do I update the Safari version string in WebKit per the skill instructions?

How to install playwright-dev

1Skills CLI (Vercel)

npx skills add microsoft/playwright --skill playwright-dev -a claude-code

2Manually: put the files in place

~/.claude/skills/playwright-dev/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/playwright-dev/

Similar

dogfood Teknium (teknium1), Hermes Agent A skill for exploratory QA of a web app: it walks the pages, captures console errors and screenshots, then writes a bug report. Claude Code CX Codex Cursor +1 6,400installs react-doctor millionco Audits React codebases for architecture, accessibility, and rendering issues. Computes a health score from 0 to 100 and helps patch regressions. Claude Code CX Codex Cursor +1 19,000installs orca-emulator stablyai Controls booted iOS Simulators inside Orca with a live device view. Handy for running gestures, hardware buttons, accessibility tree checks, and UI verification. Claude Code CX Codex Cursor +1 5,800installs orca-emulator-android stablyai Lets the agent drive an adb-connected Android emulator or phone from inside Orca: taps, swipes, APK install, logcat. Handy for running a flow on a real device. Claude Code CX Codex Cursor +1 5,600installs accessibility web-quality-skills This skill audits a rendered page for accessibility and points to the components behind each failure. Useful when a site has to meet WCAG 2.2 or survive a keyboard and screen reader pass. Claude Code CX Codex Cursor +1 63,900installs chrome-devtools ChromeDevTools This skill connects Chrome DevTools through MCP for page debugging, browser automation, performance checks, and network inspection. Claude Code CX Codex Cursor +1 8,600installs improve-codebase-architecture Matt Pocock This skill scans a codebase for architectural friction, then builds a visual HTML report with refactoring candidates. Use it before a deeper architecture review. Claude Code 1,163,035installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about playwright-dev

How to install playwright-dev in Claude Code?

Run npx skills add microsoft/playwright --skill playwright-dev -a claude-code, and the skill will appear in ~/.claude/skills/playwright-dev/SKILL.md.

What does the playwright-dev skill do?

It explains how to develop Playwright: add APIs, MCP tools, CLI commands, manage vendor dependencies, and update components like WebKit.

What are utilsBundle, coreBundle and babelBundle in Playwright?

They are Playwright's vendored dependency bundles. The skill shows how to add npm packages to them, manage DEPS.list, and run check_deps for validation.

Source text

SKILL.md · Apache-2.0 
---
name: playwright-dev
description: Explains how to develop Playwright - add APIs, MCP tools, CLI commands, and vendor dependencies.
---

# Playwright Development Guide

See [AGENTS.md](../../../AGENTS.md) for monorepo structure, build/test/lint commands, and coding conventions.

## Detailed Guides

- [Library Architecture](library.md) — client/server/dispatcher structure, protocol layer, DEPS rules
- [Adding and Modifying APIs](api.md) — define API docs, implement client/server, add tests
- [MCP Tools and CLI Commands](tools.md) — add MCP tools, CLI commands, config options
- [Vendor Dependencies & Bundling](vendor.md) — utilsBundle, coreBundle, babelBundle; adding vendored npm packages; DEPS.list; `check_deps`
- [Updating WebKit Safari Version](webkit-safari-version.md) — update the Safari version string in the WebKit user-agent
- [WebView (iOS Safari) Backend](webview.md) — `webkit/webview/` against stock Mobile Safari; provisional-target pause/resume; what's upstream vs Playwright patches; local + CI test setup
- [Bisecting Across Published Versions](bisect-published-versions.md) — reproduce regressions side-by-side from npm and diff `node_modules/playwright/lib/` between versions
- [Dashboard](dashboard.md) - the UI powering the "playwright cli show" command, and how to work on it

© microsoft · Apache-2.0 · microsoft/playwright

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor