responsive-design
Installation
Summary
Modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first strategies.
- Container queries enable component-level responsiveness independent of viewport size, with support for container query units (cqi, cqw, cqh) and style queries
- Fluid typography and spacing via CSS clamp() scales smoothly across screen sizes with min/max bounds, eliminating discrete breakpoint jumps
- CSS Grid auto-fit/auto-fill patterns and Flexbox provide intrinsic layouts that adapt based on content; subgrid enables nested alignment
- Mobile-first media query approach with content-based breakpoints and feature queries (@supports) for progressive enhancement across browsers
SKILL.md
Responsive Design
Master modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts.
When to Use This Skill
- Implementing mobile-first responsive layouts
- Using container queries for component-based responsiveness
- Creating fluid typography and spacing scales
- Building complex layouts with CSS Grid and Flexbox
- Designing breakpoint strategies for design systems
- Implementing responsive images and media
- Creating adaptive navigation patterns
- Building responsive tables and data displays
Detailed patterns and worked examples
Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.