메뉴
When and how to use visual regression tests and AI-readable screenshots.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| 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.