Responsive Design

This covers the modern responsive toolkit you actually need: container queries for component-level breakpoints, fluid typography with clamp(), and CSS Grid patterns that adapt without media query bloat. Use it when you're building layouts that need to respond to their container rather than just the viewport, or when you want typography that scales smoothly instead of jumping at breakpoints. The patterns show auto-fit grids, fluid type scales, and mobile-first strategies with real code examples in both vanilla CSS and React with Tailwind. It's opinionated toward newer techniques like container queries over traditional viewport-based approaches, which is the right direction but means you'll need to consider browser support for older projects.

Install to Claude Code

npx -y skills add wshobson/agents --skill responsive-design --agent claude-code