frontend-design

What this skill does

# Frontend Design

Expert guidance for creating beautiful, accessible, and responsive frontend designs using modern UI principles, color theory, and React+Tailwind CSS patterns.

- Leverage native parallel subagent dispatch and 200k+ context windows where available.



## Activation Conditions

Use symptom -> action triggers: when one matches, apply this skill and verify with the protocol below.

**Color & Design:**
- Choosing color palettes for applications
- Applying the 60-30-10 design rule
- Creating accessible color combinations
- Designing backgrounds, text, and accent colors
- Triggered on color selection, UI color palette design, gradient creation
- Ensuring WCAG contrast compliance

**UI Components & Layouts:**
- Creating React UI components with Tailwind CSS
- Building forms, modals, cards, badges, buttons, inputs, tabs, tables
- Implementing responsive design patterns
- Designing accessible UI components
- Working with states, variants, and animations

**Design Review & Correction:**
- Reviewing website design (local or remote)
- Checking UI for consistency issues
- Finding and fixing layout breakage
- Detecting responsive design problems
- Fixing accessibility violations
- "Review website design", "check UI", "fix layout", "find design problems"

## Part 1: Color Theory & Palettes

### Color Categories

- **Hot Colors**: Oranges, reds, and yellows - energizing, attention-grabbing
- **Cool Colors**: Blues, greens, and purples - calming, professional
- **Neutral Colors**: Grays and grayscale variations - balancing, sophisticated
- **Binary Colors**: Black and white - high contrast, stark

### The 60-30-10 Rule

**Golden Ratio for Color Balance:**

| Proportion | Role | Recommended Colors |
|------------|------|-------------------|
| **60%** | Primary/Dominant | Cool or light colors, neutrals |
| **30%** | Secondary | Complementary or analogous colors |
| **10%** | Accent | Complementary hot color for emphasis |

### Application in Code

```css
/* Tailwind CSS CSS Variables Approach */
:root {
  /* 60% - Primary (backgrounds, large areas) */
  --color-primary-bg: #f5f7fa;
  --color-primary-text: #374151;

  /* 30% - Secondary (cards, sections) */
  --color-secondary-bg: #ffffff;
  --color-secondary-border: #e5e7eb;
  --color-secondary-text: #1f2937;

  /* 10% - Accent (buttons, highlights) */
  --color-accent-primary: #3b82f6;
  --color-accent-hover: #2563eb;
  --color-accent-text: #ffffff;
}

/* Implementing in Tailwind config */
module.exports = {
  theme: {
    extend: {
      colors: {
        // 60% - Primary
        primary: {
          bg: 'var(--color-primary-bg)',
          text: 'var(--color-primary-text)',
        },
        // 30% - Secondary
        secondary: {
          bg: 'var(--color-secondary-bg)',
          border: 'var(--color-secondary-border)',
          text: 'var(--color-secondary-text)',
        },
        // 10% - Accent
        accent: {
          primary: 'var(--color-accent-primary)',
          hover: 'var(--color-accent-hover)',
          text: 'var(--color-accent-text)',
        },
      },
    },
  },
};
```

## Part 2: Accessibility (WCAG Compliance)

### Web Content Accessibility Guidelines (WCAG 2.1 Level AA

#### Contrast Requirements

| Element | Minimum Contrast Ratio | Recommended |
|----------|----------------------|-------------|
| Normal text (< 18pt) | 4.5:1 | 7:1 |
| Large text (18pt+) or bold | 3:1 | 4.5:1 |
| Graphical objects and UI components | 3:1 | Higher is better |

### Contrast Validation

```javascript
// Calculate contrast ratio
function getContrastRatio(foreground: string, background: string): number {
  const lum1 = getLuminance(foreground);
  const lum2 = getLuminance(background);

  function getLuminance(hex: string): number {
    const rgb = hexToRgb(hex);
    const [r, g, b] = rgb.map(c => {
      c /= 255;
      return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
    });
    return 0.2126 * r[0] + 0.7152 * r[1] + 0.0722 * r[2];
  }

  const lighter = Math.max(lum1, lum2);
  const darker = Math.min(lum1, lum2);

  return (lighter + 0.05) / (darker + 0.05);
}

// Validate
const ratio = getContrastRatio('#3b82f6', '#ffffff');
console.log(ratio >= 4.5 ? '✅ WCAG AA compliant' : '❌ Not compliant');
```

