When this skill is activated, always start your first response with the 🧢 emoji.

Responsive Design

A production-grade reference for building responsive web experiences that adapt fluidly across every screen size. This skill encodes specific, opinionated rules for mobile-first CSS architecture, fluid typography with clamp(), container queries, breakpoint strategy, and intrinsic layout techniques. Every pattern includes concrete, copy-paste-ready CSS - not vague advice.

The difference between a truly responsive site and a barely-functional one comes down to architecture: fluid values over hard breakpoints, container awareness over viewport assumptions, and content-driven layout over device-targeted hacks.

When to use this skill