responsive-design

Use when implementing responsive layouts, fluid typography, spacing systems, container queries, or mobile-first design patterns. Also use when debugging viewport issues, sizing inconsistencies, or cross-device rendering problems.

Model	Source
sonnet	pack: frontend

Overview

Mobile-first, component-driven, fluid everything. Opinionated patterns for Next.js/Tailwind v4. Goal: zero layout bugs across screen sizes without writing a breakpoint for every edge case.

Core principles:

Mobile-first — default styles = smallest viewport, scale up with sm:, md:, lg:
Container queries for components, media queries for page layout
Fluid type and spacing with clamp() — no stepped jumps
svh for fixed/sticky elements, dvh for scroll containers, never raw vh on

Full Reference

┏━ 🔧 responsive-design ━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ Use when implementing responsive layouts, flui… ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

Responsive Design

Overview

Mobile-first, component-driven, fluid everything. Opinionated patterns for Next.js/Tailwind v4. Goal: zero layout bugs across screen sizes without writing a breakpoint for every edge case.

Core principles:

Mobile-first — default styles = smallest viewport, scale up with sm:, md:, lg:
Container queries for components, media queries for page layout
Fluid type and spacing with clamp() — no stepped jumps
svh for fixed/sticky elements, dvh for scroll containers, never raw vh on mobile

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Quick Reference

Viewport Unit Decision

Unit	Behavior	Use For
`vh`	Static — ignores mobile chrome	Desktop-only layouts
`svh`	Small viewport — chrome fully visible	Sticky headers, fixed navs, modals
`lvh`	Large viewport — chrome hidden	Rarely — almost never correct
`dvh`	Dynamic — updates as chrome shifts	Full-height scroll containers

clamp() Formula

clamp(MIN_rem, {intercept}rem + {slope * 100}vw, MAX_rem) — see reference/fluid-type.md for full derivation.

Container Query vs Media Query

Scenario	Use
Page-level layout (sidebar collapses)	Media query
OS preferences (dark mode, reduced motion)	Media query
Component adapts to its context	Container query
Same card in sidebar vs grid	Container query

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Reference Index

I want to…	File
Mobile-first strategy, breakpoint overrides	`reference/mobile-first.md`
Fluid type, clamp() formula, type scale, line height	`reference/fluid-type.md`
Spacing tokens, @theme vs :root, vertical rhythm	`reference/spacing.md`
Container queries, named containers, @container setup	`reference/container-queries.md`
svh/dvh/lvh units, safe area insets, mobile layout shell	`reference/viewport-units.md`
srcset, sizes, art direction, next/image, aspect-ratio	`reference/responsive-images.md`
auto-fill/auto-fit, holy grail, sidebar, masonry patterns	`reference/grid-patterns.md`
Tap targets, scroll containers, form inputs, iOS zoom	`reference/touch-mobile.md`

Usage: Read the reference file matching your current task from the index above. Each file is self-contained with code examples and inline gotchas.