| name | Frontend Responsive |
| description | Design mobile-first responsive layouts using fluid containers, relative units, standard breakpoints, and touch-friendly interfaces that adapt seamlessly across devices from mobile to desktop. Use this skill when implementing responsive designs, media queries, viewport configurations, or testing across screen sizes. Applies to any frontend layout work requiring optimization for mobile phones, tablets, and desktop displays with readable typography and appropriate content prioritization. |
Frontend Responsive
When to use this skill
- When implementing layouts that need to work on mobile, tablet, and desktop screen sizes
- When using CSS media queries with standard breakpoints (mobile: 320-768px, tablet: 768-1024px, desktop: 1024px+)
- When applying responsive Tailwind classes like
sm:, md:, lg:, xl: modifiers
- When creating fluid layouts with percentage-based widths or CSS Grid/Flexbox that adapt to screen size
- When using relative units (
rem, em) instead of fixed pixels for scalable, accessible sizing
- When designing mobile-first with progressive enhancement for larger screens
- When ensuring touch targets are at least 44x44px for mobile usability
- When optimizing images and assets for mobile network conditions and different screen densities
- When testing UI changes across multiple device sizes and verifying responsive behavior
- When maintaining readable font sizes across breakpoints without requiring user zoom
- When prioritizing content display on smaller screens (showing critical info first, hiding secondary content)
- When configuring viewport meta tags for proper mobile rendering
- When implementing responsive navigation patterns (hamburger menus, collapsible sections, drawer navigation)
Frontend Responsive
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.
Instructions
For details, refer to the information provided in this file:
frontend responsive
