Agent Skills
› mtarcure/claude-vibe-squad
› visual-regression-baseline
visual-regression-baseline
GitHub用于生成和对比 UI 视觉回归基线,确保截图条件一致并屏蔽动态区域,通过像素/感知差异分析识别界面漂移或回归。
Trigger Scenarios
需要验证 UI 渲染是否发生非预期变化
建立稳定的视觉参考基准
Install
npx skills add mtarcure/claude-vibe-squad --skill visual-regression-baseline -g -y
SKILL.md
Frontmatter
{
"name": "visual-regression-baseline",
"type": "skill",
"audience": "specialist",
"description": "Use when a known-good render and candidate captures must be compared reproducibly: lock viewport, scale, theme, locale, and time; mask declared dynamic regions; produce tolerance-bounded pixel\/perceptual deltas; and classify each delta before replacing the reference set."
}
Visual Regression Baseline
Capture stable, comparable visual references so a UI/render change can be judged as intended design movement vs. accidental drift — a deterministic diff, not a screenshot glance.
Steps
- Define the capture set. Enumerate the states that must be verified: routes/screens, key components, breakpoints (mobile/tablet/desktop), theme variants (light/dark), and salient interaction states (hover/focus/error/empty/loading). Each entry is one named, reproducible capture.
- Establish the baseline. On the known-good build, capture each entry to an immutable, named reference
(via
chrome-devtools/playwrighttake_screenshot/browser_take_screenshot, fresh Chrome). Record the capture conditions with it: viewport size, device-scale factor, color scheme, locale, and the app build/commit. A baseline without its conditions is not a baseline. - Neutralize non-determinism BEFORE diffing. Freeze or mask sources of pixel noise that are not the change under test: fixed clock/seeded RNG, disabled animations/transitions, stable fonts (wait for webfont load), and masked dynamic regions (timestamps, avatars, ads, carousels, generated IDs). Masks are declared per-entry and versioned with the baseline — an unmasked dynamic region is a false FAIL.
- Re-capture deterministically. On the candidate build, re-capture the SAME set under the SAME recorded conditions. Any condition mismatch (viewport, scale, theme, locale) invalidates the comparison — re-capture, do not diff across conditions.
- Diff and compare. Compare candidate vs. baseline per entry. Use a pixel/perceptual diff with a declared tolerance (anti-aliasing/sub-pixel threshold) and the entry's masks applied. Produce a diff artifact (highlighted delta image) for every non-identical entry.
- Human/
view_imagereview of diffs. A non-zero diff is a SIGNAL, not a verdict. Review each diff image (view_imageon the codex lane, or a lane image-read) and classify: intended (accept → promote to the new baseline, with a note on what changed and why), or regression (reject). Never auto-accept a diff to silence it.
What counts as a regression FAIL
- A visual delta outside tolerance in an UNmasked region that was NOT an intended, reviewed change.
- A capture that could not be produced under the recorded conditions (broken render, crash, missing state).
- A diff accepted without human/
view_imageclassification (an unreviewed baseline promotion is itself a FAIL).
Acceptance
- Every verified state has a named baseline WITH its recorded capture conditions and declared masks.
- Candidate captures are produced under identical conditions; cross-condition diffs are rejected, not tolerated.
- Every non-identical entry has a diff artifact AND a human/
view_imageclassification (intended vs regression). - Baseline promotion is explicit and attributed; dynamic-region masking is versioned with the baseline.
- The tool's numeric diff is never the sole verdict — an out-of-tolerance unmasked delta blocks acceptance until reviewed, and a masked/tolerated delta is documented, not hidden.
Version History
- d5262e2 Current 2026-09-11 11:49