### Accessibility Best Practices

#### Color Independence

```css
/* ❌ BAD - Color-only indication */
.success {
  color: green;
}
.error {
  color: red;
}

/* ✅ GOOD - Color + other visual indicator */
.success {
  color: #22c55e;
  border-left: 4px solid #22c55e;
  padding-left: 8px;
}
.error {
  color: #ef4444;
  border-left: 4px solid #ef4444;
  padding-left: 8px;
}
```

#### Focus States

```css
/* Keyboard navigation needs visible focus */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Tailwind */
<button className="focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
```

#### ARIA Labels

```jsx
// Icon-only buttons need labels
<button aria-label="Close dialog">
  <CloseIcon />
</button>

// Toggle buttons need pressed state
<button aria-pressed={isSelected}>
  {isSelected ? 'Selected' : 'Not selected'}
</button>

// Screen reader only text
<span className="sr-only">Required field</span>
```

### Responsive Typography

```css
/* Use relative units for scalability */
html {
  font-size: 100%;  /* Browser default usually 16px */
}

body {
  font-size: 1rem;      /* 16px */
  line-height: 1.5;      /* Readable line height */
}

/* Responsive scaling */
@media (min-width: 768px) {
  body {
    font-size: 1.125rem;  /* 18px on tablets+ */
  }
}
```

---

## Part 3: Responsive Design

### Mobile-First Approach

```css
/* Base styles - mobile by default */
.container {
  width: 100%;
  padding: 1rem;
  display: block;  /* Column layout on mobile */
}

/* Tablet - 768px+ */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
    display: grid;  /* Grid on tablet */
    grid-template-columns: 1fr 1fr;
  }
}

/* Desktop - 1024px+ */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Large desktop - 1280px+ */
@media (min-width: 1280px) {
  .container {
    max-width: 1400px;
  }
}
```

### Tailwind Responsive Classes

```jsx
// Mobile-first approach
<div className="
  container
  mx-auto
  px-4        /* 16px padding on all sizes */
  py-8
">
  <div className="
    grid
    grid-cols-1      /* 1 column on mobile */
    md:grid-cols-2  /* 2 columns on tablet */
    lg:grid-cols-3  /* 3 columns on desktop */
    gap-4
  ">
    {items.map(item => (
      <Card key={item.id}>{item.content}</Card>
    ))}
  </div>
</div>
```

### Responsive Breakpoints (Tailwind Default)

| Breakpoint | Width | Device |
|-----------|--------|---------|
| sm | 640px | Small phones, portrait |
| md | 768px | Tablets, small laptops |
| lg | 1024px | Laptops, desktops |
| xl | 1280px | Large desktops |
| 2xl | 1536px | Extra large displays |

---

## Part 4: UI Component Patterns

### Button Component

```jsx
const buttonVariants = {
  primary: 'bg-blue-600 hover:bg-blue-700 text-white',
  secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-900',
  danger: 'bg-red-600 hover:bg-red-700 text-white',
  ghost: 'hover:bg-gray-100 text-gray-700',
  outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50',
};

const buttonSizes = {
  sm: 'px-3 py-1.5 text-sm',
  md: 'px-4 py-2 text-base',
  lg: 'px-5 py-2.5 text-lg',
  xl: 'px-6 py-3 text-xl',
};

export function Button({
  variant = 'primary',
  size = 'md',
  disabled = false,
  isLoading = false,
  className = '',
  children,
  ...props
}) {
  return (
    <button
      disabled={disabled || isLoading}
      className={cn(
        // Base styles
        'rounded-lg font-medium transition-all',
        'focus:outline-none focus:ring-2 focus:ring-offset-2',
        'disabled:opacity-50 disabled:cursor-not-allowed',
        // Variant styles
        buttonVariants[var