---

name: Frontend Responsive description: Implement mobile-first responsive designs using fluid layouts, relative units, responsive images, and touch-friendly interfaces. Use this skill when creating layouts that adapt across screen sizes, implementing breakpoints, or optimizing for mobile and tablet devices. When working on responsive component layouts, Tailwind responsive utility classes (sm:, md:, lg:, xl:), CSS media queries and breakpoints, fluid typography with clamp() or viewport units, responsive images with srcset and sizes attributes, mobile navigation menus and hamburger patterns, touch target sizing for mobile devices, responsive grid and flexbox layouts, container queries for component-based responsiveness, or viewport meta tags and mobile optimization.

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.

When to use this skill

• When implementing mobile-first layouts that scale up to larger screens
• When using Tailwind responsive utility classes (sm:, md:, lg:, xl:, 2xl:)
• When writing CSS media queries with min-width breakpoints
• When implementing responsive typography using clamp(), rem, or viewport units
• When using Astro's Image component with responsive srcset and sizes
• When creating mobile navigation menus with toggle/hamburger patterns
• When ensuring touch targets meet minimum size requirements (44x44px)
• When building responsive grids using CSS Grid auto-fit or Flexbox wrapping
• When implementing container queries for component-based responsiveness
• When optimizing images and assets for different screen sizes and resolutions
• When testing layouts across mobile, tablet, and desktop breakpoints

Instructions

For details, refer to the information provided in this file: frontend responsive