claudecodeui/claude-skills/impeccable.md

name	description
impeccable	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)