---

name: Frontend Responsive description: Build responsive, mobile-first layouts using fluid containers, standard breakpoints, and adaptive design patterns that work across all screen sizes. Use this skill when implementing responsive layouts, creating mobile-first designs, working with CSS breakpoints or media queries, implementing fluid grids or flexible containers, using responsive utility classes (Tailwind breakpoint modifiers), ensuring touch-friendly tap targets, optimizing layouts for different screen sizes, implementing responsive typography, working with responsive images or assets, testing UI across devices, or creating adaptive navigation patterns. Use when working with responsive CSS, mobile layouts, tablet layouts, desktop layouts, or any UI code that needs to adapt to different viewport sizes.

When to use this skill

• When implementing responsive layouts or grids
• When creating mobile-first designs
• When working with CSS breakpoints or media queries
• When implementing fluid containers or flexible grids
• When using responsive utility classes (Tailwind sm:, md:, lg:, xl: modifiers)
• When ensuring touch-friendly tap targets for mobile
• When optimizing layouts for different screen sizes (mobile, tablet, desktop)
• When implementing responsive typography or font scaling
• When working with responsive images, picture elements, or srcset
• When testing UI across multiple device sizes
• When creating adaptive navigation patterns (hamburger menus, drawer navigation)
• When implementing content priority or hiding elements on smaller screens
• When using relative units (rem, em) for scalability
• When optimizing performance for mobile networks

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