# Frontend Responsive Design

> Implementa diseño responsive moderno con técnicas mobile-first, Container Queries, Grid, Flexbox y clamp() para adaptar layouts y componentes a cualquier pantalla o contenedor.

- Skill: `leandrobenjaminl/frontend-responsive-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add leandrobenjaminl/frontend-responsive-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/leandrobenjaminl/frontend-responsive-design/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend, CSS & Styling
- Tags: Breakpoints, Clamp, Container Queries, Css Grid, Flexbox, Mobile First, Responsive Design
- License: MIT
- Author: LeandroBenjaminL (https://skillmd.com/u/leandrobenjaminl)
- Updated: 2026-08-22
- Page: https://skillmd.com/skills/leandrobenjaminl/frontend-responsive-design

---


# Skill: frontend-responsive-design

Responsive design moderno. Mobile-first, Container Queries, tamaños fluidos.

## Trigger

- Un layout no funciona en mobile
- Un componente debería adaptarse a diferentes contenedores (sidebar, main, modal)
- Querés tamaños de fuente que escalen sin media queries
- Necesitás breakpoints consistentes en todo el proyecto

## Workflow LEND

1. ANALIZAR
   ├── Contexto: ¿página completa o componente aislado?
   ├── Público: ¿mobile-first o desktop-first? (casi siempre mobile-first)
   ├── Estado actual: ¿ya hay breakpoints? ¿son consistentes?
   └── Contenedor: ¿el componente vive en diferentes anchos?

2. OFRECER (Menú del Senior)
   ├── A) Media Queries — breakpoints tradicionales, mobile-first (min-width)
   ├── B) Container Queries — responsive por contenedor, ideal para componentes reutilizables
   └── C) Híbrido — Container Queries para componentes, Media Queries para layout global

3. ELEGIR → confirmación

4. HACER
   ├── Mobile-first: estilos base para mobile, media queries con min-width para desktop
   ├── Container Queries: container-type: inline-size en el padre, @container en el hijo
   ├── clamp() para tamaños fluidos: font-size: clamp(1rem, 2.5vw, 2rem)
   ├── Grid + auto-fit para layouts que se adaptan solos
   ├── dvw/dvh para viewport dinámico (móviles con toolbar)
   └── Breakpoints consistentes: 480px, 768px, 1024px, 1280px

5. VERIFICAR
   ├── El componente se ve bien en 320px, 768px, 1280px
   ├── No hay scroll horizontal
   └── Los textos son legibles sin zoom