---
name: design-review
description: Review UI code for polish, accessibility, and feel using Emil Kowalski and jakubkrehel design engineering principles. Checks animations, surfaces, typography, performance, and accessibility. Use when code "feels off" or before shipping.
user_invocable: true
---

# Design Review

Run a comprehensive design review on the specified file or component using principles from Emil Kowalski's design engineering philosophy and jakubkrehel's interface polish guidelines.

## Review Process

1. **Read the target file(s)** the user specifies
2. **Audit against these checklists** (only flag actual issues found, not theoretical concerns):

### Typography
- [ ] Font smoothing applied at root (`-webkit-font-smoothing: antialiased`)
- [ ] Headings use `text-wrap: balance`
- [ ] Body text uses `text-wrap: pretty`
- [ ] Dynamic numbers use `font-variant-numeric: tabular-nums`

### Surfaces
- [ ] Nested rounded elements use concentric border radius (`outer = inner + padding`)
- [ ] Icons are optically centered
- [ ] Shadows used instead of borders for depth (borders OK for dividers)
- [ ] Images have subtle outlines
- [ ] Interactive elements have 40x40px minimum hit area

### Animations
- [ ] No `transition: all` — specific properties only
- [ ] Enter animations are split and staggered
- [ ] Exit animations are subtle (small translateY, not dramatic)
- [ ] No `scale(0)` — start from `scale(0.95)` with `opacity: 0`
- [ ] Correct easing: `ease-out` for enters, `ease-in-out` for movement
- [ ] UI animations under 300ms
- [ ] Custom easing curves, not browser defaults
- [ ] `prefers-reduced-motion` respected
- [ ] Hover states gated behind `@media (hover: hover)`
- [ ] Buttons have `:active` scale feedback (`scale(0.96)`)
- [ ] Popovers are origin-aware (not modals — those stay centered)

### Performance
- [ ] Only animating `transform`, `opacity`, `filter`
- [ ] `will-change` used sparingly and only for GPU-compositable properties
- [ ] CSS transitions for interactive elements (not keyframes)

### Distinctiveness (anti-AI-slop, from `frontend-design`)
- [ ] No generic system fonts (Inter, Roboto, Arial, system-ui) unless intentional and justified
- [ ] No purple-on-white gradient backgrounds or other cliched AI palettes
- [ ] No predictable centered hero + 3-column feature grid unless the design genuinely calls for it
- [ ] One bold aesthetic decision the viewer will remember (typography, color, motion, or layout)
- [ ] Background has atmosphere (gradient mesh, noise, texture, layered transparency) — not a flat fill by default
- [ ] Implementation complexity matches the aesthetic ambition (maximalist needs effects; minimalist needs precision)

### Accessibility (SSR-specific)
- [ ] Semantic HTML structure
- [ ] ARIA labels where needed
- [ ] Keyboard navigable
- [ ] Screen reader friendly content order
- [ ] Sufficient color contrast
- [ ] Focus indicators visible

## Output Format

Use a markdown table for all findings:

| Issue | Location | Before | After | Why |
| --- | --- | --- | --- | --- |
| ... | line:col | `current code` | `suggested code` | reasoning |

End with a summary: X issues found, Y quick fixes, Z architectural.