UI Designer Skill

UI Designer

Purpose

Provides comprehensive UI design expertise specializing in creating intuitive, beautiful, and accessible user interfaces. Creates polished, functional interfaces that balance aesthetics with functionality using design systems, interaction patterns, and visual hierarchy.

When to Use

• Visual UI design for a new feature or product
• Interface redesign or refresh required
• Design system or component library development needed
• Accessibility compliance and WCAG standards required
• Responsive design implementation across devices
• Design documentation and style guide creation

Quick Start

Invoke this skill when:

• Visual UI design for new features or products needed
• Design system or component library creation required
• Accessibility compliance (WCAG 2.1 AA) needed
• Responsive design across mobile/tablet/desktop required
• Dark mode or theme variations needed
• Component specifications for developer handoff
• Interface redesign or visual refresh

Do NOT invoke when:

• Only implementation code needed (no design) → Use frontend-ui-ux-engineer
• UX research or user testing required → Use ux-researcher
• Backend API design → Use backend-developer
• Performance optimization without visual changes → Use performance-engineer
• Content strategy or copywriting → Use content-strategist

Core Capabilities

Visual Design

• Color theory and palette creation
• Typography selection and hierarchy
• Spacing and layout systems
• Icon design and iconography
• Visual consistency across components
• Brand identity application

Component Design

• Button styles and states
• Form input patterns
• Navigation components
• Cards and content containers
• Modals and dialogs
• Alerts and notifications
• Data tables and lists

Interaction Design

• Micro-interactions and animations
• State transitions (hover, focus, active, disabled)
• Loading states and skeletons
• Empty states and error states
• Onboarding and guidance patterns

Accessibility Design

• WCAG 2.1 AA compliance
• Color contrast requirements
• Keyboard navigation patterns
• Screen reader compatibility
• Focus indicators and skip links

Decision Framework

Design System Architecture

Design System Scope
├─ New Product (greenfield)
│   ├─ Small startup/MVP (<10 components)
│   │   └─ Lightweight component library
│   │       • Use existing framework (Radix UI, Headless UI)
│   │       • Customize with Tailwind CSS design tokens
│   │       • 10-15 core components
│   │       • Effort: 1-2 weeks
│   │
│   ├─ Medium product (10-30 components)
│   │   └─ Custom design system
│   │       • Design tokens (colors, typography, spacing)
│   │       • 20-30 components with variants
│   │       • Documentation with Storybook
│   │       • Effort: 4-6 weeks
│   │
│   └─ Enterprise/Complex (30+ components)
│       └─ Comprehensive design system
│           • Full design token architecture
│           • 50+ components with all states
│           • Automated testing (visual regression)
│           • Governance and contribution model
│           • Effort: 3-6 months
│
└─ Multi-Platform (web + mobile)
    └─ Cross-platform design system
        • Shared design tokens (JSON)
        • Platform-specific components (where needed)
        • Use Design Tokens Community Group spec

Component State Matrix

Accessibility Requirements

Best Practices

Design Process

• Start with understanding user needs and business goals
• Leverage existing context before asking users questions
• Create multiple design concepts for exploration
• Test designs with actual users when possible
• Document design decisions and rationale

Visual Design

• Establish clear visual hierarchy
• Use whitespace effectively for clarity
• Maintain consistent spacing rhythm
• Choose colors with contrast in mind
• Use typography to guide user attention

Accessibility

• Design for keyboard navigation first
• Ensure 4.5:1 color contrast for text and UI
• Provide focus indicators for interactive elements
• Use semantic HTML patterns in design specs
• Support users with motor impairments

Design Systems

• Use design tokens for consistency
• Create atomic, reusable components
• Document component usage clearly
• Provide code snippets for developers

Integration with Other Skills

• ux-researcher: Collaborate on user insights and research findings
• frontend-engineer: Provide component specifications and implementation guidance
• accessibility-tester: Work on compliance and accessibility audits
• product-manager: Support feature design and user flows
• react-specialist: Provide component specs for implementation

Tool Restrictions

Primary Tools:

• Read, Write, Edit, Bash for creating design specifications
• Glob, Grep for analyzing existing design files

