name	ui-ux-designer
description	Modern UI/UX design specialist for web applications, mobile apps, and design systems. Covers design principles, user research, interaction patterns, accessibility (WCAG), responsive design, component libraries (Tailwind, shadcn/ui, Material), prototyping, and usability testing. Creates beautiful, functional interfaces following best practices.

UI/UX Designer Skill

Expert in modern user interface and user experience design for web and mobile applications. Provides comprehensive guidance on design principles, interaction patterns, accessibility, and implementation using modern frameworks and libraries.

Core Competencies

1. Design Principles

Visual Hierarchy: Guide user attention with size, color, spacing, contrast
Consistency: Maintain patterns across entire application
Affordance: Design elements that suggest their function
Feedback: Provide clear response to user actions
White Space: Use breathing room to reduce cognitive load
Typography: Choose readable fonts with proper sizing and spacing
Color Theory: Create harmonious palettes with proper contrast
Progressive Disclosure: Reveal complexity gradually

2. User Research & Analysis

User Personas: Define target user archetypes
User Journeys: Map complete user workflows
Pain Points: Identify friction in current experience
Task Analysis: Break down user goals into steps
Competitive Analysis: Learn from similar products
Usability Testing: Validate designs with real users
A/B Testing: Compare design variations empirically
Analytics Review: Use data to inform decisions

3. Interaction Patterns

Navigation: Clear, predictable movement through app
Forms: Efficient, error-tolerant data collection
Feedback: Loading states, success/error messages
Microinteractions: Small delightful moments
Gestures: Touch and mouse interactions
Transitions: Smooth, purposeful animations
Empty States: Guide users when no content exists
Errors: Helpful, actionable error messages

4. Accessibility (WCAG 2.1)

Perceivable: Content available to all senses
Operable: UI components usable by all
Understandable: Information and operation clear
Robust: Compatible with assistive technologies
Color Contrast: 4.5:1 for normal text, 3:1 for large
Keyboard Navigation: All functions keyboard-accessible
Screen Readers: Semantic HTML, ARIA labels
Focus Indicators: Clear visual focus states

5. Responsive Design

Mobile First: Design for smallest screen, enhance up
Breakpoints: Common: 640px, 768px, 1024px, 1280px
Flexible Grids: Use relative units (%, rem, fr)
Touch Targets: Minimum 44x44px for mobile
Performance: Optimize for slow networks
Progressive Enhancement: Core experience works everywhere

Modern Tech Stack

CSS Frameworks

Tailwind CSS (Recommended)

<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors">
  Click Me
</button>

Benefits:

Utility-first approach
No CSS file bloat
Rapid prototyping
Consistent spacing/colors
Easy responsive design

Component Libraries

shadcn/ui (Recommended for React)

Accessible components (Radix UI primitives)
Tailwind-styled
Copy/paste, not npm install
Full customization

Material UI (MUI)

Comprehensive component set
Material Design guidelines
Enterprise-ready
TypeScript support

Chakra UI

Accessible by default
Composable components
Dark mode built-in
Great developer experience

Design Tools

Figma: Collaborative design (industry standard)
Adobe XD: Adobe ecosystem integration
Sketch: Mac-only, design systems
Framer: Interactive prototypes
Excalidraw: Quick wireframes

Icon Libraries

Lucide: Modern, consistent (recommended)
Heroicons: Tailwind-designed
Feather: Minimal, clean
Font Awesome: Comprehensive, classic

UI/UX Workflow

Phase 1: Research (20% of time)

Understand Users
- Who are they?
- What are their goals?
- What's their context?
Define Requirements
- Functional requirements
- Business goals
- Technical constraints
Competitive Analysis
- What works well elsewhere?
- What should we avoid?
- Where's the opportunity?

Phase 2: Ideation (15% of time)

Sketching
- Low-fidelity paper sketches
- Multiple approaches
- Quick iteration
Wireframing
- Digital low-fidelity layouts
- Focus on structure, not style
- Tools: Figma, Excalidraw
Information Architecture
- Content organization
- Navigation structure
- Page hierarchy

Phase 3: Design (30% of time)

Visual Design
- Choose color palette
- Select typography
- Create components
- Design key screens
Design System
- Define reusable components
- Document patterns
- Create style guide
Prototyping
- Interactive mockups
- Test user flows
- Validate interactions

Phase 4: Implementation (30% of time)

Component Development
- Build reusable components
- Implement responsive behavior
- Add accessibility features
Integration
- Connect to backend
- Handle loading/error states
- Optimize performance
Polish
- Smooth animations
- Microinteractions
- Edge case handling

Phase 5: Testing & Iteration (5% of time)

Usability Testing
- Observe real users
- Identify issues
- Gather feedback
Accessibility Audit
- Screen reader testing
- Keyboard navigation
- Color contrast check
Performance Testing
- Load times
- Animation smoothness
- Mobile performance

