# Frontend Responsive

> 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.

- Skill: `aiskillstore/frontend-responsive` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add aiskillstore/frontend-responsive`
- Raw SKILL.md: https://api.skillmd.com/api/skills/aiskillstore/frontend-responsive/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: aiskillstore (https://skillmd.com/u/aiskillstore)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/aiskillstore/frontend-responsive

---


# 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)