ui-visual-check

Three-layer autonomous UI quality checker for coding agents.

Layers

Layer	Method	Speed	Needs
1 Static	stylelint + axe + token lint (bash regex)	<5s	Files only
2 VLM	CDP screenshot → Claude vision critique	15-30s	CDP + cw-proxy
3 Heuristic	DOM checks (empty states, touch targets, overflow)	<15s	CDP

Usage

# Layer 1 only (no dependencies)
bash ui-visual-check.sh --files src/App.tsx src/styles.css

# Full check
bash ui-visual-check.sh --files src/App.tsx --url http://localhost:3000 --design DESIGN.md --auto-fix --threshold 8

Integration

Triggered automatically by coder agents when briefing contains visual-check: true (§7b in coder-rules).

Structure

ui-visual-check.sh          # Orchestrator
scripts/
  layer1-static.sh          # Static lint (zero deps)
  layer2-vlm.{sh,py}        # CDP screenshot + VLM
  layer3-heuristic.{sh,py}  # DOM heuristic checks
prompts/
  critique.md               # VLM critique prompt (DESIGN.md anchored)
  critique-generic.md       # Fallback (no DESIGN.md)
  fix.md                    # Auto-fix prompt
tests/
  e2e-test.sh               # Integration test
  fixtures/                 # Test pages with intentional defects
docs/
  WALKTHROUGH.md            # Full pipeline walkthrough
  activation-report.md      # Live test results

Tests

bash tests/e2e-test.sh