Name: Frontend Responsive
Author: GreyssonEnterprises

Frontend Responsive

Design mobile-first responsive layouts using fluid containers, relative units, standard breakpoints, and touch-friendly interfaces that adapt seamlessly across devices from mobile to desktop. Use this skill when implementing responsive designs, media queries, viewport configurations, or testing across screen sizes. Applies to any frontend layout work requiring optimization for mobile phones, tablets, and desktop displays with readable typography and appropriate content prioritization.

GreyssonEnterprises0 星标2025年11月2日

职业
分类: 移动端

When to use this skill

When implementing layouts that need to work on mobile, tablet, and desktop screen sizes
When using CSS media queries with standard breakpoints (mobile: 320-768px, tablet: 768-1024px, desktop: 1024px+)
When applying responsive Tailwind classes like sm:, md:, lg:, xl: modifiers
When creating fluid layouts with percentage-based widths or CSS Grid/Flexbox that adapt to screen size
When using relative units (rem, em) instead of fixed pixels for scalable, accessible sizing
When designing mobile-first with progressive enhancement for larger screens
When ensuring touch targets are at least 44x44px for mobile usability
When optimizing images and assets for mobile network conditions and different screen densities
When testing UI changes across multiple device sizes and verifying responsive behavior
When maintaining readable font sizes across breakpoints without requiring user zoom
When prioritizing content display on smaller screens (showing critical info first, hiding secondary content)
When configuring viewport meta tags for proper mobile rendering

When to use this skill

When implementing layouts that need to work on mobile, tablet, and desktop screen sizes
When using CSS media queries with standard breakpoints (mobile: 320-768px, tablet: 768-1024px, desktop: 1024px+)
When applying responsive Tailwind classes like sm:, md:, lg:, xl: modifiers
When creating fluid layouts with percentage-based widths or CSS Grid/Flexbox that adapt to screen size
When using relative units (rem, em) instead of fixed pixels for scalable, accessible sizing
When designing mobile-first with progressive enhancement for larger screens
When ensuring touch targets are at least 44x44px for mobile usability
When optimizing images and assets for mobile network conditions and different screen densities
When testing UI changes across multiple device sizes and verifying responsive behavior
When maintaining readable font sizes across breakpoints without requiring user zoom
When prioritizing content display on smaller screens (showing critical info first, hiding secondary content)
When configuring viewport meta tags for proper mobile rendering

Frontend Responsive

When to use this skill

Frontend Responsive

When to use this skill

Frontend Responsive

Instructions

Liquid Glass Design

Compose Multiplatform Patterns

Foundation Models On Device

Swiftui Patterns

Foundation Models On Device

Swiftui Patterns