CI/CD visual regression setup and pre-commit visual verification checklist. Scoped complement to reality-checker agent — adds: visual regression tool ecosystem (Chromatic, Percy, Applitools, BackstopJS, Playwright Visual), 13-item mandatory verification checklist, and GitHub Actions screenshot diff pipelines. Use when setting up automated visual regression tests in CI/CD or running systematic pre-PR visual verification beyond what reality-checker provides.
risk
low
source
community (adapted for workspace)
date_added
2026-02-27
updated
2026-03-15
allowed-tools
Read, Bash
metadata
{"triggers":"visual regression, screenshot testing, visual diff, Chromatic, Percy, Applitools, BackstopJS, Playwright visual, visual testing CI, pixel diff, visual QA, UI looks wrong, before and after screenshot","related-skills":"browser-testing, accessibility-audit, web-design-guidelines, design-system","domain":"quality","role":"specialist","scope":"review","output-format":"report"}
last-reviewed
2026-03-15
Iron Law
DO NOT REPLACE reality-checker — USE IT FIRST for live browser screenshots and binary APPROVED/NEEDS WORK verdict. This skill adds: (1) visual regression tooling setup for CI/CD pipelines, (2) the 13-item mandatory verification checklist for systematic pre-PR checks, (3) automated screenshot diff configuration. Use both together.
UI Visual Validator
Systematic visual verification methodology + CI/CD visual regression tooling. Skeptic-first: the modification goal has NOT been achieved until proven with visual evidence.
Scope vs reality-checker
Capability
reality-checker agent
ui-visual-validator (this skill)
Live browser screenshot
✅ Chrome DevTools MCP
❌ (use reality-checker for this)
Binary APPROVED/NEEDS WORK verdict
✅
❌ (defer to reality-checker)
Visual regression tool setup (CI/CD)
❌
✅ Chromatic, Percy, Applitools, BackstopJS
GitHub Actions visual diff workflow
❌
✅
13-item mandatory verification checklist
❌
✅
Accessibility visual compliance checklist
❌
✅
Pre-commit systematic analysis protocol
❌
✅
Workflow: Run ui-visual-validator checklist → gather screenshots → pass to reality-checker for final verdict.
When to Use This Skill
Setting up Chromatic, Percy, or Playwright Visual in a CI/CD pipeline
Before a PR that touches Angular components or Flutter screens — run through the 13-item checklist
Investigating "it looks different on CI than locally" — visual regression diagnosis
New Angular component needs visual baseline established for regression testing
Flutter screen needs screenshot test added to CI
When NOT to Use This Skill
For live browser screenshots — use browser-testing skill + Chrome DevTools MCP
For the final APPROVED/NEEDS WORK gate — use agent
reality-checker
For WCAG compliance audit — use accessibility-audit skill
Core Principle
The modification goal has NOT been achieved until proven by visual evidence.
Ignore code hints. Base judgments solely on visual output.
Forbidden behaviors:
Assuming code changes automatically produce correct visual results
Quick conclusions without systematic analysis
Accepting "looks different" as "looks correct"
Using expectation to replace direct observation
Required output format (when performing visual analysis):
Always start with: "From the visual evidence, I observe..."
13-Item Mandatory Verification Checklist
Run through ALL 13 items before declaring a UI change complete:
Structural
1. Objective description — Described actual visual content without assumptions?
2. Goal verification — Compared each element against stated modification goals systematically?
3. Measurement validation — For rotation/position/size changes: verified through actual visual measurement (not assumed from code)?
Visual Quality
4. Responsive breakpoints — Verified at 375px, 768px, 1024px, 1440px?
5. Dark/light mode — Both themes validated (if applicable)?
6. Loading and transition states — Skeleton/spinner shown correctly? Transitions smooth?
7. Error and edge cases — Empty states, error states, disabled states all verified?
Accessibility (Visual)
8. Color contrast — WCAG 4.5:1 minimum for normal text verified visually?
9. Focus indicators — Visible focus rings on interactive elements?
npm install --save-dev chromatic
npx chromatic --project-token=<token> --auto-accept-changes main
# GitHub Actions-name:PublishtoChromaticuses:chromaui/action@latestwith:projectToken:${{secrets.CHROMATIC_PROJECT_TOKEN}}onlyChanged:true# Only test changed components
Best for: Angular component libraries with Storybook stories.
Option 3: BackstopJS (Config-based, no Storybook needed)
