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