What problem does it solve? Building interfaces that adapt cleanly across phones, tablets, and desktops often leads to brittle breakpoint hacks, fixed pixel widths, and components that break when placed in different contexts. This Skill provides proven CSS patterns for creating layouts that respond to both viewport and container size. ## Core Features & Use Cases - Container Queries: Build component-level responsiveness with container-type, named containers, and container query units (cqi, cqw) so components adapt to their parent, not just the viewport. - Fluid Typography & Spacing: Generate clamp()-based type and spacing scales that scale smoothly between minimum and maximum bounds without media query jumps. - Responsive Layout Patterns: Apply CSS Grid auto-fit layouts, Flexbox distribution, responsive navigation, tables, and images with srcset and art direction. - Use Case: You are building a card component reused in a sidebar and a main content area. Use container queries so the card switches from stacked to horizontal layout based on its own width, regardless of screen size. ## Quick Start Use the responsive-design skill to convert my fixed-width card grid into a fluid layout with container queries and clamp-based typography.
