Frontend Responsive

---
name: frontend-responsive
description: "Implement mobile-first responsive designs with fluid layouts, breakpoints, relative units, and touch-friendly interfaces that work across all device sizes. Use this skill when writing or modifying React components (.tsx, .jsx files), when implementing CSS or Tailwind responsive utilities (sm:, md:, lg:, xl: breakpoints), when working on layout components, navigation menus, grid systems, when optimizing for mobile devices, tablets, or desktop screens, when implementing media queries, when ensuring touch-friendly UI elements, or when testing cross-device compatibility."
---

# 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 React components in `.tsx` or `.jsx` files
- When implementing responsive layouts using CSS Grid or Flexbox
- When writing Tailwind CSS responsive utility classes (sm:, md:, lg:, xl:, 2xl:)
- When implementing mobile-first design patterns
- When creating navigation menus that adapt to different screen sizes
- When working on responsive typography that scales across breakpoints
- When implementing touch-friendly UI elements (buttons, tap targets, gestures)
- When optimizing images and assets for different screen sizes and resolutions
- When testing UI components across mobile, tablet, and desktop breakpoints
- When using relative units (rem, em, %, vh, vw) instead of fixed pixels
- When implementing responsive spacing, padding, or margins
- When creating fluid container layouts that adapt to viewport size

## Instructions

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