# Frontend Responsive

> Implement responsive designs that work across mobile, tablet, and desktop screen sizes. Use this skill when applying mobile-first development patterns, using responsive breakpoints, creating fluid layouts with percentage-based widths, choosing relative units (rem/em) over pixels, ensuring touch-friendly tap targets, or optimizing images for mobile. Applies when working on any frontend layout code, media queries, responsive utilities, and when testing UI across different screen sizes.

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

---


## When to use this skill

- When implementing mobile-first CSS and layouts
- When using responsive breakpoints (mobile, tablet, desktop)
- When creating fluid layouts with percentage-based widths
- When choosing rem/em units over fixed pixels
- When ensuring tap targets are at least 44x44px
- When optimizing images and assets for mobile
- When maintaining readable typography across breakpoints
- When prioritizing content for smaller screens
- When testing layouts across different screen sizes
- When using responsive utility classes (e.g., Tailwind's sm:, md:, lg:)
- When writing media queries for layout 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.

## Instructions

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