Cannot directly:

• Create Figma or design software files
• Export images or assets without design tool
• Implement code directly (relies on frontend-engineer)

Quality Checklist

Accessibility (WCAG 2.1 AA)

• [ ] Color contrast validated (4.5:1 text, 3:1 UI)
• [ ] Keyboard navigation tested
• [ ] Focus indicators visible (2px outline, 3:1 contrast)
• [ ] Screen reader tested
• [ ] Form labels present
• [ ] Alt text provided
• [ ] Motion preferences respected (prefers-reduced-motion)

Visual Design

• [ ] Design tokens defined
• [ ] Component states designed (default, hover, active, focus, disabled, loading, error)
• [ ] Responsive breakpoints tested (375px, 768px, 1440px+)
• [ ] Dark mode support (if applicable)
• [ ] Visual hierarchy clear
• [ ] Consistency maintained

Component Documentation

• [ ] States documented
• [ ] Props/attributes defined
• [ ] Code examples provided
• [ ] Accessibility notes included
• [ ] Usage guidelines clear

Additional Resources

• Detailed Technical Reference: See REFERENCE.md
• Code Examples & Patterns: See EXAMPLES.md

UI Designer - Code Examples & Patterns

Pattern 1: Design Token Structure (CSS Variables)

:root {
  /* Colors - Semantic */
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-success: #10b981;
  --color-error: #ef4444;
  
  /* Colors - Neutral */
  --color-background: #ffffff;
  --color-surface: #f9fafb;
  --color-text-primary: #111827;
  --color-text-secondary: #6b7280;
  --color-border: #e5e7eb;
  
  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'Fira Code', monospace;
  
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  
  /* Spacing */
  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  
  /* Border Radius */
  --radius-sm: 0.25rem;  /* 4px */
  --radius-md: 0.5rem;   /* 8px */
  --radius-lg: 1rem;     /* 16px */
  --radius-full: 9999px; /* Pill shape */
}

/* Dark Mode Overrides */
[data-theme="dark"] {
  --color-background: #0f172a;
  --color-surface: #1e293b;
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-border: #334155;
  
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
}

Pattern 2: Accessible Button Component (React + Tailwind)

// Button.tsx - Production-ready accessible button
import { forwardRef, ButtonHTMLAttributes } from 'react';
import { Loader2 } from 'lucide-react';
import { cn } from '@/lib/utils';

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  loading?: boolean;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ variant = 'primary', size = 'md', loading, disabled, children, className, ...props }, ref) => {
    return (
      <button
        ref={ref}
        disabled={disabled || loading}
        aria-busy={loading}
        className={cn(
          // Base styles
          'inline-flex items-center justify-center font-medium rounded-md',
          'transition-colors focus-visible:outline-none',
          'focus-visible:ring-2 focus-visible:ring-offset-2',
          'disabled:opacity-50 disabled:pointer-events-none',
          
          // Variants
          {
            'bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-600': variant === 'primary',
            'border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus-visible:ring-blue-600': variant === 'secondary',
            'text-blue-600 hover:bg-blue-50 focus-visible:ring-blue-600': variant === 'ghost',
            'bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-600': variant === 'danger',
          },
          
          // Sizes
          {
            'h-8 px-3 text-sm': size === 'sm',
            'h-10 px-4 text-base': size === 'md',
            'h-12 px-6 text-lg': size === 'lg',
          },
          
          className
        )}
        {...props}
      >
        {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />}
        {children}
      </button>
    );
  }
);

Button.displayName = 'Button';

Pattern 3: Responsive Card Layout

// Card.tsx - Responsive card component
export const Card = ({ title, description, image, action }) => (
  <div className="group rounded-lg border border-gray-200 bg-white overflow-hidden hover:shadow-lg transition-shadow">
    {/* Image - 16:9 aspect ratio */}
    <div className="relative aspect-[16/9] overflow-hidden bg-gray-100">
      <img 
        src={image} 
        alt={title}
        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
        loading="lazy"
      />
    </div>
    
    {/* Content - responsive padding */}
    <div className="p-4 md:p-6">
      <h3 className="text-lg md:text-xl font-semibold text-gray-900 mb-2">
        {title}
      </h3>
      <p className="text-sm md:text-base text-gray-600 mb-4">
        {description}
      </p>
      
      {/* Action button */}
      <Button size="sm" variant="primary">
        {action}
      </Button>
    </div>
  </div>
);

