浏览器自动化 MCP 推荐

确保 UI 功能在桌面与移动端保持一致、响应式行为，并具备移动端 Playwright E2E 覆盖。在实现、规划、审查或测试任何新功能、页面、组件、工作流、表单、对话框、侧边栏、导航、仪表盘或可视化 UI 变更时使用；只要涉及前端或用户可见 UI，即使用户只提到桌面或只说“新功能”，此技能也必须运行。

前端/Web UI/UX/视觉类工作必须使用：构建、样式设计、页面或组件重设计、React 环境搭建、性能审计、视觉 QA、品味与打磨。内含四套规则：design taste 路由器与品牌参考；perfection（Playwright/Chromium、Lighthouse、Core Web Vitals）；ui-ux-db 配色/字体/规范；designpowers 用户画像/无障碍/评审/交付；以及仅用 curl 的 lazyweb 真实应用截屏研究，用于确定设计方向。触发词：frontend、UI、UX、design、redesign、styling、layout、animation、motion、premium、luxury、minimal、brutalist、Awwwards、DESIGN.md、mockup、React、Lighthouse、accessibility、WCAG、Core Web Vitals、looks generic、make it pretty、like X brand、lazyweb、design research。

当被要求对课程的 notebook 与代码样例做验证、测试、冒烟测试或运行（针对真实的 Microsoft Foundry / Azure OpenAI 配置）时使用。涵盖环境准备（.env、az login、依赖包）、scripts/validate-notebooks.ps1 运行器、PASS/FAIL 结果解读，以及哪些课程需要额外资源（Azure AI Search、GitHub MCP、Foundry Local、Playwright）。

当被要求对课程的 notebook 与代码样例做验证、测试、冒烟测试或运行（针对真实的 Microsoft Foundry / Azure OpenAI 配置）时使用。涵盖环境准备（.env、az login、依赖包）、scripts/validate-notebooks.ps1 运行器、PASS/FAIL 结果解读，以及哪些课程需要额外资源（Azure AI Search、GitHub MCP、Foundry Local、Playwright）。

在分析 React DevTools Profiler 导出（含 "dataForRoots"/"commitData" 的 .json）时使用——重渲染风暴、commit 扇出、“这个组件为何渲染”、send/interaction 渲染开销。不用于 Chrome Performance trace（其含 "traceEvents"——改用 electron-profile）。

当开发者要为 Opik 的某个功能、页面或分支添加、编写或创建端到端测试时使用——例如「为实验对比页添加 e2e 测试」「为刚做的功能写测试」「这个分支的 e2e 测试」「给数据集条目流程加测试」。在 tests_end_to_end/e2e/ 中跑完整个循环——分析功能与前端代码、用 Playwright MCP 探索真实 UI、编写 Page Object Model + spec，并在本地运行直到通过。

辅助数据库测试相关操作，属于 Test Automation 的自动激活 skill。在编写或运行测试时使用。触发词：database test helper、database helper、database。

通过 Apify actor 抓取社交平台、商业数据与电商内容——Instagram、LinkedIn、TikTok、YouTube、Facebook、Google Maps、Amazon 及通用网页爬取——并在代码中过滤。适用场景：抓取 Instagram/LinkedIn/TikTok/YouTube/Facebook、Google Maps 销售线索、Amazon 评论、商业智能、多平台社媒监听、竞品分析、线索生成、社媒监控、Apify actor、网页爬取、提取联系人。不适用于 X/Twitter 操作（用 _X）、四级代理递进式抓取（用 BrightData）、真实 Chrome 反爬绕过与 computer use（用 Interceptor）。

在为 Shiny for Python (py-shiny) 应用编写或运行端到端测试时使用——在 pytest 下启动应用、定位并断言 UI 组件（输入、输出、卡片、导航集）、用 Playwright 模拟用户交互，或当你想对 Shiny 渲染的 HTML 手写 CSS 选择器、原始 Playwright 定位器或 sleep() 等待时

