ui-visual-validator

name	ui-visual-validator
description	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