60 lines
2 KiB
Markdown
60 lines
2 KiB
Markdown
|
---
|
||
|
|
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)
|