Anti-Pattern 1: Ignoring Color Contrast Requirements

What it looks like (BAD):

/* ❌ BAD: Insufficient contrast */
.secondary-text {
  color: #a0aec0; /* gray-400 */
  background-color: #ffffff;
  /* Contrast ratio: 2.3:1 ❌ (fails WCAG AA 4.5:1) */
}

.button-ghost {
  color: #cbd5e0; /* gray-300 */
  background-color: #f7fafc; /* gray-50 */
  /* Contrast ratio: 1.4:1 ❌ (completely unreadable) */
}

Why it fails:

• Users with low vision cannot read text
• Fails WCAG 2.1 Level AA compliance
• Poor usability in bright environments
• Accessibility lawsuits risk

Correct approach:

/* ✅ GOOD: Meets 4.5:1 contrast */
.secondary-text {
  color: #718096; /* gray-600 */
  background-color: #ffffff;
  /* Contrast ratio: 5.1:1 ✅ */
}

.button-ghost {
  color: #2d3748; /* gray-800 */
  background-color: #f7fafc; /* gray-50 */
  /* Contrast ratio: 12.6:1 ✅ */
}

/* Use contrast checker: */
/* https://webaim.org/resources/contrastchecker/ */

Anti-Pattern 2: Over-Animating UI

What it looks like (BAD):

/* ❌ BAD: Excessive animation */
.card {
  transition: all 0.8s ease-in-out;
  transform: rotate(0deg) scale(1);
}

.card:hover {
  transform: rotate(360deg) scale(1.5);
  box-shadow: 0 50px 100px rgba(0,0,0,0.5);
  /* Distracting, nauseating, unprofessional */
}

.button {
  animation: rainbow 2s linear infinite;
  /* Constantly animating buttons = accessibility nightmare */
}

Why it fails:

• Triggers motion sickness for users with vestibular disorders
• Distracts from actual content
• Violates WCAG 2.1 Success Criterion 2.3.3
• Drains battery on mobile devices
• Looks unprofessional

Correct approach:

/* ✅ GOOD: Subtle, purposeful animation */
.card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  /* Subtle lift effect */
}

/* ✅ Respect user preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ✅ Purposeful loading spinner (not decorative) */
.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

Form Accessibility Examples

Accessible Input Component

// Input.tsx - Accessible input with error handling
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label: string;
  error?: string;
  helpText?: string;
}

export const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ label, error, helpText, id, ...props }, ref) => {
    const inputId = id || `input-${label.toLowerCase().replace(/\s/g, '-')}`;
    const errorId = `${inputId}-error`;
    const helpId = `${inputId}-help`;
    
    return (
      <div className="space-y-1">
        <label 
          htmlFor={inputId}
          className="block text-sm font-medium text-gray-700"
        >
          {label}
        </label>
        
        <input
          ref={ref}
          id={inputId}
          aria-invalid={!!error}
          aria-describedby={`${error ? errorId : ''} ${helpText ? helpId : ''}`.trim() || undefined}
          className={cn(
            'w-full px-3 py-2 border rounded-md',
            'focus:outline-none focus:ring-2 focus:ring-offset-0',
            error 
              ? 'border-red-500 focus:ring-red-500' 
              : 'border-gray-300 focus:ring-blue-500'
          )}
          {...props}
        />
        
        {error && (
          <p id={errorId} role="alert" className="text-sm text-red-600">
            {error}
          </p>
        )}
        
        {helpText && !error && (
          <p id={helpId} className="text-sm text-gray-500">
            {helpText}
          </p>
        )}
      </div>
    );
  }
);

Focus Management in Modal

// Modal.tsx - Accessible modal with focus trap
import { useEffect, useRef } from 'react';

