frontend-design

name	frontend-design
description	Expert frontend design skill for creating modern, accessible, and visually stunning web interfaces. Covers CSS architecture, component design, responsive layouts, animation, and design systems.
license	MIT
compatibility	vibe 2.0+
user-invocable	true
allowed-tools	["read_file","write_file","search_replace","grep","ask_user_question"]

Frontend Design Skill

This skill transforms vibe into an expert frontend designer and CSS architect. Use it when building or refining web interfaces, design systems, component libraries, or any visual UI work.

When to Use

• Building new UI components or pages
• Refactoring CSS or design systems
• Improving accessibility (a11y) and responsive behavior
• Adding animations, transitions, or micro-interactions
• Choosing color palettes, typography, or spacing scales
• Reviewing and critiquing existing frontend code

Design Principles

1. Mobile-First Responsive Design

   • Base styles for mobile, enhance with min-width media queries
   • Use fluid typography and spacing where possible
   • Test touch targets (min 44x44px)

2. Modern CSS Architecture

   • Prefer CSS Grid for 2D layouts, Flexbox for 1D
   • Use CSS custom properties (variables) for theming
   • Container queries for component-level responsiveness
   • Logical properties (inline-start, block-end) for i18n

3. Accessibility by Default

   • Semantic HTML5 elements (<article>, <nav>, <dialog>)
   • ARIA labels only when HTML semantics are insufficient
   • Focus states visible and keyboard-navigable
   • Color contrast WCAG AA minimum (4.5:1 for text)
   • prefers-reduced-motion respected

4. Performance

   • Avoid layout thrashing (read then write)
   • Use transform and opacity for animations
   • Lazy-load images, use modern formats (AVIF, WebP)
   • Contain complexity with contain: layout paint

5. Component Design

   • Atomic / BEM / CUBE CSS naming conventions
   • Design tokens for colors, spacing, typography, shadows
   • Composition over configuration (small, reusable pieces)

Slash Commands

• /design-review — Review current file or project for design quality, a11y, and responsive issues
• /component [name] — Scaffold a new accessible component with best practices
• /theme — Generate or refine a CSS custom property theme system
• /animate — Add purposeful animations to existing elements

Code Patterns

Responsive Container

.card-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

Accessible Focus Ring

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

Motion Preference

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

Fluid Typography

:root {
  --fs-base: clamp(1rem, 0.5vw + 0.875rem, 1.25rem);
  --fs-h1: clamp(2rem, 4vw + 1rem, 4rem);
}

Design Token Starter

:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-surface: #f8f9fa;
  --color-text: #1a1a2e;
  --color-muted: #6c757d;
  --color-accent: #4361ee;
  --color-accent-hover: #3a0ca3;
  --color-success: #2ecc71;
  --color-warning: #f39c12;
  --color-error: #e74c3c;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;

  /* Typography */
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

Best Practices Checklist

• Semantic HTML structure
• Mobile-first media queries
• Sufficient color contrast
• Keyboard navigable interactive elements
• Focus indicators visible
• Alt text for images
• prefers-reduced-motion handled
• Design tokens used instead of magic numbers
• CSS logical properties for directional styles
• Container queries for component-level responsiveness

Resources

• MDN Web Docs
• Web Interface Guidelines
• A11y Project Checklist
• Every Layout