ui-visual-validator
Installation
SKILL.md
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 | ❌ | ✅ |