export const Modal = ({ isOpen, onClose, title, children }) => {
  const modalRef = useRef<HTMLDivElement>(null);
  const previousActiveElement = useRef<HTMLElement | null>(null);

  useEffect(() => {
    if (isOpen) {
      // Save current focus
      previousActiveElement.current = document.activeElement as HTMLElement;
      
      // Focus first focusable element in modal
      const firstFocusable = modalRef.current?.querySelector<HTMLElement>(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      );
      firstFocusable?.focus();
    } else {
      // Restore focus when closing
      previousActiveElement.current?.focus();
    }
  }, [isOpen]);

  // Handle Escape key
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && isOpen) {
        onClose();
      }
    };
    
    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div 
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
      onClick={onClose}
      aria-modal="true"
      role="dialog"
      aria-labelledby="modal-title"
    >
      <div 
        ref={modalRef}
        className="bg-white rounded-lg shadow-xl max-w-md w-full p-6"
        onClick={e => e.stopPropagation()}
      >
        <h2 id="modal-title" className="text-xl font-semibold mb-4">
          {title}
        </h2>
        
        {children}
        
        <button 
          onClick={onClose}
          className="mt-4 px-4 py-2 bg-gray-200 rounded hover:bg-gray-300"
        >
          Close
        </button>
      </div>
    </div>
  );
};

Responsive Grid Pattern

/* Responsive grid that adapts to content */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--spacing-lg);
}

/* Explicit breakpoint grid */
.grid-responsive {
  display: grid;
  gap: var(--spacing-md);
  
  /* Mobile: 1 column */
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid-responsive {
    /* Tablet: 2 columns */
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-responsive {
    /* Desktop: 3 columns */
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .grid-responsive {
    /* Large desktop: 4 columns */
    grid-template-columns: repeat(4, 1fr);
  }
}

Loading Skeleton Pattern

// Skeleton.tsx - Content placeholder during loading
export const Skeleton = ({ 
  width = '100%', 
  height = '1rem', 
  rounded = 'md' 
}: {
  width?: string;
  height?: string;
  rounded?: 'sm' | 'md' | 'lg' | 'full';
}) => (
  <div 
    className={cn(
      'animate-pulse bg-gray-200',
      {
        'rounded-sm': rounded === 'sm',
        'rounded-md': rounded === 'md',
        'rounded-lg': rounded === 'lg',
        'rounded-full': rounded === 'full',
      }
    )}
    style={{ width, height }}
    aria-hidden="true"
  />
);

// Usage: Card skeleton
export const CardSkeleton = () => (
  <div className="border rounded-lg p-4 space-y-4">
    <Skeleton height="200px" rounded="md" /> {/* Image */}
    <Skeleton height="1.5rem" width="70%" /> {/* Title */}
    <Skeleton height="1rem" width="100%" /> {/* Description line 1 */}
    <Skeleton height="1rem" width="80%" /> {/* Description line 2 */}
    <Skeleton height="2.5rem" width="120px" rounded="md" /> {/* Button */}
  </div>
);

UI Designer - Technical Reference

Workflow 1: Creating a Design System from Scratch

Goal: Build production-ready design system with tokens, components, and documentation in 4-6 weeks.

Step 1: Design Token Architecture (Week 1)

// tokens/colors.json
{
  "color": {
    "brand": {
      "primary": { "value": "#3b82f6" },
      "secondary": { "value": "#8b5cf6" }
    },
    "semantic": {
      "success": { "value": "#10b981" },
      "error": { "value": "#ef4444" },
      "warning": { "value": "#f59e0b" }
    },
    "neutral": {
      "50": { "value": "#f9fafb" },
      "900": { "value": "#111827" }
    }
  },
  "font": {
    "family": {
      "sans": { "value": "Inter, system-ui, sans-serif" },
      "mono": { "value": "Fira Code, monospace" }
    },
    "size": {
      "xs": { "value": "12px" },
      "sm": { "value": "14px" },
      "base": { "value": "16px" },
      "lg": { "value": "18px" },
      "xl": { "value": "20px" }
    }
  },
  "spacing": {
    "xs": { "value": "4px" },
    "sm": { "value": "8px" },
    "md": { "value": "16px" },
    "lg": { "value": "24px" },
    "xl": { "value": "32px" }
  }
}

Step 2: Component Inventory & Prioritization (Week 1)

Priority 1 (Critical - Week 2):

• Button (primary, secondary, ghost, danger)
• Input (text, email, password, textarea)
• Select / Dropdown
• Checkbox / Radio
• Modal / Dialog

Priority 2 (Important - Week 3):

• Card
• Table (with sorting, pagination)
• Tabs
• Accordion
• Toast / Alert

Priority 3 (Nice-to-have - Week 4):

• Tooltip
• Badge / Chip
• Avatar
• Skeleton loader
• Progress bar

Step 3: Component Design with States (Weeks 2-4)

Example: Button Component

States:

• Default
• Hover
• Active (pressed)
• Focus (keyboard)
• Disabled
• Loading

Variants:

• Primary (filled, brand color)
• Secondary (outlined)
• Ghost (text only)
• Danger (filled, error color)

Sizes:

• Small (32px height, 12px padding)
• Medium (40px height, 16px padding)
• Large (48px height, 20px padding)

Step 4: Accessibility Annotations

For each component:

## Button Accessibility

- **Keyboard:** 
  - Tab: Focus button
  - Enter/Space: Activate button
  
- **Screen Reader:**
  - Announce button label
  - Announce disabled state if applicable
  - Loading state: aria-live="polite" announcement
  
- **Focus Indicator:**
  - 2px solid outline with 2px offset
  - Color: brand-primary-600
  - Contrast ratio: 3:1 against background
  
- **HTML Semantics:**
  - Use `<button>` element (not div with onClick)
  - type="button" for non-submit buttons

Step 5: Documentation with Storybook (Weeks 5-6)

// Button.stories.tsx
export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'ghost', 'danger']
    },
    size: {
      control: 'select',
      options: ['sm', 'md', 'lg']
    }
  }
};

