微软官方这个 Skill，把 Playwright 开发的冷知识全串起来了

微软官方出品！这个 Skill 把 Playwright 开发冷知识全串起来了

做浏览器自动化的开发者，几乎没有不知道 Playwright 的。但你可能不知道，Playwright 官方还维护着一个面向 AI 编码 Agent 的 Skill——playwright-dev，专门教你怎么给 Playwright 加 API、加 MCP 工具、写 CLI 命令，以及理解它的底层架构。

这个 Skill 来自 microsoft/playwright 主仓库（你没看错，96k+ stars 的那个官方库），路径在 .claude/skills/playwright-dev/，意味着它是微软工程师自己也在用的内部知识沉淀。

这个 Skill 解决什么问题

如果你有以下场景，这个 Skill 值得一看：

• 想给 Playwright 贡献代码，但不知道从哪下手
• 想给 Playwright 加 MCP 工具或自定义 CLI 命令，不知道怎么接
• 想理解 Playwright 的 client/server/dispatcher 架构
• 搞不定 WebKit/Safari 相关的用户代理字符串更新

Skill 里有 10 个文件，覆盖了从库架构、API 定义、MCP 工具开发，到供应商依赖打包、Bisect 版本追溯等实战场景，每一个都是 Playwright 贡献者会遇到的实际问题。

核心内容速览

• library.md：client/server/dispatcher 结构，protocol 层设计，DEPS 规则
• api.md：如何定义 API 文档、实现 client/server 并加测试
• tools.md：添加 MCP 工具和 CLI 命令的正确姿势
• vendor.md：理解 utilsBundle/coreBundle/babelBundle，搞定 npm 包引入
• trace_viewer 系统指南：24KB 的深度文档，tracing 系统怎么工作的

怎么安装

在 Claude Code 或 Codex 里一行命令搞定：

npx skills add https://github.com/microsoft/playwright --skill playwright-dev

装完问 Claude：「我需要给 Playwright 加一个新的 MCP 工具」，它就会激活这个 Skill，给你完整的实现路径和参考文件。

适用人群

这个 Skill 不是给普通用户看的，是给 Playwright 框架贡献者、浏览器自动化工具开发者、以及想让 AI Agent 更好地操控浏览器的工程师准备的。如果你正在基于 Playwright 做二次开发，或者想让 Claude Code 更精准地操作浏览器页面，这个 Skill 就是为你准备的。

GitHub：https://github.com/microsoft/playwright

GitHub: https://github.com/microsoft/playwright