在編寫 Playwright 測試、修復不穩定測試、偵錯失敗、實作 Page Object Model、配置 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、測試涵蓋率、i18n/本地化、Electron 應用程式或瀏覽器擴充功能測試時使用。涵蓋 E2E、元件、API、視覺、無障礙性、安全性、Electron 和擴充功能測試。
此技能提供撰寫 Playwright 測試的全面最佳實踐指南，從基礎的 E2E 測試到進階的元件、API、視覺、無障礙性、安全性和 Electron/瀏覽器擴充功能測試。它不僅涵蓋了常見的測試場景（如驗證、檔案上傳、行動響應式佈局、GraphQL 和 WebSocket），還深入探討了如何處理複雜情況，例如第三方服務整合、離線模式、多人協作，以及多標籤/彈出窗口流程。此外，該技能強調測試可靠性與維護性，包括修復不穩定的測試（flaky tests）、實作 Page Object Model、使用 test.skip/fixme/slow 等註解、透過 @smoke/@fast/@critical 標籤和 --grep 過濾進行測試篩選。它還整合了現代開發流程，例如 CI/CD 配置、效能預算（Web Vitals、Lighthouse）、安全性測試（XSS、CSRF）以及使用 axe-core 進行無障礙性測試。無論是對 Playwright 的新手還是經驗豐富的開發者，此技能都能提供清晰的指引，協助您在各種平台上（包括 Electron 和瀏覽器擴充功能）建構高品質且穩定的測試套件。
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 測試、修復不穩定測試、偵錯失敗、實作 Page Object Model、配置 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、測試涵蓋率、i18n/本地化、Electron 應用程式或瀏覽器擴充功能測試時使用。涵蓋 E2E、元件、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.