Implement responsive designs using mobile-first development, fluid layouts, standard breakpoints, and relative units to ensure optimal viewing across all device sizes. Use this skill when creating layouts, implementing breakpoints, styling for different screen sizes, or ensuring mobile compatibility. When working with responsive CSS, media queries, viewport configurations, or mobile-optimized components. When testing across device sizes, implementing touch-friendly interfaces, or optimizing f...
Installs into .claude/skills of the current project.
Are you the author of Frontend Responsive?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/majiayu000-frontend-responsive)
---
name: Frontend Responsive
description: Implement responsive designs using mobile-first development, fluid layouts, standard breakpoints, and relative units to ensure optimal viewing across all device sizes. Use this skill when creating layouts, implementing breakpoints, styling for different screen sizes, or ensuring mobile compatibility. When working with responsive CSS, media queries, viewport configurations, or mobile-optimized components. When testing across device sizes, implementing touch-friendly interfaces, or optimizing for mobile performance. When working in any frontend file that affects layout, spacing, typography, or visual presentation across different screen sizes.
---
# Frontend Responsive
## When to use this skill
- When implementing layouts that need to work across multiple screen sizes
- When writing media queries or using responsive breakpoints
- When applying responsive utility classes (e.g., Tailwind's `sm:`, `md:`, `lg:`)
- When creating mobile-first designs and progressively enhancing for larger screens
- When using fluid layouts with percentage-based widths or flexbox/grid
- When choosing between fixed pixels and relative units (rem, em)
- When ensuring touch-friendly tap targets (minimum 44x44px)
- When optimizing images and assets for mobile devices
- When testing UI changes across mobile, tablet, and desktop screen sizes
- When implementing responsive typography that remains readable at all sizes
- When prioritizing content for smaller screens
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](../../../agent-os/standards/frontend/responsive.md)
