Frontend Responsive

What it does and when to use it

Build responsive layouts that work seamlessly across mobile, tablet, and desktop screen sizes using mobile-first development, fluid layouts, and relative units. Use this skill when implementing layouts or UI components that need to adapt to different screen sizes. When setting up breakpoints, media queries, or responsive utilities. When using relative units (rem, em, %) instead of fixed pixels. When ensuring touch-friendly tap targets and optimizing for mobile performance. When testing UI changes across multiple device sizes. When implementing responsive typography, images, or navigation patte

How it works

1. When to use this skill
2. Instructions

---
name: Frontend Responsive
description: Build responsive layouts that work seamlessly across mobile, tablet, and desktop screen sizes using mobile-first development, fluid layouts, and relative units. Use this skill when implementing layouts or UI components that need to adapt to different screen sizes. When setting up breakpoints, media queries, or responsive utilities. When using relative units (rem, em, %) instead of fixed pixels. When ensuring touch-friendly tap targets and optimizing for mobile performance. When testing UI changes across multiple device sizes. When implementing responsive typography, images, or navigation patterns.
---

# 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 layouts or UI components that adapt to different screen sizes
- When setting up breakpoints for mobile, tablet, and desktop views
- When writing media queries or using responsive utility classes
- When using relative units (rem, em, %) instead of fixed pixel values
- When ensuring tap targets are appropriately sized (minimum 44x44px) for mobile
- When optimizing images and assets for mobile network conditions
- When implementing responsive typography that remains readable on all screens
- When testing UI changes across mobile, tablet, and desktop screen sizes
- When building mobile-first layouts that progressively enhance for larger screens
- When implementing responsive navigation patterns (hamburger menus, collapsible sections)

## Instructions

For details, refer to the information provided in this file:
[frontend responsive](../../../agent-os/standards/frontend/responsive.md)

Versions

The database has no other skills named Frontend Responsive.

Identical content appears in 1 other GitHub folders. We show one copy with the highest score.

Database snapshot: 13.11.2026 · package version 5772050a3941 (SHA-256 digest of the entire package)

Downloads in the last 30 days: 0 · ranking

Report a problem with this skill: harmful content, incorrect descriptions or an author’s removal request.

Similar skills

• 90Frontend Responsive Design Standards
  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…
• 100responsive-design-advisor
  Design responsive layouts with breakpoints, mobile-first approach, and flexible grids. Use when creating responsive designs, implementing breakpoints, or optimizing for multiple screen sizes.
• 100responsive-design
  Generates responsive layouts with media queries, fluid grids, and container queries, creates breakpoint configurations, optimizes images for multiple resolutions, and validates layouts across viewports. Use when building or refactoring an interface that must work across phone,…
• 90adapt
  Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.
• 95tailwind-responsive-design
  Use when building responsive layouts and mobile-first designs with Tailwind CSS. Covers breakpoints, container queries, and responsive utilities.
• 90adapt
  Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.