菜单
When and how to use visual regression tests and AI-readable screenshots.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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