design-review

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:

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