メニュー
Create, maintain, and verify end-to-end (E2E) tests using Playwright MCP. Use when a new feature or flow needs E2E coverage, when updating flows, or verifying UI and functional correctness.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Extract and compare computed CSS styles between a baseline URL and a dev/Storybook URL using Playwright MCP evaluate calls. Use when visual differences have been identified and you need to find the exact CSS property mismatches to fix. Pairs with the visual-diff skill for a complete visual QA workflow.
Debug and fix failing Playwright E2E tests. Use when tests fail, when asked to fix failing tests, or when investigating test failures. Analyzes test output, screenshots, error context, and uses Playwright MCP to identify root causes.
Diagnose and fix UI/runtime bugs. After a code change, verify in the browser with the available browser tools, read the console, and — for non-obvious bugs — add strategic temporary logging to locate the cause, then remove it. The agent decides how much of this flow a given bug needs.
Discover all visual states of a component by interactively exploring the production baseline page — not by reading story files. Finds every interactive element (nav items, dropdowns, toggles, buttons) that produces a distinct visual state, records the interactions needed to reach each one, and saves a pixel-perfect.config.json that the pixel-perfect skill uses to replay those same interactions on both production and Storybook. Run this once per component; re-run when the production page changes.
End-to-end workflow for implementing a new UI feature in a mock app. Ensures data model alignment, sample data, UI/UX consistency, component reuse, and automated verification. Load for ANY UI change.
Orchestrate a complete visual QA workflow to make a dev/Storybook page match a baseline URL pixel-for-pixel. Combines the visual-diff skill (screenshot comparison) with the computed-styles skill (CSS property extraction) in a loop until the pages match. Use when replicating a production page, matching a design reference, or achieving pixel perfection on a component.
| name | write-e2e-test |
| description | Create, maintain, and verify end-to-end (E2E) tests using Playwright MCP. Use when a new feature or flow needs E2E coverage, when updating flows, or verifying UI and functional correctness. |
Browser tooling — works for both toolsets. Use whichever is configured: Playwright MCP (
mcp_playwright_browser_*) for Claude, or the Copilot browser tools (open_browser_page,read_page,screenshot_page,click_element,type_in_page) for VS Code Copilot. Where this skill says "Playwright", use the equivalent tool from whichever set is available. Authoring persistent.spec.tsE2E files needs a Playwright test runner — if none is configured, verify interactively with the browser tools and cover flows with Vitest story tests instead.
Guide the creation, maintenance, and verification of end-to-end (E2E) tests using the available browser tools.
Identify Test Scenarios
Set Up Playwright MCP
Write E2E Test
e2e/)Run and Verify
Maintain and Document