cyberneticlibrary

Verify UI against design system and accessibility

ui-reviewersubagentsetup L21
forgekeel/forgekeel
What it does

Review rendered UI against design system and accessibility standards

Best for

Independent post-design QA that verifies rendered output matches design brief, not just code—catches visual regressions, contrast/a11y gaps, and responsive breakages that code review alone misses.

Inputs
  • · CSS/component diff
  • · rendered page screenshots (desktop+mobile)
  • · design system tokens
Outputs
  • · APPROVED | APPROVED WITH NOTES | REJECTED verdict
  • · MUST FIX + evidence
  • · SHOULD FIX + evidence
Requires
  • · Playwright MCP
  • · design-system tokens (palette, typography, spacing)
Preconditions
  • · Design system documented in project.md
  • · Rendered URL accessible
  • · Fonts loaded (document.fonts.ready)
Failure modes
  • · Visual mismatch if desktop-only screenshot reviewed (mobile untested)
  • · Contrast violation if calculated RGB wrong
  • · Accessibility snapshot missing aria attrs
Trust signals
  • · Visual verification via Playwright (not code-only)
  • · Mobile + desktop screenshot capture
  • · Contrast audit on text vs background
  • · A11y snapshot verification
  • · Hard rejection if CONVERGED claim contradicts visual reality