Claude Code Plugins

Community-maintained marketplace

Feedback

Frontend Responsive

@overtimepog/rpg-mcp
1
0

Implement responsive designs that adapt seamlessly across mobile, tablet, and desktop devices using mobile-first development, fluid layouts, and appropriate breakpoints. Use this skill when creating or modifying UI layouts, styling, or any visual design that needs to work across different screen sizes. Apply when working with responsive CSS, media queries, breakpoint definitions, viewport settings, flexbox or grid layouts, or mobile-first styling. Use when implementing fluid layouts with percentage-based widths, using relative units (rem/em) instead of fixed pixels, ensuring touch-friendly tap target sizes, optimizing images for different screen sizes, or testing layouts across multiple devices. Apply when adjusting typography for readability across breakpoints, prioritizing content for smaller screens, or ensuring balanced user experiences on mobile phones, tablets, and desktop computers.

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 that adapt seamlessly across mobile, tablet, and desktop devices using mobile-first development, fluid layouts, and appropriate breakpoints. Use this skill when creating or modifying UI layouts, styling, or any visual design that needs to work across different screen sizes. Apply when working with responsive CSS, media queries, breakpoint definitions, viewport settings, flexbox or grid layouts, or mobile-first styling. Use when implementing fluid layouts with percentage-based widths, using relative units (rem/em) instead of fixed pixels, ensuring touch-friendly tap target sizes, optimizing images for different screen sizes, or testing layouts across multiple devices. Apply when adjusting typography for readability across breakpoints, prioritizing content for smaller screens, or ensuring balanced user experiences on mobile phones, tablets, and desktop computers.

When to use this skill:

  • When creating or modifying layouts that need to work on multiple screen sizes
  • When implementing mobile-first responsive designs
  • When working with CSS media queries or responsive breakpoints
  • When using responsive utility classes (Tailwind's sm:, md:, lg:, etc.)
  • When implementing fluid layouts with percentage-based widths and flexible containers
  • When using relative units (rem, em, %) instead of fixed pixel values
  • When ensuring touch targets meet minimum size requirements (44x44px)
  • When optimizing images and assets for mobile devices and networks
  • When adjusting typography sizes across different breakpoints
  • When testing UI changes on mobile, tablet, and desktop screen sizes
  • When prioritizing content display on smaller screens

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