LeandroBenjaminL 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
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?
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
ELEGIR → confirmación
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
VERIFICAR ├── El componente se ve bien en 320px, 768px, 1280px ├── No hay scroll horizontal └── Los textos son legibles sin zoom