Claude Code Plugins

Community-maintained marketplace

Feedback

Frontend Responsive

@Software-Design-Club/todo-app
0
0

Build responsive, mobile-first user interfaces that adapt gracefully across all screen sizes using fluid layouts, relative units, breakpoints, and optimized assets. Use this skill when creating or modifying UI layouts, responsive components, CSS media queries, or any code that needs to adapt to different viewport sizes. Use this when implementing mobile-first designs, adding responsive breakpoints (mobile/tablet/desktop), using relative units (rem/em), ensuring touch-friendly tap targets, optimizing images for different screen sizes, testing across multiple devices, or making typography readable on all screens. Use this when working on layout components, grid systems, or any UI code that should respond to screen size changes.

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 user interfaces that adapt gracefully across all screen sizes using fluid layouts, relative units, breakpoints, and optimized assets. Use this skill when creating or modifying UI layouts, responsive components, CSS media queries, or any code that needs to adapt to different viewport sizes. Use this when implementing mobile-first designs, adding responsive breakpoints (mobile/tablet/desktop), using relative units (rem/em), ensuring touch-friendly tap targets, optimizing images for different screen sizes, testing across multiple devices, or making typography readable on all screens. Use this when working on layout components, grid systems, or any UI code that should respond to screen size changes.

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 creating or editing UI components that need to adapt to different screen sizes
  • When implementing mobile-first design approaches starting with mobile layouts
  • When adding CSS media queries and responsive breakpoints (mobile, tablet, desktop)
  • When using fluid layouts with percentage-based widths and flexible containers
  • When choosing relative units (rem, em) over fixed pixels for better scalability
  • When ensuring touch-friendly design with appropriately sized tap targets (minimum 44x44px)
  • When optimizing images and assets for mobile network conditions and smaller screens
  • When testing UI changes across multiple screen sizes and devices
  • When making typography readable across all breakpoints without requiring zoom
  • When implementing responsive grid systems or layout components
  • When prioritizing content for smaller screens through thoughtful layout decisions

Instructions

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