| name | design-review |
| description | Design review checklists, accessibility standards, and UX patterns.
Use when: "review design", "check accessibility", "design critique", "UX audit"
|
Design Review Skill
Checklists and standards for reviewing interfaces.
Quick Audit
Before deep review, answer:
- Who is the user?
- What must this screen accomplish?
- Where does the eye go first?
Visual Hierarchy Checklist
Spacing & Layout
| Rule | Standard |
|---|
| Base unit | 8px grid |
| Touch targets | 44px minimum |
| Breathing room | Adequate around interactive elements |
| Grouping | Related = close, unrelated = far |
Typography Checklist
Color & Contrast
| Standard | Requirement |
|---|
| WCAG AA text | 4.5:1 contrast ratio minimum |
| WCAG AA large text | 3:1 contrast ratio |
| Color meaning | Consistent (red=danger, green=success) |
| Accessibility | Color not the only indicator |
Interaction States
Every interactive element needs:
| State | Purpose |
|---|
| Default | Normal appearance |
| Hover | Desktop feedback |
| Focus | Keyboard navigation (accessibility) |
| Active/Pressed | Click feedback |
| Disabled | Unavailable + explanation why |
| Loading | Processing feedback |
| Error | What went wrong + how to fix |
Responsiveness
UX Red Flags
| Issue | Problem |
|---|
| Unlabeled icons | Users shouldn't guess |
| Walls of text | Nobody reads blocks |
| Disabled without explanation | User deserves to know why |
| Inconsistent patterns | Breaks learned behavior |
| No loading states | User doesn't know if action worked |
| Hostile error messages | "Error 500" tells nothing |
| Buried primary actions | Hidden in dropdowns/menus |
| Modal overuse | Every modal is an interruption |
Animation Guidelines
| Rule | Standard |
|---|
| Duration | Under 300ms for micro-interactions |
| Easing | Natural curves (ease-out for enters, ease-in for exits) |
| Purpose | Guides attention, not decoration |
| Reduce motion | Respect prefers-reduced-motion |
Accessibility Quick Check
- Keyboard — Can navigate with Tab? Focus visible?
- Screen reader — Labels on inputs? Alt on images?
- Contrast — Text readable? Colors distinguishable?
- Motion — Reduced motion respected?
- Forms — Errors announced? Labels associated?
Design System References
| Resource | Location |
|---|
| Design System | Second Brain/Projects/{project}/design-system.md |
| Brand Guide | Project-specific brand documentation |
"Every interface is a conversation. Make it feel human."
