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 modern CSS techniques—container queries, fluid typography with clamp(), and intrinsic grid layouts—so components respond to their actual available space rather than hardcoded device sizes. ## Core Features & Use Cases - Container Queries: Build component-level responsiveness with container-type, named containers, and container query units (cqi, cqw) so cards, navs, and widgets adapt to their parent, not 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 patterns, Flexbox switcher layouts, responsive images with srcset/art direction, and mobile-friendly tables and navigation. - Use Case: You are building a product card component reused in a sidebar, a grid, and a full-width hero. Instead of viewport media queries, wrap it in a container and use @container rules so the card switches from stacked to horizontal layout based on its own width. ## Quick Start Use the responsive-design skill to convert my card component to use container queries and fluid typography with clamp().
