Claude Code Plugins

Community-maintained marketplace

Feedback

Frontend Responsive

@grimmolf/mga-soap-calculator
0
0

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.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name Frontend Responsive
description 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.

Frontend Responsive

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 implementing responsive navigation patterns (hamburger menus, collapsible sections, drawer navigation)

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.

Instructions

For details, refer to the information provided in this file: frontend responsive