playwright-dev
microsoft/playwright
Development guide for extending Playwright with APIs, MCP tools, CLI commands, and vendor dependencies.
What is playwright-dev?
This skill provides structured guidance for contributing to Playwright's codebase. It covers the monorepo structure, library architecture, API development, tooling integration, and dependency management—essential for developers who want to add features or modify the Playwright framework itself.
- Navigate monorepo structure, build, test, and lint commands via CLAUDE.md reference
- Understand client/server/dispatcher architecture and protocol layer design
- Add and modify Playwright APIs with proper client/server implementation and tests
- Develop MCP tools and CLI commands with configuration options
- Manage vendor dependencies, bundling strategies, and npm package vendoring
- Update WebKit/Safari version strings and work with WebView backends
How to install playwright-dev
npx skills add https://github.com/microsoft/playwright --skill playwright-dev- Playwright repository cloned locally
- Node.js and npm installed
- Familiarity with TypeScript and client/server architecture
How to use playwright-dev
- 1.Review CLAUDE.md for monorepo structure and build/test/lint commands
- 2.Consult the relevant detailed guide (api.md, tools.md, vendor.md, etc.) for your task
- 3.Follow the architecture patterns and coding conventions documented
- 4.Implement changes in the appropriate client/server/dispatcher layer
- 5.Add or update tests according to project standards
- 6.Run build, test, and lint commands to validate changes
Use cases
- Adding a new browser automation API to Playwright core
- Implementing a custom MCP tool for agent integration
- Updating vendor dependencies and resolving bundling conflicts
- Debugging regressions by comparing behavior across Playwright versions
- Contributing WebView or Safari-specific features to the project
- Playwright core contributors
- Framework maintainers extending Playwright
- Developers building custom MCP integrations
- Contributors working on browser backend support
playwright-dev FAQ
See CLAUDE.md at the repository root for the complete monorepo layout, build/test/lint commands, and coding conventions.
Follow the api.md guide, which covers defining API docs, implementing both client and server sides, and adding corresponding tests.
These are bundling strategies for vendor dependencies. See vendor.md for details on when to use each and how to add vendored npm packages.
Use the bisect-published-versions.md guide to reproduce issues side-by-side from npm and diff node_modules/playwright/lib/ between versions.
The dashboard powers the 'playwright cli show' command. See dashboard.md for guidance on working with its UI.
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.