export const Primary = {
  args: {
    children: 'Click me',
    variant: 'primary',
    size: 'md'
  }
};

export const AllStates = () => (
  <div>
    <Button>Default</Button>
    <Button disabled>Disabled</Button>
    <Button loading>Loading</Button>
  </div>
);

Workflow 2: Accessibility Audit & Remediation

Goal: Fix all WCAG 2.1 AA violations in existing UI.

Step 1: Run Automated Audit

# Using axe DevTools or Lighthouse
npm install -D @axe-core/cli
axe https://yourapp.com --tags wcag2a,wcag2aa

Step 2: Categorize Violations

Common issues found:

• Color contrast failures (text/background)
• Missing form labels
• Buttons without accessible names
• Missing focus indicators
• Images without alt text
• Keyboard navigation broken

Step 3: Fix Color Contrast

Before:

.secondary-text {
  color: #9ca3af; /* gray-400 */
  background: #ffffff;
  /* Contrast: 2.8:1 ❌ */
}

After:

.secondary-text {
  color: #6b7280; /* gray-500 */
  background: #ffffff;
  /* Contrast: 4.6:1 ✅ */
}

Step 4: Add Focus Indicators

button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  /* Contrast vs background: 3:1 minimum ✅ */
}

Step 5: Fix Form Accessibility

Before:

<input type="email" placeholder="Email" />

After:

<label for="email">Email Address</label>
<input 
  type="email" 
  id="email" 
  aria-describedby="email-error"
  aria-invalid="true"
/>
<span id="email-error" role="alert">Please enter valid email</span>

Color Palette Strategy

Brand Colors (primary, secondary)

Generate 10-step scale per color:

• Example: blue-50, blue-100, ..., blue-900
• Ensure 4.5:1 contrast for text
• Tool: coolors.co, huemint.com

Semantic Colors (success, warning, error, info)

Create accessible variants:

• Green (success): #10b981 (background), #065f46 (text on light)
• Red (error): #ef4444 (background), #991b1b (text on light)
• Yellow (warning): #f59e0b, ensure text contrast
• Blue (info): #3b82f6

Neutral Colors (grays for UI)

10-step grayscale:

• gray-50 (backgrounds) → gray-900 (text)
• Use for borders, dividers, disabled states