对当前分支功能做完整的 UI 调查。枚举每个视图与状态（空态、有数据、加载、错误、每个对话框/菜单/面板、响应式断点、浅色+暗色+RTL），用内置 Playwright 工装捕获，汇总为带全局明暗切换滑杆的单图 HTML 走查，随后跑两轮审查：视觉/一致性（对齐、间距、专业感、明暗一致、对比度、截断）与 UX/易用性（流程、可发现性、可供性、空态/错误态、预期）。当被要求做 UI 走查、截图审查、设计或 QA 巡检、「找出可以更易用/更好的地方」或前端工作合并前使用。加 --fix 自动应用安全的前端修复并重新捕获；--theme 限定主题；--no-rtl 跳过 RTL。

判定新测试是否值得存在并强制其高效，保护 CI 不被低价值测试堆爆。在新增或大幅修改任何 pytest、Jest、Playwright 测试之前——即 agent 或工程师准备为新功能、bug 修复、PR 写测试时使用。前置两道门槛：价值门槛（每个测试必须能捕获现有测试未覆盖的真实回归；通过公共接口测行为而非实现细节；近似重复折叠为参数化用例）与效率门槛（确定性、隔离、快；选最便宜的测试层级；用 Django TestCase 而非 TransactionTestCase；不许 sleep、不许真实联网）。含"不要写它"决策树。修复既有 flaky 测试用 /fixing-flaky-tests；若本门槛判定需要 Playwright 测试，用 /playwright-test 处理写法。

在创建、修改、修复或评审测试时使用；在添加 mock、fake、断言、单元测试、PG 集成测试、前端组件测试或 Playwright e2e 测试时使用；也在测试失败后改动测试时使用。

本 monorepo 的测试实践——在单元与端到端测试之间取舍、测试文件位置、tsconfig.test.json 的角色、如何驱动 Playwright、如何编写/适配 UI/端到端测试，以及该用哪个测试运行器（vitest 还是 jest）。当用户要求添加、编写或扩展测试、补充覆盖率、创建测试文件、在新包里搭建测试、提到 vitest/jest，或引用既有 *.test.ts 文件时，必须先调用本技能再做任何代码搜索或文件读取。同等适用于单元测试与端到端/UI 测试——后者会路由到 Playwright-MCP 优先的探索流程，与常规代码搜索工作流不同。

通过驱动内置浏览器从实站提取完整品牌套件。当品牌提取项目带着浏览器标签中的站点打开，或用户要求「提取品牌」「拉取 <url> 的品牌」「从这个站点获取配色/字体/Logo」，或基于参考网站构建品牌/设计系统时使用。与 agent-browser 工具配合测量，并在反爬墙拦截页面时暂停等待用户处理。

为 Langflow 编写并审查 Playwright E2E 测试。当用户要求编写、修复或审查 E2E 测试、spec 文件、Playwright 测试或覆盖完整 UI 的集成测试时触发。修改 data-testid 属性、tests/utils/ 中的测试辅助函数或 fixture 配置时同样触发。

将 Mux 移动端（Expo web/native）连接到隔离的开发服务器沙箱，具备确定性端口设置、后端配对与 Chrome MCP 交互。在针对沙箱化 Mux 后端实现或验证移动端功能时使用

在 orchestration cluster webapp 中编写、修改或调试 Playwright 测试时使用——集成测试、视觉回归或无障碍测试；涉及 MSW mock、Page Object Model 或 axe-core。测试目录：webapp/client/apps/orchestration-cluster-webapp/test/。

用 Declarative Automation Bundles 部署 Databricks 作业与数据管道。用于跨环境部署作业、管理部署或搭建部署自动化。触发语如 “databricks deploy”、“asset bundles”、“databricks deployment”、“deploy to production”、“bundle deploy”。

在新增或运行测试、检查快照、于 Bun 测试与 Playwright 之间做选择、运行 lint/format/typecheck，或决定某次改动的验证范围时使用。

针对 Windows 原生桌面应用（WPF、WinForms、Win32/MFC、Qt）的 E2E 测试，使用 pywinauto 和 Windows UI Automation。

使用 Vitest 浏览器模式、Playwright 与 @self/tootils 测试工具，为 Gradio 前端的 Svelte 组件编写全面的、行为驱动的单元测试。

