Menü
When and how to use visual regression tests and AI-readable screenshots.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| auto-generated | true |
| name | visual-testing |
| description | When and how to use visual regression tests and AI-readable screenshots. |
Visual testing catches unintentional layout or style regressions that functional tests miss. It operates at two levels:
toHaveScreenshot() compares against committed PNGse2e/screenshots/ for Claude Code to inspect via the Read toolCommitted in e2e/__snapshots__/. Playwright compares each test run pixel-by-pixel (with maxDiffPixelRatio: 0.01 tolerance).
bun run test:visual:updatebun run test:visualSaved to e2e/screenshots/ (gitignored, ephemeral). Regenerated on every test run.
Read e2e/screenshots/home--initial-load.pngtakeAIScreenshot() and takeStepScreenshot() from e2e/utils/screenshots.tse2e/visual.spec.ts using toHaveScreenshot()takeStepScreenshot() for AI-readable copiesbun run test:visual:update to generate baselinee2e/__snapshots__/bun run test:visual — expect failures on changed pagestest-results/ to confirm changes are intentionalbun run test:visual:update to regenerate baselinesbun run test:e2e (all Playwright tests)Consult this process when:
visual TESTPLAN valueProject orientation, status overview, and skill/agent discovery. Shows metrics, blockers, available skills, agents, and quick-start actions.
Methodology for complex changes spanning 3+ files, vendored code, or cross-crate boundaries. Consult before any multi-file change.
Creating plans with 5+ items, phased checkpoints, orchestration
Pick and start the next task from @tasks. Queries status, presents available work, sets up context, and transitions to DOING.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.