---
name: impeccable
description: Use when designing, redesigning, critiquing, auditing, or polishing any frontend interface. Covers visual hierarchy, accessibility, typography, spacing, color, motion, copy, and design systems.
---

# Impeccable UI/UX Skill

Use for: websites, landing pages, dashboards, product UI, components, forms, settings, onboarding, empty states.

## Audit Checklist

### Visual Hierarchy
- Eye flows to most important element first?
- Clear primary / secondary / tertiary action distinction?
- Heading sizes meaningfully differentiated (not just bold)?

### Spacing & Layout
- Consistent spacing scale (4px/8px grid)?
- Nothing feels cramped — adequate breathing room?
- Everything aligns to an invisible grid?

### Typography
- Max 2 typefaces. Body 15-17px. Line-height 1.5-1.7.
- Contrast WCAG AA: 4.5:1 body, 3:1 large text.
- No orphans or widows in paragraphs.

### Color
- Color communicates meaning, not decoration.
- Semantic: red=danger, green=success, blue=info — consistent.
- Works in light AND dark mode.
- Never color-only information (color-blind safe).

### Interaction States
- Every interactive element: default, hover, focus, active, disabled.
- Focus rings visible and custom-styled.
- Loading/skeleton states for async actions.

### Accessibility
- All images have alt text.
- Form inputs have associated labels (not placeholder-only).
- Keyboard navigable. ARIA where semantic HTML insufficient.

### Motion
- Purposeful — guides attention, not decoration.
- Respects prefers-reduced-motion.
- Timing: micro 100ms, standard 200-300ms, emphasis 400ms.

### Copy
- CTAs are verb + noun: "Save draft" not "OK".
- Errors explain what went wrong AND how to fix it.
- Empty states explain the space and offer a clear next action.

## Output Format
For each issue:
1. **What** — specific element
2. **Why** — user impact
3. **Fix** — concrete change (code snippet if applicable)

Priority order: Critical (blocks use) → High (degrades UX) → Medium (polish) → Low (nitpick)