ui-ux-pro-max

name

ui-ux-pro-max

description

Comprehensive UI/UX and Human Interface Guidelines consistency skill. Use whenever the user is designing interfaces, reviewing UX flows, building design systems, or wants feedback on visual hierarchy, spacing, accessibility, or interaction patterns. Trigger on mentions of UI/UX design, design systems, accessibility (a11y), visual hierarchy, micro-interactions, design tokens, or when the user asks "does this look good" or "how should this be designed". Also trigger for Human Interface Guidelines (HIG) consistency across platforms.

UI/UX Pro Max — Design Excellence Skill

Premium UI/UX principles, design systems, accessibility, and Human Interface Guidelines.

---

Design Hierarchy Principles

Visual Hierarchy Checklist

1. Size — larger = more important (headlines > body text)
2. Color/Contrast — high contrast draws the eye first
3. Whitespace — isolation increases perceived importance
4. Position — top-left (LTR) gets seen first; F-pattern reading
5. Weight — bold/heavy fonts signal priority

The 60-30-10 Color Rule

60% — Dominant/neutral (backgrounds, large surfaces)
30% — Secondary (cards, supporting elements)
10% — Accent (CTAs, key actions, highlights)

---

Spacing & Layout System

4px/8px Base Grid (Industry Standard)

/* Use multiples of 4 for all spacing — creates visual rhythm */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-24: 96px;

Tailwind v4 Spacing Theme

@theme {
  --spacing: 0.25rem; /* 4px base unit — Tailwind multiplies this */
}
/* p-4 = 16px, p-6 = 24px, p-8 = 32px — consistent rhythm */

Layout Density Guide

Context	Padding	Gap
Dense data tables	8-12px	4-8px
Forms	16-24px	16px
Cards	16-24px	16-24px
Marketing sections	64-128px	48-64px

---

Typography System

Type Scale (Major Third — 1.25 ratio)

@theme {
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.25rem;    /* 20px */
  --text-xl: 1.563rem;   /* 25px */
  --text-2xl: 1.953rem;  /* 31px */
  --text-3xl: 2.441rem;  /* 39px */
  --text-4xl: 3.052rem;  /* 49px */
}

Line Height Rules

/* Tighter line-height for headings, looser for body */
h1, h2, h3 { line-height: 1.1; }
p, li      { line-height: 1.6; }
small      { line-height: 1.4; }

/* Optimal line length for readability: 50-75 characters */
.prose { max-width: 65ch; }

Font Pairing Principles

• Max 2 typefaces per product (one display, one body — or one family with multiple weights)
• Variable fonts preferred for performance (one file, many weights)
• Never pair two similar serif or two similar sans fonts — pick contrasting styles if using two

---

Color Systems

Accessible Color Palette Structure

@theme {
  /* Each color needs 50-950 scale for flexibility */
  --color-brand-50: oklch(0.97 0.02 260);
  --color-brand-100: oklch(0.94 0.05 260);
  --color-brand-500: oklch(0.55 0.22 260);  /* Primary action color */
  --color-brand-600: oklch(0.48 0.22 260);  /* Hover state */
  --color-brand-900: oklch(0.25 0.12 260);  /* Dark text on light bg */

  /* Semantic colors */
  --color-success: oklch(0.6 0.15 145);
  --color-warning: oklch(0.75 0.15 80);
  --color-danger: oklch(0.55 0.22 25);
  --color-info: oklch(0.6 0.15 230);
}

Contrast Requirements (WCAG)

Element	Minimum Ratio	Level
Body text	4.5:1	AA
Large text (18px+/bold 14px+)	3:1	AA
Body text (enhanced)	7:1	AAA
UI components/borders	3:1	AA

# Check contrast programmatically
npx @adobe/leonardo-contrast-colors
# Or use https://webaim.org/resources/contrastchecker/

---

Accessibility (a11y)

Semantic HTML First

// ❌ Div soup with no semantics
<div onClick={handleClick}>Submit</div>

// ✅ Semantic, keyboard-accessible, screen-reader friendly
<button onClick={handleClick} type="button">Submit</button>

ARIA Patterns

// Loading state
<button aria-busy={isPending} disabled={isPending}>
  {isPending ? "Saving…" : "Save"}
</button>

// Form errors
<input
  aria-invalid={!!error}
  aria-describedby={error ? "email-error" : undefined}
