What problem does it solve? Building interfaces that adapt cleanly across screen sizes often leads to device-specific breakpoints, fixed pixel values, and components that break when reused in different contexts. This Skill provides modern CSS patterns for creating layouts that respond to content and container size rather than viewport alone. ## Core Features & Use Cases - Container Queries: Build component-level responsiveness with container-type, named containers, and container query units (cqi, cqw) so components adapt wherever they are placed. - Fluid Typography & Spacing: Generate clamp()-based type and spacing scales that scale smoothly between minimum and maximum bounds without media query jumps. - Layout Patterns: Apply CSS Grid auto-fit layouts, Flexbox sidebar and switcher patterns, responsive navigation, tables, and images with srcset and art direction. - Use Case: You are building a card component reused in a sidebar, a grid, and a full-width hero. Instead of viewport breakpoints, wrap it in a container query context so it switches from stacked to horizontal layout based on its own width. ## Quick Start Use the responsive-design skill to refactor my card component so it adapts to its container width using container queries and fluid typography.
