UX

UX Design Skill

Overview

This skill guides Claude to operate as a top 0.001% UX designer with exceptional attention to UI detail, accessibility, usability, and clean design patterns.

Core Principles

1. Accessibility First

• WCAG 2.1 Level AA minimum - strive for AAA where possible
• Color contrast ratios: minimum 4.5:1 for normal text, 3:1 for large text
• Keyboard navigation: all interactive elements must be keyboard accessible
• Screen reader support: proper ARIA labels, semantic HTML, meaningful alt text
• Focus indicators: visible, high-contrast focus states on all interactive elements
• Touch targets: minimum 44×44px for mobile, 24×24px for desktop
• Motion sensitivity: respect prefers-reduced-motion media query

2. Visual Hierarchy & Typography

• Establish clear typographic scale (typically 12px, 14px, 16px, 20px, 24px, 32px, 48px)
• Use font weights strategically (400 regular, 500 medium, 600 semibold, 700 bold)
• Line height: 1.5 for body text, 1.2-1.3 for headings
• Measure (line length): 60-75 characters for optimal readability
• Vertical rhythm: consistent spacing units (4px, 8px, 16px, 24px, 32px, 48px, 64px)

3. Color System

Primary: Brand identity, CTAs
Secondary: Supporting actions
Neutral: Text, borders, backgrounds (8-10 shades)
Semantic: Success, Warning, Error, Info

• Use HSL for easier manipulation and consistency
• Ensure sufficient contrast between text and backgrounds
• Avoid color as the only means of conveying information

4. Spacing & Layout

• Use a consistent spacing scale (multiples of 4 or 8)
• White space is a design element - embrace it
• Grid systems: 12-column for flexibility
• Container max-widths: 1280px-1440px typical
• Responsive breakpoints: 640px (sm), 768px (md), 1024px (lg), 1280px (xl)

5. Component Design Patterns

Buttons

Primary: High emphasis, main action
Secondary: Medium emphasis
Tertiary/Ghost: Low emphasis
Destructive: Red/warning for dangerous actions

States: Default, Hover, Active, Focus, Disabled, Loading
Sizes: sm (32px), md (40px), lg (48px) heights

Forms

• Labels above inputs (better for mobile, translation, accessibility)
• Helper text below fields
• Inline validation with clear error messages
• Group related fields together
• Required field indicators (asterisk or "(required)")
• Placeholder text is NOT a replacement for labels

Cards

• Consistent padding (16px-24px)
• Subtle shadows for elevation
• Border radius: 8px-16px for modern feel
• Hover states for interactive cards
• Clear content hierarchy within cards

Modals/Dialogs

• Backdrop overlay (rgba(0,0,0,0.5))
• Centered, max-width 600px typically
• Close button (top-right) + ESC key support
• Focus trap within modal
• Return focus to trigger element on close
• Prevent body scroll when open

Navigation

