Canon domain
Review
1 canon modules in this domain. Full Markdown is rendered from design-system/.
Featured
Interface Quality Checklist (Review Rubric)
Interface Quality Checklist
Operational review rubric synthesized from Vercel Web Interface Guidelines, WAI-ARIA APG, WCAG 2.2, and Apple HIG foundations. Each item has severity and verification mode.
Interactions
| ID | Rule | Severity | Verify |
|---|---|---|---|
| IQ-INT-01 | All flows keyboard-operable (APG patterns) | critical | keyboard |
| IQ-INT-02 | Visible :focus-visible rings |
critical | visual |
| IQ-INT-03 | Focus trap/return for dialogs/menus | critical | keyboard |
| IQ-INT-04 | Hit target ≥24px (desktop), ≥44px (mobile) | high | measure |
| IQ-INT-05 | Inputs ≥16px on mobile (no iOS zoom) | high | mobile |
| IQ-INT-06 | Never disable zoom | high | meta |
| IQ-INT-07 | Hydration-safe inputs (no focus/value loss) | high | browser |
| IQ-INT-08 | Never block paste | high | manual |
| IQ-INT-09 | Loading buttons keep label + spinner | medium | visual |
| IQ-INT-10 | URL as state for shareable UI | high | Back/Forward |
| IQ-INT-11 | Optimistic update + rollback/undo | medium | manual |
| IQ-INT-12 | Confirm destructive or provide undo window | high | manual |
| IQ-INT-13 | Links are real links (a/Link) |
high | code |
| IQ-INT-14 | Announce async updates (aria-live polite) | high | a11y |
| IQ-INT-15 | No dead zones on interactive chrome | medium | pointer |
Motion
| ID | Rule | Severity | Verify |
|---|---|---|---|
| IQ-MOT-01 | Honor prefers-reduced-motion | critical | media |
| IQ-MOT-02 | Prefer CSS/WAAPI over main-thread JS | medium | code |
| IQ-MOT-03 | Animate transform/opacity primarily | high | perf |
| IQ-MOT-04 | Interruptible input-driven motion | high | manual |
| IQ-MOT-05 | Never transition: all |
medium | code |
Layout & content
| ID | Rule | Severity | Verify |
|---|---|---|---|
| IQ-LAY-01 | Optical alignment when geometry lies | low | visual |
| IQ-LAY-02 | Safe-area insets respected | high | device |
| IQ-LAY-03 | Skeletons match final geometry | high | visual |
| IQ-LAY-04 | Empty/sparse/dense/error designed | critical | states |
| IQ-LAY-05 | No dead ends — always a next step | high | UX |
| IQ-LAY-06 | Locale-aware dates/numbers | high | i18n |
| IQ-LAY-07 | Icons have accessible names | critical | a11y |
| IQ-LAY-08 | Status not color-only | high | a11y |
Agent review command
When reviewing UI, agents must:
- Cite violated
IQ-*orrule.*IDs - State severity
- Propose minimal fix
- Note verification method
Linked rules
rule.interaction.interface-qualityrule.a11y.wcag-aarule.motion.purpose-first