Claude Code Plugins

Community-maintained marketplace

Feedback

Frontend Responsive

@FlorianRiquelme/statamic-assets
0
0

Implement responsive designs using mobile-first development, standard breakpoints, fluid layouts with flexible containers, relative units (rem/em), touch-friendly design with appropriately-sized tap targets, optimized assets for mobile networks, readable typography across breakpoints, and content prioritization for smaller screens. Use this skill when building responsive layouts, implementing media queries, creating mobile-friendly interfaces, optimizing for different screen sizes, ensuring touch-friendly interactions, or testing across mobile, tablet, and desktop devices. This skill applies when working on any frontend layout code, CSS media queries, responsive component design, or mobile optimization.

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 Implement responsive designs using mobile-first development, standard breakpoints, fluid layouts with flexible containers, relative units (rem/em), touch-friendly design with appropriately-sized tap targets, optimized assets for mobile networks, readable typography across breakpoints, and content prioritization for smaller screens. Use this skill when building responsive layouts, implementing media queries, creating mobile-friendly interfaces, optimizing for different screen sizes, ensuring touch-friendly interactions, or testing across mobile, tablet, and desktop devices. This skill applies when working on any frontend layout code, CSS media queries, responsive component design, or mobile optimization.

Frontend Responsive

When to use this skill

  • When building responsive layouts that adapt to different screen sizes
  • When implementing media queries for mobile, tablet, and desktop breakpoints
  • When creating mobile-friendly interfaces and navigation
  • When optimizing UI for different screen sizes and orientations
  • When ensuring touch-friendly interactions with appropriately-sized tap targets
  • When testing across mobile, tablet, and desktop devices
  • When working on CSS layouts (flexbox, grid) that need to be responsive
  • When optimizing images and assets for mobile network conditions
  • When implementing mobile-first development strategies
  • When using relative units (rem, em) for scalable typography and spacing
  • When prioritizing content for smaller screens
  • When ensuring readable font sizes across all breakpoints

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