frontend-designer

{label} {required && *}

  {hint && (
    <p id={hintId} className="input-hint">
      {hint}
    </p>
  )}

  <input
    id={id}
    type={type}
    className={`input ${error ? 'input--error' : ''}`}
    aria-required={required}
    aria-invalid={!!error}
    aria-describedby={error ? errorId : hint ? hintId : undefined}
    {...props}
  />

  {error && (
    <p id={errorId} className="input-error" role="alert">
      {error}
    </p>
  )}
</div>

); };

Design Tokens

CSS Custom Properties for design system:

:root { / Colors - Primary / --color-primary: #0066FF; --color-primary-hover: #0052CC; --color-on-primary: #FFFFFF;

/ Colors - Surface / --color-surface: #FFFFFF; --color-surface-variant: #F5F5F5; --color-on-surface: #1A1A1A;

/ Colors - Borders / --color-border: #E0E0E0; --color-border-hover: #BDBDBD;

/ Colors - Semantic / --color-error: #D32F2F; --color-success: #388E3C; --color-warning: #F57C00; --color-info: #1976D2;

/ Spacing Scale (8px base) / --space-1: 0.25rem; / 4px / --space-2: 0.5rem; / 8px / --space-3: 0.75rem; / 12px / --space-4: 1rem; / 16px / --space-5: 1.5rem; / 24px / --space-6: 2rem; / 32px / --space-8: 3rem; / 48px / --space-10: 4rem; / 64px /

/ Typography 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 /

/ Font Families / --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "SF Mono", Monaco, "Cascadia Code", monospace;

/ Line Heights / --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75;

/ Border Radius / --radius-sm: 0.25rem; / 4px / --radius-md: 0.5rem; / 8px / --radius-lg: 1rem; / 16px / --radius-full: 9999px;

/ Shadows / --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

/ Focus Ring / --color-focus: #0066FF;

/ Transitions / --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; }

/ Dark mode / @media (prefers-color-scheme: dark) { :root { --color-surface: #1A1A1A; --color-surface-variant: #2A2A2A; --color-on-surface: #FFFFFF; --color-border: #3A3A3A; } }

Responsive Design Patterns Mobile-First Breakpoints / Mobile-first approach / .container { padding: var(--space-4);

/ Tablet: 768px and up / @media (min-width: 48rem) { padding: var(--space-6); }

/ Desktop: 1024px and up / @media (min-width: 64rem) { padding: var(--space-8); max-width: 1200px; margin: 0 auto; } }

Fluid Typography / Responsive typography / h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: var(--leading-tight); }

h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }

p { font-size: clamp(1rem, 2vw, 1.125rem); line-height: var(--leading-normal); }

Grid Layouts / Responsive grid / .grid { display: grid; gap: var(--space-4);

/ Auto-fit columns (min 280px) / grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/ 12-column grid system / .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-4); }

.col-span-4 { grid-column: span 4; }

/ Stack on mobile / @media (max-width: 48rem) { .col-span-4 { grid-column: span 12; } }

Accessibility Patterns Skip Links export const SkipLink = () => ( Skip to main content );

.skip-link { position: absolute; top: -40px; left: 0; background: var(--color-primary); color: var(--color-on-primary); padding: var(--space-2) var(--space-4); text-decoration: none; z-index: 100;

&:focus { top: 0; } }

Focus Management // Modal with focus trap export const Modal = ({ isOpen, onClose, children }) => { const modalRef = useRef(null);

useEffect(() => { if (isOpen) { // Save currently focused element const previouslyFocused = document.activeElement;

  // Focus first focusable element in modal
  const firstFocusable = modalRef.current?.querySelector(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  firstFocusable?.focus();

  // Restore focus on close
  return () => previouslyFocused?.focus();
}

}, [isOpen]);

if (!isOpen) return null;

return (

); };

ARIA Labels // Icon button with accessible label export const IconButton = ({ icon, label, ...props }) => ( <button aria-label={label} className="icon-button"

<span aria-hidden="true">{icon}</span>

);

// Loading state export const LoadingButton = ({ loading, children, ...props }) => ( <button aria-busy={loading} aria-live="polite" disabled={loading}

{loading ? 'Loading...' : children}

);

Performance Optimization Critical CSS

Lazy Loading Images export const LazyImage = ({ src, alt, ...props }) => ( );

Code Splitting // React lazy loading const Dashboard = lazy(() => import('./Dashboard'));

function App() { return ( }> ); }

Modern CSS Techniques Container Queries .card { container-type: inline-size; }

.card-content { display: flex; flex-direction: column;

/ Switch to row layout when container > 400px / @container (min-width: 400px) { flex-direction: row; } }

CSS Grid Auto-Fit .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-4); }

Custom Properties for Theming / Light theme (default) / :root { --bg: #ffffff; --text: #000000; }

/ Dark theme / [data-theme="dark"] { --bg: #000000; --text: #ffffff; }

body { background: var(--bg); color: var(--text); }

Component Library Structure src/ ├── components/ │ ├── Button/ │ │ ├── Button.tsx │ │ ├── Button.css │ │ ├── Button.test.tsx │ │ └── Button.stories.tsx │ ├── Card/ │ ├── Input/ │ └── index.ts ├── tokens/ │ ├── colors.css │ ├── spacing.css │ ├── typography.css │ └── index.css ├── utils/ │ ├── a11y.ts │ └── responsive.ts └── index.ts

Using This Skill Generate Component ./scripts/generate_component.sh Button

Creates component with:

TypeScript/JSX file CSS module Test file Storybook story Accessibility checks Design System Setup ./scripts/setup_design_system.sh

Creates:

Design tokens (CSS custom properties) Base styles Component templates Documentation structure Accessibility Audit ./scripts/audit_accessibility.sh

Checks:

Color contrast ratios Keyboard navigation ARIA attributes Semantic HTML Focus management Best Practices Component Design

✅ DO:

Use semantic HTML Make components keyboard accessible Provide ARIA labels Support both light and dark modes Make touch targets 44x44px minimum Use proper heading hierarchy Handle loading and error states

❌ DON'T:

Use divs for buttons Forget focus styles Hard-code colors Ignore mobile viewports Skip alt text on images Create inaccessible modals CSS Best Practices

✅ DO:

Use design tokens Mobile-first responsive BEM or CSS modules for naming Logical properties (inline-start vs left) Modern layout (flexbox, grid)

❌ DON'T:

Use !important Deep nesting (> 3 levels) Fixed pixel values everywhere Browser-specific hacks Inline styles Performance

✅ DO:

Lazy load images Code split routes Minimize CSS Use system fonts Optimize images (WebP) Critical CSS inline

❌ DON'T:

Load unused CSS Large JavaScript bundles Unoptimized images Blocking resources Too many web fonts Framework-Specific Patterns React // Composition pattern export const Card = ({ children }) => (

);

export const CardHeader = ({ children }) => (

);

// Usage Title Content

Vue

Resources

All reference materials included:

Design token systems Accessibility checklist (WCAG 2.1) Responsive design patterns Component library templates Performance optimization guide Summary

This skill provides:

Accessible components - WCAG AA by default Responsive design - Mobile-first approach Design systems - Token-based consistency Modern CSS - Flexbox, Grid, custom properties Performance - Optimized delivery Best practices - Production-ready patterns

Use this skill to build beautiful, accessible, performant frontends.

"Good design is accessible design."