# Frontend Responsive

> Frontend Responsive

- Skill: `devanb/frontend-responsive` (Agent Skill)
- Install (CLI): `npx skillmds@latest add devanb/frontend-responsive`
- Raw SKILL.md: https://api.skillmd.com/api/skills/devanb/frontend-responsive/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: DevanB (https://skillmd.com/u/devanb)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/devanb/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)