Claude Code Plugins

Community-maintained marketplace

Feedback

Frontend Responsive

@overtimepog/AgentTheo
0
0

Create responsive, mobile-first user interfaces that adapt seamlessly across all device sizes using modern CSS techniques and responsive design patterns. Use this skill when implementing layouts, breakpoints, fluid typography, responsive images, or any UI that needs to work across mobile, tablet, and desktop viewports. Apply this skill when using CSS media queries, container queries, responsive utility classes (Tailwind's sm:, md:, lg:), flexible grid/flexbox layouts, relative units (rem, em, vw, vh), or when optimizing touch interactions for mobile devices. This skill ensures mobile-first development approach, consistent breakpoint usage, proper viewport configuration, touch-friendly target sizes (44x44px minimum), readable typography across all screen sizes, and optimized performance on mobile networks with responsive images and lazy loading.

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 Create responsive, mobile-first user interfaces that adapt seamlessly across all device sizes using modern CSS techniques and responsive design patterns. Use this skill when implementing layouts, breakpoints, fluid typography, responsive images, or any UI that needs to work across mobile, tablet, and desktop viewports. Apply this skill when using CSS media queries, container queries, responsive utility classes (Tailwind's sm:, md:, lg:), flexible grid/flexbox layouts, relative units (rem, em, vw, vh), or when optimizing touch interactions for mobile devices. This skill ensures mobile-first development approach, consistent breakpoint usage, proper viewport configuration, touch-friendly target sizes (44x44px minimum), readable typography across all screen sizes, and optimized performance on mobile networks with responsive images and lazy loading.

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.

When to use this skill

  • When implementing responsive layouts that adapt from mobile to tablet to desktop
  • When using CSS media queries (@media) or container queries (@container) for breakpoint-specific styles
  • When applying responsive utility classes in Tailwind (sm:, md:, lg:, xl:, 2xl:)
  • When creating fluid layouts with flexbox, CSS Grid, or percentage-based widths
  • When using relative units (rem, em, %, vw, vh) instead of fixed pixel values
  • When implementing mobile-first CSS that progressively enhances for larger screens
  • When configuring viewport meta tags for proper mobile rendering
  • When ensuring touch targets meet minimum sizes (44x44px) for mobile usability
  • When implementing responsive typography that scales across screen sizes
  • When optimizing images for different screen densities (srcset, picture element)
  • When testing UI across multiple device sizes and orientations
  • When implementing responsive navigation (hamburger menus, collapsible sidebars)
  • When handling responsive spacing, margins, and padding across breakpoints
  • When prioritizing content for mobile layouts with appropriate show/hide patterns

Instructions

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