用于编写 Playwright 测试、修复不稳定测试、调试失败、实现页面对象模型、配置 CI/CD、优化性能、模拟 API、处理认证或 OAuth、测试可访问性 (axe-core)、文件上传/下载、日期/时间模拟、WebSocket、地理位置、权限、多标签页/弹出窗口流程、移动端/响应式布局、触摸手势、GraphQL、错误处理、离线模式、多用户协作、第三方服务（支付、邮件验证）、控制台错误监控、全局设置/拆卸、测试注解（skip、fixme、slow）、测试标签（@smoke、@fast、@critical、通过 --grep 过滤）、项目依赖、安全测试（XSS、CSRF、auth）、性能预算（Web Vitals、Lighthouse）、iframe、组件测试、Canvas/WebGL、Service Worker/PWA、测试覆盖率、国际化/本地化、Electron 应用或浏览器扩展测试。涵盖端到端、组件、API、视觉、可访问性、安全、Electron 和扩展测试。
该技能提供了全面的 Playwright 最佳实践指南，涵盖从基础测试编写到高级场景的广泛主题，包括端到端测试、组件测试、API 测试、视觉回归测试、可访问性测试（通过 axe-core）、安全测试（XSS、CSRF、认证）以及 Electron 和浏览器扩展测试。它特别强调处理不稳定测试、调试失败和实现页面对象模型 (POM) 的最佳方法，并给出了 CI/CD 集成、性能优化（如 Web Vitals 和 Lighthouse）以及模拟 API、日期/时间、地理位置等外部因素的详细建议。此外，技能还覆盖了复杂的测试场景，如多标签页/弹出窗口、触摸手势、多用户协作、离线模式、WebSocket 和 GraphQL 交互，以及测试标签（@smoke、@fast、@critical）、注解（skip、fixme、slow）和项目依赖管理。通过遵循这些最佳实践，开发者和 QA 工程师可以显著提高 Playwright 测试的可靠性、可维护性和覆盖率，从而交付更高质量的 Web 应用。
npx skills add https://github.com/currents-dev/playwright-best-practices-skill/tree/main/skills/playwright-best-practicesInstalled? Explore more 图像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →
用于编写 Playwright 测试、修复不稳定测试、调试失败、实现页面对象模型、配置 CI/CD、优化性能、模拟 API、处理认证或 OAuth、测试可访问性 (axe-core)、文件上传/下载、日期/时间模拟、WebSocket、地理位置、权限、多标签页/弹出窗口流程、移动端/响应式布局、触摸手势、GraphQL、错误处理、离线模式、多用户协作、第三方服务（支付、邮件验证）、控制台错误监控、全局设置/拆卸、测试注解（skip、fixme、slow）、测试标签（@smoke、@fast、@critical、通过 --grep 过滤）、项目依赖、安全测试（XSS、CSRF、auth）、性能预算（Web Vitals、Lighthouse）、iframe、组件测试、Canvas/WebGL、Service Worker/PWA、测试覆盖率、国际化/本地化、Electron 应用或浏览器扩展测试。涵盖端到端、组件、API、视觉、可访问性、安全、Electron 和扩展测试。
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.