Menu
When and how to use visual regression tests and AI-readable screenshots.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Project 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.
| 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 value