用 Playwright 录制精致的 UI 演示视频。当用户要求制作 Web 应用的演示、走查、屏幕录制或教学视频时使用。输出带有可见光标、节奏自然、观感专业的 WebM 视频。

React 组件测试：React Testing Library、Vitest/Jest、用于网络 Mock 的 MSW、axe 可访问性断言，以及组件测试与 Playwright/Cypress 端到端测试的取舍边界。在编写或修复 React 组件、hooks 或页面测试时使用。

仅用于 Laravel 项目中的 Pest PHP 测试。凡涉及编写、修改、修复或重构测试时触发——包括修复因代码改动而失败的测试、添加断言、将 PHPUnit 转换为 Pest、添加数据集和 TDD 流程。用户询问如何用 Pest 编写某物、提到测试文件或目录(tests/Feature、tests/Unit、tests/Browser),或需要浏览器测试、多页 JS 错误冒烟测试、架构测试时激活。涵盖:test()/it()/expect() 语法、数据集、mock、浏览器测试(visit/click/fill)、冒烟测试、arch()、Livewire 组件测试、RefreshDatabase 及 Pest 4 全部特性。不用于工厂、种子、迁移、控制器、模型或非测试 PHP 代码。

工程团队技能包的索引，支持 Claude Code、Codex、Gemini CLI、Cursor、OpenClaw 及另外 6 种工具。涵盖架构、前端、后端、QA、DevOps、安全、AI/ML、数据工程、Playwright、Stripe、AWS、MS365（仅 stdlib Python 工具）。用于浏览或选择工程团队角色技能——只加载所需的单个专家 SKILL.md，切勿批量加载整个技能包。

Playwright 端到端测试模式、Page Object Model、配置、CI/CD 集成、测试产物管理与不稳定测试应对策略。

React 组件测试：React Testing Library、Vitest/Jest、用 MSW 做网络 mock、基于 axe 的无障碍断言，以及组件测试与 Playwright/Cypress 端到端测试之间的取舍边界。当编写或修复 React 组件、hook 或页面的测试时使用。

将 PDF 转换为单个自包含、可读性好的 HTML 文件，保留图片、表格、图表和阅读顺序——还可选择翻译为另一种语言同时保留全部图形。使用结构化抽取（PyMuPDF）、基于字号的版式推断、压缩的 base64 内联图片（单一可携带文件），以及强制的无头 Chrome 视觉校验。当有人想把 PDF 作为网页或干净文档来阅读、把 PDF 转成 HTML，或在保留图/表/图表的前提下翻译 PDF 时使用——例如“PDF 转 HTML”“把这个 PDF 转成中文网页版”“让这份报告变得可读”“翻译这份 PDF 但别丢图表”“我只想在手机上读这份 PDF”。与 doc-to-markdown（纯 Markdown 文本）和 pdf-creator（Markdown→PDF）不同——本技能产出带样式、忠实还原图片的 HTML 阅读体验。

将 Markdown 文件转换为专业 PDF 文档，具备完善的中文（CJK）字体支持、主题体系和视觉自检。当用户要求创建 PDF、把 Markdown 转成 PDF、生成可打印文档或为印刷/移动端阅读排版时使用。必须使用此技能而非手动调用 pandoc/Chrome——它会处理 CJK 排版、Chrome 页眉页脚抑制以及手动方式容易遗漏的强制视觉校验。**范围——仅 Markdown → PDF。** Word（.docx）输出请使用 `minimax-docx`；此技能不产出 docx，两条流水线刻意互不依赖。

使用这个部署技能来验证共享技能能否在 Playwright 启动期间正常加载。

针对 Project Bedrock 将单元测试转换为浏览器测试的审阅器。当用户需要在移除测试中复杂的 Browser 依赖时审阅其工作，调用本技能。

Playwright 端到端测试模式、Page Object Model、配置、CI/CD 集成、测试产物管理与不稳定测试应对策略。

在移动设备上进行远程 JavaScript 控制台访问与调试。在手机/平板上调试网页、无需桌面 DevTools 即可访问控制台错误、在真实设备上测试响应式设计或诊断移动端特有问题时使用。涵盖 Eruda、vConsole、Chrome/Safari 远程调试与云端测试平台。

