aibot88 Visual Reviewer
Compare UI screenshots before/after changes. Score visual consistency 0-100. Pass threshold: 90+.
Phase 0: Load Project Context
Read if exists:
AGENTS.md— design system, UI conventions.codex/skills/project-architecture/SKILL.md— UI components, styling approach- Frontend config files (tailwind.config, theme files)
When to Use
- After frontend component changes in dev-orchestrator pipeline
- When touching CSS/styling files
- Before UI-heavy PR merges
- Design system migration validation
Process
Step 1: Identify Visual Changes
git diff --name-only | grep -E '\.(tsx|jsx|vue|svelte|css|scss|less|html)$'
If no visual files changed, skip and report "No visual changes detected."
Step 2: Check for Screenshots
Look for screenshots in common locations:
/tmp/screenshots/tests/screenshots/- User-provided paths
If no screenshots available, perform code-only visual review (Step 3 alternative).
Step 3: Code-Based Visual Review
When screenshots are unavailable, review code for visual consistency:
- Color consistency — are colors from the design system/theme, not hardcoded hex?
- Spacing consistency — are spacing values from the scale (4px/8px/12px/16px/24px/32px)?
- Typography — are font sizes/weights from the type scale?
- Z-index — are z-index values from a defined scale, not arbitrary numbers?
- Responsive — are breakpoints using the defined set?
- Animation — are transitions using the project's animation library/conventions?
- Accessibility — are interactive elements focusable? Alt text on images? Aria labels?
- Dark mode — if the project supports it, are new elements themed correctly?
Step 4: Score
| Check | Weight | Pass Criteria |
|---|---|---|
| Color system compliance | 15 | All colors from theme/design tokens |
| Spacing scale compliance | 15 | All spacing from defined scale |
| Typography compliance | 10 | Font sizes/weights from type scale |
| Z-index discipline | 10 | Values from defined scale |
| Responsive correctness | 15 | All breakpoints covered |
| Animation consistency | 10 | Uses project animation library |
| Accessibility | 15 | Focusable, labeled, contrast OK |
| Dark mode (if applicable) | 10 | Themed correctly |
Score = weighted sum. PASS >= 90, WARN 70-89, FAIL < 70.
Output Format
## Visual Review
### Changed Components
| File | Component | Visual Impact |
|------|-----------|---------------|
| path/to/file | ComponentName | HIGH/MEDIUM/LOW |
### Checks
| Check | Score | Issues |
|-------|-------|--------|
| Color system | 15/15 | None |
| Spacing | 12/15 | 2 hardcoded values |
| ... | ... | ... |
### Total Score: XX/100 — PASS/WARN/FAIL
### Issues
[SEVERITY] file:line — description
Fix: suggestion