Design System Template

Color Palette

/* Primary Colors */
--primary-50: #eff6ff;
--primary-500: #3b82f6;
--primary-900: #1e3a8a;

/* Semantic Colors */
--success: #10b981;
--warning: #f59e0b;
--error: #ef4444;
--info: #3b82f6;

/* Neutrals */
--gray-50: #f9fafb;
--gray-500: #6b7280;
--gray-900: #111827;

Typography Scale

/* Tailwind default scale */
text-xs: 0.75rem (12px)
text-sm: 0.875rem (14px)
text-base: 1rem (16px)
text-lg: 1.125rem (18px)
text-xl: 1.25rem (20px)
text-2xl: 1.5rem (24px)
text-3xl: 1.875rem (30px)
text-4xl: 2.25rem (36px)

Spacing Scale

/* Tailwind 4px base unit */
0: 0
1: 0.25rem (4px)
2: 0.5rem (8px)
3: 0.75rem (12px)
4: 1rem (16px)
6: 1.5rem (24px)
8: 2rem (32px)
12: 3rem (48px)
16: 4rem (64px)

Component Variants

Button Sizes:

Small: py-1.5 px-3 text-sm
Medium: py-2 px-4 text-base
Large: py-3 px-6 text-lg

Button Styles:

Primary: bg-primary text-white
Secondary: bg-gray-200 text-gray-900
Ghost: bg-transparent hover:bg-gray-100
Danger: bg-red-500 text-white

Common UI Patterns

Navigation

Top Nav (Desktop)

<nav class="bg-white border-b border-gray-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <!-- Logo -->
        <div class="flex-shrink-0 flex items-center">
          <img class="h-8 w-auto" src="/logo.svg" alt="Logo">
        </div>
        <!-- Nav items -->
        <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
          <a href="#" class="border-b-2 border-blue-500 text-gray-900 px-3 py-2">
            Dashboard
          </a>
          <a href="#" class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 px-3 py-2">
            Projects
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

Mobile Menu (Hamburger)

<button class="sm:hidden p-2" aria-label="Open menu">
  <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
  </svg>
</button>

Forms

Input Field

<div class="space-y-2">
  <label for="email" class="block text-sm font-medium text-gray-700">
    Email address
  </label>
  <input
    type="email"
    id="email"
    name="email"
    class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
    placeholder="you@example.com"
    required
  >
  <p class="text-sm text-gray-500">We'll never share your email.</p>
</div>

Form Validation

<!-- Error state -->
<input class="border-red-500 focus:ring-red-500 focus:border-red-500">
<p class="mt-1 text-sm text-red-600">This field is required</p>

<!-- Success state -->
<input class="border-green-500 focus:ring-green-500 focus:border-green-500">
<p class="mt-1 text-sm text-green-600">Looks good!</p>

Cards

Basic Card

<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
  <h3 class="text-lg font-semibold text-gray-900 mb-2">
    Card Title
  </h3>
  <p class="text-gray-600 mb-4">
    Card description goes here.
  </p>
  <button class="text-blue-600 hover:text-blue-700 font-medium">
    Learn more →
  </button>
</div>

Modals/Dialogs

Modal Structure

<div class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center p-4">
  <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
    <!-- Header -->
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-xl font-semibold">Modal Title</h2>
      <button class="text-gray-400 hover:text-gray-500">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
    
    <!-- Content -->
    <div class="mb-6">
      <p class="text-gray-600">Modal content goes here.</p>
    </div>
    
    <!-- Footer -->
    <div class="flex justify-end space-x-3">
      <button class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50">
        Cancel
      </button>
      <button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
        Confirm
      </button>
    </div>
  </div>
</div>

Loading States

Spinner

<svg class="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>

Skeleton Loading

<div class="animate-pulse space-y-4">
  <div class="h-4 bg-gray-200 rounded w-3/4"></div>
  <div class="h-4 bg-gray-200 rounded"></div>
  <div class="h-4 bg-gray-200 rounded w-5/6"></div>
</div>

Toasts/Notifications

Success Toast

<div class="fixed top-4 right-4 bg-green-50 border border-green-200 rounded-lg p-4 shadow-lg">
  <div class="flex items-start">
    <svg class="h-5 w-5 text-green-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
    </svg>
    <div class="ml-3">
      <p class="text-sm font-medium text-green-800">Successfully saved!</p>
    </div>
  </div>
</div>

Accessibility Checklist

Essential Requirements ✅

All images have alt text
Forms have associated labels
Color contrast meets WCAG AA (4.5:1)
All interactive elements keyboard accessible
Focus indicators visible
Headings follow logical hierarchy (h1 → h2 → h3)
ARIA labels for icon buttons
Skip to main content link
Error messages associated with inputs
No information conveyed by color alone

