Frontend Responsive

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