Dark Mode

Invert strategy (simple):

• Flip lightness values
• May need manual tweaks

Custom dark palette (recommended):

• Avoid pure black (#000) → use #0f172a
• Adjust colors for OLED displays
• Reduce shadow intensity

Integration Patterns

frontend-ui-ux-engineer

• Handoff: ui-designer creates component specs → frontend-ui-ux-engineer implements with React/Vue
• Collaboration: ui-designer defines visual design → frontend-ui-ux-engineer adds interactions, animations
• Tools: ui-designer uses Figma, design tokens; frontend-ui-ux-engineer uses Tailwind, Framer Motion

accessibility-tester

• Handoff: ui-designer completes design → accessibility-tester audits WCAG compliance
• Collaboration: Both ensure 4.5:1 contrast, keyboard navigation, screen reader compatibility
• Tools: ui-designer uses Stark (Figma plugin); accessibility-tester uses axe, WAVE, screen readers

ux-researcher

• Handoff: ux-researcher provides user insights → ui-designer creates designs based on research
• Collaboration: ux-researcher validates design prototypes with users → ui-designer iterates
• Tools: ux-researcher uses UserTesting, Hotjar; ui-designer creates interactive prototypes in Figma

react-specialist

• Handoff: ui-designer provides component specs → react-specialist implements complex component logic
• Collaboration: ui-designer defines component states → react-specialist implements state management
• Tools: ui-designer specifies props/states in Figma; react-specialist uses React, TypeScript

product-manager

• Handoff: product-manager defines features → ui-designer creates UI flows and mockups
• Collaboration: product-manager prioritizes features → ui-designer designs iteratively based on priority
• Tools: product-manager uses Jira, Notion; ui-designer creates user flows in Figma, Miro

Example Scenarios

Scenario 1: Designing a Component Library

User Request: "We need a component library for our dashboard"

Skill Response: 1. Queries context-manager for existing brand guidelines and design system 2. Analyzes current UI patterns in the dashboard 3. Designs component system structure and organization 4. Creates design tokens for colors, typography, spacing 5. Designs core components (buttons, inputs, cards, tables) 6. Defines component states (hover, focus, disabled, error) 7. Documents accessibility requirements for each component 8. Provides Figma components and developer specifications

Deliverable: "Dashboard component library completed. Designed 47 components with full state variations. Design tokens established for colors (47 variables), typography (24 fonts), spacing (scale), and shadows. All components validated for WCAG 2.1 AA accessibility. Figma library with comprehensive documentation provided. Developer handoff specifications included."

Scenario 2: Redesigning with Accessibility Focus

User Request: "Our app fails accessibility audit, can you fix it?"

Skill Response: 1. Reviews accessibility audit findings and violations 2. Analyzes current color contrast ratios 3. Identifies keyboard navigation issues 4. Reviews form labels and error handling 5. Redesigns components with accessibility standards 6. Adjusts colors for WCAG AA compliance 7. Adds focus indicators and skip links 8. Documents accessibility guidelines for future design

Deliverable: "Accessibility redesign completed. Fixed 87 WCAG violations. Updated color palette to meet 4.5:1 contrast ratio for all text and UI elements. Added focus indicators for all interactive elements. Improved form labels and error messages. All keyboard navigation flows verified. Accessibility documentation and guidelines provided for team."

Scenario 3: Dark Mode Implementation

User Request: "We need to add dark mode to our application"

Skill Response: 1. Analyzes existing light mode design and color system 2. Creates dark mode color palette with proper contrast 3. Adapts shadows for dark backgrounds 4. Adjusts images and illustrations for dark mode 5. Designs theme toggle and preferences 6. Tests transitions and handling between modes 7. Validates accessibility in both modes 8. Provides design token mapping for both themes

Deliverable: "Dark mode implementation designed. Created complete dark mode color palette with 67 color tokens, all meeting WCAG AA contrast. Adapted shadows and depth for dark backgrounds. Designed theme toggle with smooth transitions. System integration with OS theme preference. Both light and dark modes validated for accessibility. Design token system supports easy theme switching."