# Frontend Responsive

> Build mobile-first, responsive layouts with fluid grids, standard breakpoints, relative units, and touch-friendly design. Use this skill when creating or modifying layouts that need to work across different screen sizes. When working on responsive styles, breakpoint definitions, media queries, or mobile/tablet/desktop layouts. When using percentage-based widths, rem/em units, or viewport units. When ensuring touch targets are appropriately sized, typography is readable at all sizes, or content is prioritized for mobile screens.

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

---


## When to use this skill:

- When creating layouts that need to work on mobile, tablet, and desktop
- When adding responsive breakpoints or media queries
- When working on mobile-first CSS development
- When using percentage-based or fluid widths
- When choosing between px, rem, em, or viewport units
- When sizing touch targets for mobile users (minimum 44x44px)
- When adjusting typography for readability across screen sizes
- When prioritizing content visibility on smaller screens
- When testing UI across different device sizes
- When optimizing images and assets for mobile performance
- When implementing standard breakpoints consistently
- When reviewing layouts for responsive behavior

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