Advanced Requirements ✅

Screen reader tested (NVDA, JAWS, VoiceOver)
Keyboard shortcuts documented
Reduced motion respected (prefers-reduced-motion)
High contrast mode supported
Text can be resized to 200%
Content reflows at 320px width
Timeout warnings with extension option
ARIA landmarks for page regions

Responsive Design Patterns

Mobile-First Approach

<!-- Base styles for mobile -->
<div class="p-4 text-sm">
  <!-- Enhanced for tablet -->
  <div class="sm:p-6 sm:text-base">
    <!-- Enhanced for desktop -->
    <div class="lg:p-8 lg:text-lg">
      Content
    </div>
  </div>
</div>

Responsive Grid

<!-- 1 column mobile, 2 tablet, 3 desktop -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Responsive Typography

<h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold">
  Responsive Heading
</h1>

Show/Hide by Screen Size

<!-- Show only on mobile -->
<div class="block sm:hidden">Mobile content</div>

<!-- Hide on mobile -->
<div class="hidden sm:block">Desktop content</div>

Animation Guidelines

Timing Functions

/* Tailwind defaults */
ease-linear: linear
ease-in: cubic-bezier(0.4, 0, 1, 1)
ease-out: cubic-bezier(0, 0, 0.2, 1)  /* Best for entering */
ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)

Duration Guidelines

Instant: <100ms (hover effects)
Quick: 100-200ms (small transitions)
Normal: 200-300ms (most transitions)
Slow: 300-500ms (large movements)
Avoid: >500ms (feels sluggish)

Common Transitions

<!-- Hover effects -->
<button class="transition-colors duration-200 hover:bg-blue-600">

<!-- Fade in/out -->
<div class="transition-opacity duration-300 opacity-0 hover:opacity-100">

<!-- Slide in -->
<div class="transition-transform duration-300 transform translate-x-full group-hover:translate-x-0">

<!-- Scale -->
<img class="transition-transform duration-200 hover:scale-105">

Dark Mode Implementation

Tailwind Dark Mode

<!-- Enable in tailwind.config.js: darkMode: 'class' -->

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <button class="bg-blue-500 dark:bg-blue-600">
    Click me
  </button>
</div>

Dark Mode Toggle

// Toggle function
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
  localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
}

// Initialize on load
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark');
}

Common Pitfalls & Solutions

Pitfall 1: Too Many Colors

Problem: Inconsistent color usage, visual chaos
Solution: Use a constrained palette (1 primary, 1-2 accent, neutrals)

Pitfall 2: Inconsistent Spacing

Problem: Elements feel unaligned, unprofessional
Solution: Use 4px or 8px base unit, stick to spacing scale

Pitfall 3: Poor Contrast

Problem: Text hard to read, fails accessibility
Solution: Use contrast checker, aim for 4.5:1 minimum

Pitfall 4: Tiny Touch Targets

Problem: Hard to tap on mobile
Solution: Minimum 44x44px for all interactive elements

Pitfall 5: No Loading States

Problem: Users unsure if action worked
Solution: Show spinners, disable buttons, provide feedback

Pitfall 6: Desktop-Only Design

Problem: Broken on mobile
Solution: Design mobile-first, test on real devices

Pitfall 7: Inaccessible Forms

Problem: Screen readers can't navigate
Solution: Associate labels, use semantic HTML, add ARIA

Resources

Learning

Laws of UX: https://lawsofux.com
Refactoring UI: Book by Adam Wathan & Steve Schoger
Don't Make Me Think: Book by Steve Krug
Nielsen Norman Group: https://www.nngroup.com

Tools

Figma: https://figma.com (design)
Tailwind CSS: https://tailwindcss.com (CSS framework)
shadcn/ui: https://ui.shadcn.com (components)
Lucide Icons: https://lucide.dev (icons)
Coolors: https://coolors.co (color palettes)
WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/

Inspiration

Dribbble: https://dribbble.com
Behance: https://behance.net
Mobbin: https://mobbin.com (mobile patterns)
Land-book: https://land-book.com (landing pages)

Success Criteria

Good UI/UX achieves:

✅ Users complete tasks efficiently
✅ Zero confusion about how to use interface
✅ Accessible to all users (WCAG AA minimum)
✅ Works on all screen sizes
✅ Fast load times (<3s initial, <1s interactions)
✅ Consistent visual language throughout
✅ Delightful microinteractions
✅ Error messages are helpful
✅ Users don't need documentation

Poor UI/UX results in:

❌ High bounce rates
❌ Support tickets about "how to..."
❌ Accessibility complaints
❌ Mobile users leave immediately
❌ Frustrated users, negative reviews

Install Skill

SKILL.md