通过 Build Web Apps 或 web dev 插件测试、调试或对已渲染的前端应用做定向改进时使用：本地开发服务器、UI 回归、交互 bug、控制台错误、响应式布局与视觉 QA。先检查 Browser 插件是否可用，可用则优先使用；否则使用常规 Playwright 并记录所选原因。

API — Headless CMS — 124 个抽象。条目、模型与分组事件处理器及用例。

为应用功能生成自包含的 HTML/CSS 动画，用于演示、导览与新手引导。通过 Chrome 调研目标应用、访谈用户、生成结构化简报与动画 HTML 文件，随后进入“冻结-检查-反馈”迭代评审循环直至用户认可。当用户说“css animation”“给这个功能做动画”“创建 CSS 导览”“animation walkthrough”，或想做基于 CSS 的应用功能视觉演示时使用。

通过 [inference.sh](https://inference.sh) 在安全沙箱环境中执行 Python 代码。预装：NumPy、Pandas、Matplotlib、requests、BeautifulSoup、Selenium、Playwright、MoviePy、Pillow、OpenCV、trimesh 及 100 多个其他库。适用于：数据处理、网页抓取、图像编辑、视频创作、3D 模型处理、PDF 生成、API 调用、自动化脚本。触发词：python、执行代码、运行脚本、网页抓取、数据分析、图像处理、视频剪辑、3D 模型、自动化、pandas、matplotlib。

通过 [inference.sh](https://inference.sh) 在安全的沙箱环境中执行 Python 代码。预装：NumPy、Pandas、Matplotlib、requests、BeautifulSoup、Selenium、Playwright、MoviePy、Pillow、OpenCV、trimesh 及 100+ 其他库。适用：数据处理、网页抓取、图像操作、视频创作、3D 模型处理、PDF 生成、API 调用、自动化脚本。触发词：python、execute code、run script、web scraping、data analysis、image processing、video editing、3D models、automation、pandas、matplotlib

使用 Playwright 与本地 Web 应用交互并测试的工具包。支持验证前端功能、调试 UI 行为、捕获浏览器截图和查看浏览器日志。

使用 Chrome DevTools MCP 的前端调试团队。双模式——按功能清单测试或按缺陷报告调试。触发词：“team-frontend-debug”、“frontend debug”

使用 Chrome DevTools MCP 的前端调试团队。双模式——按功能清单测试或按缺陷报告调试。触发词：“team-frontend-debug”、“frontend debug”

基于 Playwright 的移动设备模拟与响应式测试。在测试移动端布局、触摸交互、设备特定功能或响应式断点时使用。

Playwright E2E 测试模式、页面对象模型、配置、CI/CD 集成、工件管理和不稳定测试策略。

当用户想为 Next.js（App Router）+ TypeScript + Tailwind + shadcn/ui 项目搭建、改进或运行前端测试（单元、组件与 E2E）时使用此技能，技术栈为 Vitest/Jest、React Testing Library 与 Playwright。

Playwright 端到端测试模式、Page Object Model、配置、CI/CD 集成、产物管理与不稳定测试应对策略。

在使用 Detox 或 Appium 编写或配置移动应用测试、对接设备农场（AWS Device Farm、Firebase Test Lab、BrowserStack）、集成崩溃上报（Crashlytics、Sentry、Bugsnag）或分发 Beta 构建（TestFlight、Firebase App Distribution、App Center）时使用此技能。触发场景：移动端端到端测试、原生应用自动化、设备矩阵测试、崩溃符号化与 OTA Beta 分发工作流。

为 Bright Data 构建具备最佳实践的生产级集成，是供使用编码助手（Claude Code、Cursor 等）的开发者参考的文档，用于实现网页抓取、搜索、浏览器自动化与结构化数据提取。覆盖 Web Unlocker API、SERP API、Web Scraper API 与 Browser API（Scraping Browser）。

审阅 Playwright 测试的质量。当用户说「review tests」「check test quality」「audit tests」「improve tests」「test code review」或「playwright best practices check」时使用。