Frontend Responsive

This Skill provides Claude Code with specific guidance on how to adhere to coding standards for responsive web design and mobile-first development.

When to use this skill

• When creating or modifying layouts that need to work across different screen sizes
• When writing media queries or breakpoint-specific styles (@media queries, Tailwind sm:/md:/lg: prefixes)
• When implementing mobile-first development starting with mobile layouts
• When using fluid layouts with percentage-based widths or flexible containers
• When choosing between fixed pixels and relative units (rem, em, %, vw, vh)
• When testing UI across mobile, tablet, and desktop screen sizes
• When designing touch-friendly interfaces with appropriate tap target sizes (44x44px minimum)
• When optimizing images and assets for mobile network conditions
• When ensuring readable typography without requiring zoom on mobile
• When prioritizing content display on smaller screens
• When implementing responsive navigation patterns (hamburger menus, drawer navigation)
• When using responsive frameworks (Tailwind, Bootstrap grid, CSS Grid, Flexbox)