# UI UX Pro Max

> 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.

- Skill: `roedyrustam/ui-ux-pro-max-2` (Agent Skill)
- Install (CLI): `npx skillmds@latest add roedyrustam/ui-ux-pro-max-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/roedyrustam/ui-ux-pro-max-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: roedyrustam (https://skillmd.com/u/roedyrustam)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/roedyrustam/ui-ux-pro-max-2

---


# 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)
```css
/* 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
```css
@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)
```css
@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
```css
/* 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
```css
@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 |

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

---

## Accessibility (a11y)

### Semantic HTML First
```tsx
// ❌ 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
```tsx
// 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
```css
/* 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`

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

---

## Micro-interactions & Motion

### Motion Principles
```css
/* 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)
```tsx
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