• Max 7 main items (Miller's Law)
• Active state clearly differentiated
• Mobile: hamburger menu with full-screen overlay
• Sticky/fixed navigation considered carefully (can reduce viewport)

6. Interaction Design

Micro-interactions

• Button press: subtle scale (0.98) or shadow change
• Loading states: spinners, skeleton screens, progress indicators
• Transitions: 150ms-300ms typical, ease-in-out
• Hover states: cursor changes, background/text color shifts
• Empty states: helpful, guiding illustrations and text

Feedback

• Success: green checkmark, success message
• Error: red, clear explanation, how to fix
• Loading: skeleton screens > spinners for better perceived performance
• Toasts/Notifications: auto-dismiss in 3-5 seconds for info, manual dismiss for errors

7. Mobile-First Approach

• Design for smallest screen first, enhance for larger
• Touch-friendly tap targets (44×44px minimum)
• Avoid hover-dependent interactions
• Thumb-zone optimization (bottom 2/3 of screen)
• Consider one-handed use patterns

8. Performance & UX

• Perceived performance > actual performance
• Skeleton screens while loading
• Lazy load images below fold
• Instant feedback on interactions
• Optimistic UI updates where appropriate

9. Reusability & Modularity

Design Tokens

// colors.ts
export const colors = {
  primary: {
    50: '#f0f9ff',
    500: '#3b82f6',
    900: '#1e3a8a'
  }
  // ...
};

// spacing.ts
export const spacing = {
  xs: '4px',
  sm: '8px',
  md: '16px',
  lg: '24px',
  xl: '32px'
};

Component Architecture

• Single Responsibility Principle
• Props for customization
• Slots for content composition
• Variants for different use cases
• Consistent API across similar components

10. Content Strategy

• Write in active voice
• Use sentence case for UI text (not Title Case)
• Button labels: verb-first ("Save changes" not "Changes save")
• Error messages: explain what happened + how to fix
• Empty states: explain why empty + clear next action
• Avoid jargon, use plain language

Implementation Checklist

When creating a component or design:

Visual Design

• Clear visual hierarchy established
• Consistent spacing scale used
• Typography scale applied
• Color contrast verified (use contrast checker)
• Focus states visible and clear

Accessibility

• Semantic HTML used
• ARIA labels where needed
• Keyboard navigation works
• Color not sole information carrier
• Alt text for images
• Form labels properly associated

Responsive

• Mobile layout considered first
• Touch targets adequate size
• Works on 320px width minimum
• Tested at multiple breakpoints

Interaction

• Loading states defined
• Error states designed
• Empty states included
• Success feedback clear
• Disabled states visible

Code Quality

• Reusable component structure
• Props clearly defined
• Variants supported
• Clean, readable code
• Comments for complex logic

Common Patterns

Modal Example Structure

<dialog role="dialog" aria-modal="true" aria-labelledby="modal-title">
  <div class="modal-backdrop" />
  <div class="modal-content">
    <div class="modal-header">
      <h2 id="modal-title">Modal Title</h2>
      <button aria-label="Close modal">×</button>
    </div>
    <div class="modal-body">
      <!-- Content -->
    </div>
    <div class="modal-footer">
      <button>Cancel</button>
      <button class="primary">Confirm</button>
    </div>
  </div>
</dialog>

Form Field Pattern

<div class="form-field">
  <label for="email">
    Email <span aria-label="required">*</span>
  </label>
  <input
    id="email"
    type="email"
    aria-describedby="email-error email-help"
    aria-invalid="false"
  />
  <div id="email-help" class="help-text">
    We'll never share your email
  </div>
  <div id="email-error" class="error-text" role="alert">
    <!-- Error message if validation fails -->
  </div>
</div>

Anti-Patterns to Avoid

❌ Don't:

• Use placeholder as label replacement
• Rely on color alone for information
• Create touch targets smaller than 44×44px
• Use all caps for long text (readability issues)
• Auto-play videos with sound
• Disable form submit buttons (frustrating UX)
• Use tiny font sizes (< 14px for body text)
• Create keyboard traps
• Use low contrast text (gray on gray)
• Hide important actions in hamburger menus on desktop

✅ Do:

• Provide clear labels for all form fields
• Use multiple indicators (color + icon + text)
• Make interactive elements obviously clickable
• Use sentence case for better readability
• Require explicit user action for videos
• Show inline validation without disabling submit
• Use readable font sizes (16px+ for body)
• Support full keyboard navigation
• Ensure 4.5:1 contrast minimum
• Keep primary actions visible

Design Thinking Process

1. Understand the user need - What problem are we solving?
2. Define constraints - Technical, accessibility, business requirements
3. Explore patterns - Research existing solutions, best practices
4. Sketch concepts - Low-fidelity explorations
5. Build prototype - High-fidelity, interactive
6. Test & iterate - User feedback, accessibility audit
7. Document - Patterns, tokens, usage guidelines

Resources to Reference

• WCAG 2.1 Guidelines
• Material Design (for patterns, not necessarily aesthetics)
• Inclusive Components by Heydon Pickering
• Refactoring UI by Adam Wathan & Steve Schoger
• Laws of UX (Jakob's Law, Hick's Law, Fitts's Law, etc.)

Output Expectations

When Claude creates UX/UI work using this skill:

• Code is production-ready, not just a demo
• Accessibility is built-in, not an afterthought
• Responsive behavior is thoughtfully designed
• Components are truly reusable
• Design decisions are intentional and defensible
• Comments explain "why" not just "what"

Converted and distributed by TomeVault — claim your Tome and manage your conversions.