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:

// React example
interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  loading?: boolean;
  children: React.ReactNode;
  onClick?: () => void;
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  disabled = false,
  loading = false,
  children,
  onClick,
  ...props
}) => {
  return (
    <button
      className={`btn btn--${variant} btn--${size}`}
      disabled={disabled || loading}
      onClick={onClick}
      aria-busy={loading}
      {...props}
    >
      {loading ? <Spinner /> : children}
    </button>
  );
};

CSS (with design tokens):

.btn {
  /* Base styles */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  font-family: var(--font-sans);
  font-weight: 600;
  text-decoration: none;

  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;

  transition: all 0.2s ease;

  /* Accessibility */
  min-height: 44px; /* WCAG touch target */

  &:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

/* Variants */
.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);

  &:hover:not(:disabled) {
    background: var(--color-primary-hover);
  }
}

.btn--secondary {
  background: var(--color-secondary);
  color: var(--color-on-secondary);
}

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid currentColor;
}

/* Sizes */
.btn--sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

.btn--md {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
}

.btn--lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-lg);
}

Card Component

Flexible, accessible card:

interface CardProps {
  variant?: 'elevated' | 'outlined' | 'filled';
  padding?: 'none' | 'sm' | 'md' | 'lg';
  interactive?: boolean;
  children: React.ReactNode;
}

export const Card: React.FC<CardProps> = ({
  variant = 'elevated',
  padding = 'md',
  interactive = false,
  children,
}) => {
  const Component = interactive ? 'button' : 'div';

  return (
    <Component
      className={`
        card
        card--${variant}
        card--padding-${padding}
        ${interactive ? 'card--interactive' : ''}
      `}
      {...(interactive && { role: 'button', tabIndex: 0 })}
    >
      {children}
    </Component>
  );
};

CSS:

.card {
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.card--elevated {
  box-shadow: var(--shadow-md);
}

.card--outlined {
  border: 1px solid var(--color-border);
}

.card--filled {
  background: var(--color-surface-variant);
}

.card--interactive {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }

  &:focus-visible {
    outline: 2px solid var(--color-focus);
    outl

...