Build responsive, mobile-first layouts using fluid containers, flexible units, media queries, and touch-friendly design that works across all screen sizes. Use this skill when creating or modifying UI layouts, responsive grids, breakpoint styles, mobile navigation, or any interface that needs to adapt to different screen sizes. Apply when working with responsive CSS, media queries, viewport settings, flexbox/grid layouts, mobile-first styling, breakpoint definitions (mobile, tablet, desktop), touch target sizing, relative units (rem, em, %), image optimization for different screens, or testing layouts across multiple devices. Use for any task involving multi-device support, responsive design patterns, or adaptive layouts.
Build responsive, mobile-first layouts using fluid containers, flexible units, media queries, and touch-friendly design that works across all screen sizes. Use this skill when creating or modifying UI layouts, responsive grids, breakpoint styles, mobile navigation, or any interface that needs to adapt to different screen sizes. Apply when working with responsive CSS, media queries, viewport settings, flexbox/grid layouts, mobile-first styling, breakpoint definitions (mobile, tablet, desktop), touch target sizing, relative units (rem, em, %), image optimization for different screens, or testing layouts across multiple devices. Use for any task involving multi-device support, responsive design patterns, or adaptive layouts.
Rule: Mobile-first development with consistent breakpoints, fluid layouts, relative units, and touch-friendly targets.
When to use this skill
When creating or modifying layouts that need to work on mobile, tablet, and desktop
When implementing mobile-first design patterns starting with mobile layout
When writing media queries or breakpoint-specific styles
When using flexible units (rem, em, %) instead of fixed pixels for scalability
When implementing fluid layouts with percentage-based widths or flexbox/grid
When ensuring touch targets meet minimum size requirements (44x44px) for mobile
When optimizing images and assets for different screen sizes and mobile networks
When testing UI across multiple device sizes and breakpoints
When maintaining readable typography across all screen sizes
When prioritizing content display on smaller screens through layout decisions
When using responsive design utilities in CSS frameworks (Tailwind, Bootstrap responsive classes)
This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend responsive.
Mobile-First Development - Mandatory
Always start with mobile layout, then enhance for larger screens.
