Claude Code Plugins

Community-maintained marketplace

Feedback

Frontend Responsive

@Hieubkav/wincellarCloneBackend
0
0

Build responsive, mobile-first layouts using fluid containers, flexible units, media queries, and touch-friendly design that works across all screen sizes. Use this skill when creating or modifying UI layouts, responsive grids, breakpoint styles, mobile navigation, or any interface that needs to adapt to different screen sizes. Apply when working with responsive CSS, media queries, viewport settings, flexbox/grid layouts, mobile-first styling, breakpoint definitions (mobile, tablet, desktop), touch target sizing, relative units (rem, em, %), image optimization for different screens, or testing layouts across multiple devices. Use for any task involving multi-device support, responsive design patterns, or adaptive layouts.

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 Build responsive, mobile-first layouts using fluid containers, flexible units, media queries, and touch-friendly design that works across all screen sizes. Use this skill when creating or modifying UI layouts, responsive grids, breakpoint styles, mobile navigation, or any interface that needs to adapt to different screen sizes. Apply when working with responsive CSS, media queries, viewport settings, flexbox/grid layouts, mobile-first styling, breakpoint definitions (mobile, tablet, desktop), touch target sizing, relative units (rem, em, %), image optimization for different screens, or testing layouts across multiple devices. Use for any task involving multi-device support, responsive design patterns, or adaptive layouts.

Frontend Responsive

When to use this skill

  • When creating or modifying layouts that need to work on mobile, tablet, and desktop
  • When implementing mobile-first design patterns starting with mobile layout
  • When writing media queries or breakpoint-specific styles
  • When using flexible units (rem, em, %) instead of fixed pixels for scalability
  • When implementing fluid layouts with percentage-based widths or flexbox/grid
  • When ensuring touch targets meet minimum size requirements (44x44px) for mobile
  • When optimizing images and assets for different screen sizes and mobile networks
  • When testing UI across multiple device sizes and breakpoints
  • When maintaining readable typography across all screen sizes
  • When prioritizing content display on smaller screens through layout decisions
  • When using responsive design utilities in CSS frameworks (Tailwind, Bootstrap responsive classes)

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

  • Mobile-First Development: Start with mobile layout and progressively enhance for larger screens
  • Standard Breakpoints: Consistently use standard breakpoints across the application (e.g., mobile, tablet, desktop)
  • Fluid Layouts: Use percentage-based widths and flexible containers that adapt to screen size
  • Relative Units: Prefer rem/em units over fixed pixels for better scalability and accessibility
  • Test Across Devices: Test and verify UI changes across multiple screen sizes from mobile to tablet to desktop screen sizes and ensure a balanced, user-friendly viewing and reading experience on all
  • Touch-Friendly Design: Ensure tap targets are appropriately sized (minimum 44x44px) for mobile users
  • Performance on Mobile: Optimize images and assets for mobile network conditions and smaller screens
  • Readable Typography: Maintain readable font sizes across all breakpoints without requiring zoom
  • Content Priority: Show the most important content first on smaller screens through thoughtful layout decisions