Generates mobile-first, fluid layouts and responsive design systems using modern CSS and React patterns.
This skill provides a comprehensive framework for building modern, responsive web interfaces directly within Claude Code. It offers standardized mobile-first breakpoints, fluid typography scales using CSS clamp, and flexible grid layouts that adapt seamlessly across devices. By integrating token-based design systems and React-specific hooks like useMediaQuery, the skill ensures that developers can implement production-ready, accessible, and performant UI components that prioritize mobile users while scaling elegantly to large desktops.
Key Features
01Custom React hooks for programmatic media query tracking and conditional rendering.
02Standardized mobile-first breakpoint system ranging from mobile to ultra-wide screens.
03Adaptive CSS layout patterns including fluid grids, responsive stacks, and container queries.
04Design token integration for consistent spacing and container max-widths.
05Fluid typography implementation using CSS clamp for smooth, automated text scaling.
061 GitHub stars
Use Cases
01Building complex React components that need to change structure dynamically based on screen size.
02Converting a fixed-width desktop site into a mobile-first responsive application.
03Implementing a fluid design system with consistent spacing and typography tokens.
