frontend-designer

# Frontend Designer

A comprehensive skill for frontend designers and developers to build beautiful, accessible, and performant user interfaces with modern best practices.

## What This Skill Does

Helps frontend designers/developers with:
- **Component Design & Development** - Build reusable, accessible components
- **Design Systems** - Implement tokens, patterns, and documentation
- **Responsive Design** - Mobile-first, fluid layouts
- **Accessibility (WCAG 2.1)** - Inclusive design patterns
- **Modern CSS** - Flexbox, Grid, custom properties
- **Performance Optimization** - Fast, efficient frontends
- **Framework Patterns** - React, Vue, Svelte best practices
- **Design-to-Code** - Figma to production workflows

## Why This Skill Matters

**Without systematic approach:**
- Inconsistent component implementations
- Accessibility issues
- Poor responsive behavior
- Duplicate code and styles
- Hard to maintain
- Performance problems

**With this skill:**
- Consistent, reusable components
- WCAG AA compliant by default
- Mobile-first responsive design
- Design system aligned
- Maintainable codebase
- Fast, optimized delivery

## Core Principles

### 1. Accessibility First
- WCAG 2.1 AA minimum
- Semantic HTML
- Keyboard navigation
- Screen reader support
- Focus management
- Color contrast

### 2. Mobile-First Responsive
- Start with mobile (320px)
- Progressive enhancement
- Fluid typography
- Flexible layouts
- Touch-friendly targets

### 3. Performance by Default
- Minimal CSS/JS
- Lazy loading
- Optimized images
- Critical CSS
- Tree shaking

### 4. Component-Driven
- Atomic design methodology
- Reusable components
- Props-based customization
- Composition over inheritance

### 5. Design System Aligned
- Design tokens
- Consistent spacing
- Typography scale
- Color palette
- Component library

## Component Patterns

### Button Component

**Accessible, flexible button pattern:**

```tsx
// React example
interface ButtonProps {
  variant?: 'primary' | 'secondary' |