/>
{error && <p id="email-error" role="alert">{error}</p>}

// Modal/dialog
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Confirm Delete</h2>
</div>

// Icon-only buttons need labels
<button aria-label="Close menu">
  <XIcon aria-hidden="true" />
</button>

Focus Management

/* Never remove focus outlines — restyle them instead */
:focus-visible {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

Accessibility Audit Checklist

• All interactive elements reachable via Tab key
• Focus order matches visual order
• Color is never the only signal (add icons/text to error states)
• Images have meaningful alt text (or alt="" if decorative)
• Form inputs have associated <label>
• Headings follow logical hierarchy (no skipping h1→h3)
• Touch targets ≥ 44×44px on mobile
• Animations respect prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

---

Micro-interactions & Motion

Motion Principles

/* Easing — never use linear for UI motion */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* Entering elements */
--ease-in: cubic-bezier(0.7, 0, 0.84, 0);       /* Exiting elements */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* Moving elements */

/* Duration guide */
--duration-fast: 100ms;    /* hover states, small UI feedback */
--duration-base: 200ms;    /* most transitions */
--duration-slow: 350ms;    /* modals, page transitions */

Feedback Timing

Interaction	Response Time
Button press feedback	Instant (0ms)
Hover state	100-150ms
Loading spinner appears	After 300-400ms delay (avoid flash for fast loads)
Toast/notification	200ms in, stays 3-5s, 150ms out
Page transition	200-350ms

---

Human Interface Guidelines (HIG) Consistency

Apple HIG Key Principles

• Clarity: text legible at every size, icons precise, adornments subtle
• Deference: content is the UI — chrome (UI decoration) should not compete
• Depth: visual layers convey hierarchy and facilitate understanding

Material Design Key Principles

• Material as metaphor: surfaces and edges provide visual cues
• Bold, graphic, intentional: deliberate color and typography choices
• Motion provides meaning: transitions show relationships between states

Cross-Platform Consistency Checklist

• iOS: respects safe areas, uses SF Symbols where appropriate, follows tab bar conventions
• Android: follows Material elevation/shadow system, uses system back gesture correctly
• Web: respects OS-level dark mode preference (prefers-color-scheme)
• Consistent iconography style across platforms (don't mix icon families)
• Platform-native form controls feel familiar (don't over-customize native pickers)

---

Component Design Patterns

Button Hierarchy

Primary    → 1 per view, the main action (filled, brand color)
Secondary  → supporting actions (outline or ghost)
Tertiary   → low-emphasis actions (text-only link style)
Destructive → red/danger color, often requires confirmation

Empty States (Don't Skip These)

function EmptyState({ icon, title, description, action }: EmptyStateProps) {
  return (
    <div className="flex flex-col items-center gap-3 py-16 text-center">
      <div className="text-muted-foreground">{icon}</div>
      <h3 className="font-semibold text-lg">{title}</h3>
      <p className="text-muted-foreground text-sm max-w-sm">{description}</p>
      {action}
    </div>
  )
}

Loading State Hierarchy

1. Skeleton screens — preferred for content that has a known shape
2. Spinners — for short, unpredictable waits (<2s)
3. Progress bars — for long, trackable operations (uploads, processing)
4. Optimistic UI — best UX when the outcome is highly likely to succeed

---

Design Review Checklist

• Visual hierarchy guides the eye to the primary action first
• Spacing follows a consistent scale (4px/8px grid)
• Color contrast meets WCAG AA minimum
• Empty, loading, and error states are all designed (not just "happy path")
• Touch targets are ≥44px on mobile
• Motion has purpose (not decoration) and respects reduced-motion preference
• Typography scale is consistent across the product
• Icons are from a single consistent set/style
• Dark mode tested, not just inverted colors

---

Key Rules

1. One primary action per screen — too many CTAs dilute focus
2. 4px/8px spacing grid, always — never arbitrary pixel values
3. WCAG AA minimum (4.5:1 contrast) — non-negotiable for body text
4. Design all states — empty, loading, error, success, not just the happy path
5. Never remove focus indicators — restyle, never delete
6. Respect prefers-reduced-motion and prefers-color-scheme
7. Semantic HTML before ARIA — ARIA is a patch, not a starting point
8. Skeleton over spinner when content shape is predictable
9. Max 2 typefaces per product
10. Test with keyboard only — if you can't complete a flow without a mouse, it's broken