Claude-skill-registry Frontend Responsive

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.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/frontend-responsive" ~/.claude/skills/majiayu000-claude-skill-registry-frontend-responsive-bd4db4 && rm -rf "$T"

manifest: skills/data/frontend-responsive/SKILL.md

source content

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