# Design Critique Checklist

> Quick-pass checklist for interface critique. Use for fast reviews; see PRINCIPLES.md for deep heuristics.

- Skill: `tools-only/design-critique-checklist` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add tools-only/design-critique-checklist`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tools-only/design-critique-checklist/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tools-only (https://skillmd.com/u/tools-only)
- Updated: 2026-09-29
- Page: https://skillmd.com/skills/tools-only/design-critique-checklist

---

# Design Critique Checklist

Quick-pass checklist for interface critique. Use for fast reviews; see PRINCIPLES.md for deep heuristics.

## Clarity

- [ ] Labels match outcomes (no ambiguity)
- [ ] Primary action obvious within 1 second
- [ ] Errors say what happened + how to fix
- [ ] Icons have labels (or are universally understood)
- [ ] No jargon or system-speak

## Hierarchy & Layout

- [ ] One clear focal point per screen/section
- [ ] Spacing uses consistent rhythm
- [ ] Alignment is intentional (no near-misses)
- [ ] Related items grouped (Gestalt proximity)
- [ ] Visual weight matches importance

## Interaction States

- [ ] Hover state exists and is visible
- [ ] Focus state exists and is visible (keyboard users)
- [ ] Active/pressed state provides feedback
- [ ] Disabled state is clear (not just grayed)
- [ ] Loading state exists with progress indication
- [ ] Error state is clear with recovery path
- [ ] Success state confirms completion

## Feedback

- [ ] Response is immediate (<100ms) or shows progress
- [ ] User knows what happened after every action
- [ ] Destructive actions have confirmation
- [ ] Errors don't blame the user
- [ ] Success messages are brief and helpful

## Accessibility

- [ ] Focus ring clearly visible on all interactive elements
- [ ] Tab order is logical
- [ ] Contrast >= 4.5:1 for text (7:1 for small text)
- [ ] Touch/click targets >= 44x44px
- [ ] Not relying on color alone for meaning
- [ ] Screen reader text for icon-only buttons
- [ ] Reduced motion alternative exists

## Typography

- [ ] Type hierarchy is clear (3-4 levels max)
- [ ] Body text is readable (16px+ on web)
- [ ] Line length is appropriate (45-75 characters)
- [ ] Line height supports readability

## Navigation

- [ ] User knows where they are
- [ ] User knows how to get back
- [ ] Navigation matches mental model
- [ ] Deep links work (if applicable)

## Mobile/Responsive

- [ ] Touch targets are adequately sized
- [ ] Critical actions are thumb-reachable
- [ ] Content reflows appropriately
- [ ] No horizontal scroll on content

## Performance Perception

- [ ] Skeleton screens for predictable layouts
- [ ] Progress indicators for long operations
- [ ] Optimistic updates where appropriate
- [ ] No layout shift during loading

## Edge Cases

- [ ] Empty states are helpful with clear CTA
- [ ] Error states guide recovery
- [ ] Long content handled gracefully
- [ ] Missing data handled gracefully

## The Final Test

- [ ] Would a new user understand this immediately?
- [ ] Does it feel inevitable, like it couldn't be any other way?
- [ ] Are we proud to ship this?