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 device assumptions. ## 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 own size. - Fluid Typography & Spacing: Create smooth scaling type and spacing systems using clamp(), min(), max(), and viewport units without excessive media queries. - Responsive Layout Patterns: Apply CSS Grid auto-fit patterns, Flexbox switcher/sidebar layouts, responsive tables, navigation, and images with srcset and art direction. - Use Case: When building a dashboard card that must work in a narrow sidebar and a wide main panel, use container queries so the card switches from stacked to side-by-side layout based on its container width, not the viewport. ## 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.
