Responsive & Multiplatform Design

Web responsiveness: mobile-first, fluid-first

• Mobile-first. Design and build for the smallest viewport first, then layer in complexity at larger sizes — not the reverse. Forces content prioritization instead of cramming a desktop layout down.
• Fluid sizing (clamp()) where it fits, fixed breakpoints as the fallback. Type scale, spacing, and container widths should scale smoothly with viewport via clamp(min, preferred, max) rather than jumping at fixed breakpoints wherever that's practical. Fall back to Tailwind's standard breakpoints (sm/md/lg/xl) for layout restructuring that genuinely needs a hard switch (e.g. sidebar collapsing to a bottom nav) — fluid sizing solves scaling, not structural layout changes.
• Don't invent a custom breakpoint set without a specific reason — the framework defaults are the floor, same principle as the spacing-scale decision in the tokens skill.