playwright-dev
microsoft/playwright
Guide for contributing to Playwright: add APIs, MCP tools, CLI commands, and manage vendor dependencies.
What is playwright-dev?
This skill provides detailed documentation for developing and extending Playwright itself. Use it when you need to add new APIs, implement MCP tools, create CLI commands, manage vendor dependencies, or understand Playwright's internal architecture.
- Navigate monorepo structure, build/test/lint commands, and coding conventions
- Define and implement new APIs with client/server architecture and protocol layer
- Add MCP tools and CLI commands with configuration options
- Manage vendor dependencies, bundling, and npm package vendoring
- Update WebKit Safari versions and maintain WebView backend compatibility
- Bisect regressions across published versions for debugging
How to install playwright-dev
npx skills add https://github.com/microsoft/playwright --skill playwright-dev- Playwright monorepo cloned locally
- Node.js and npm installed
- Familiarity with client/server architecture patterns
How to use playwright-dev
- 1.Review CLAUDE.md for monorepo structure and build commands
- 2.Consult the relevant detailed guide (api.md, tools.md, vendor.md, etc.) for your task
- 3.Follow the architecture patterns and DEPS rules documented in library.md
- 4.Implement your changes and run the test/lint commands from CLAUDE.md
- 5.For vendor changes, update DEPS.list and run check_deps validation
Use cases
- Adding a new browser automation API to Playwright core
- Implementing a new MCP tool or CLI command for the Playwright CLI
- Vendoring a new npm package and updating DEPS.list
- Updating Safari version strings in WebKit user-agent
- Debugging a regression by comparing behavior across published versions
- Playwright core contributors
- Library maintainers extending Playwright APIs
- DevOps engineers managing Playwright dependencies
- Contributors implementing MCP tools or CLI features
playwright-dev FAQ
See CLAUDE.md at the repository root for monorepo structure, build/test/lint commands, and coding conventions.
Follow the guide in api.md, which covers defining API docs, implementing client/server components, and adding tests.
Use tools.md as your reference for adding MCP tools, CLI commands, and configuration options.
Consult vendor.md for guidance on utilsBundle, coreBundle, babelBundle, updating DEPS.list, and running check_deps.
See bisect-published-versions.md for instructions on reproducing regressions side-by-side from npm and diffing node_modules.
Full instructions (SKILL.md)
Source of truth, from microsoft/playwright.
name: playwright-dev description: Explains how to develop Playwright - add APIs, MCP tools, CLI commands, and vendor dependencies.
Playwright Development Guide
See CLAUDE.md for monorepo structure, build/test/lint commands, and coding conventions.
Detailed Guides
- Library Architecture — client/server/dispatcher structure, protocol layer, DEPS rules
- Adding and Modifying APIs — define API docs, implement client/server, add tests
- MCP Tools and CLI Commands — add MCP tools, CLI commands, config options
- Vendor Dependencies & Bundling — utilsBundle, coreBundle, babelBundle; adding vendored npm packages; DEPS.list;
check_deps - Updating WebKit Safari Version — update the Safari version string in the WebKit user-agent
- WebView (iOS Safari) Backend —
webkit/webview/against stock Mobile Safari; provisional-target pause/resume; what's upstream vs Playwright patches; local + CI test setup - Bisecting Across Published Versions — reproduce regressions side-by-side from npm and diff
node_modules/playwright/lib/between versions - Dashboard - the UI powering the "playwright cli show" command, and how to work on it
Related skills
More from microsoft/playwright and the wider catalog.
accessibility
Ensure VS Code features are accessible to all users with keyboard navigation, screen reader support, and ARIA annotations.
agent-sessions-layout
Agents workbench layout — covers the fixed layout structure, grid configuration, part visibility, editor modal, titlebar, sidebar footer, and implementation requirements. Use when implementing features or fixing issues in the Agents workbench layout.
author-contributions
Identify all files a specific author contributed to on a branch vs upstream, tracing code through renames.
azure-pipelines
Queue, monitor, and validate Azure DevOps pipeline changes for VS Code without waiting for full CI runs.
fix-errors
Fix unhandled errors by tracing data flow upward to producers, not masking crashes at consumer sites.
hygiene
Enforce VS Code's code quality standards: unicode, quotes, headers, indentation, formatting, and linting.