Ely Layouts

---
name: ely-responsive-layouts
description: Build and repair content-driven responsive frontend layouts using intrinsic sizing, fluid grids, container-aware composition, and intentional overflow. Use when a layout breaks, clips, or loses hierarchy across widths, zoom, or content lengths; not for choosing a visual identity.
---

# Ely Layouts

Hacer que el contenido conserve su orden, jerarquía y utilidad en el espacio disponible. Trabajar dentro del diseño y stack elegidos; no reducir proporcionalmente una composición de escritorio ni rediseñar la marca para resolver un desborde.

## Diagnosticar desde el contenido

Inspeccionar el resultado en el navegador y localizar qué elemento impone el tamaño: contenido no divisible, mínimos de Grid/Flex, dimensiones fijas, media, padding o una capa fuera de flujo. Distinguir el desborde del documento de una región cuyo scroll es intencional.

Definir el orden de lectura y las acciones que deben seguir disponibles. Mantener ese orden en el DOM; cambios visuales con `order` o áreas de grid no deben producir un recorrido de teclado incoherente. No duplicar contenido interactivo para fabricar dos versiones de una misma pantalla si una estructura adaptable basta.

Elegir puntos de cambio donde el contenido deja de funcionar, no por nombres de dispositivos. Probar también el intervalo entre puntos, cadenas largas y zoom: una captura en dos extremos puede ocultar un ancho intermedio roto.

## Construir con restricciones útiles

- Usar ancho fluido con un máximo justificado por lectura o composición. Permitir que los márgenes respiren sin estirar texto o controles indefinidamente.
- En Grid y Flex, comprobar tamaños mínimos implícitos antes de introducir otro breakpoint. `minmax(0, 1fr)` y `min-inline-size: 0` resuelven casos distintos; usarlos donde el contenido pueda encogerse y definir cómo debe envolver o desplazarse.
- Elegir Grid para relaciones entre filas/columnas y Flex para distribución en un eje cuando convenga. Conservar la tecnología existente si expresa bien la composición.
- Usar consultas de contenedor cuando un componente deba adaptarse a su espacio de montaje, por ejemplo en una barra lateral y una página amplia. Usar consultas del viewport para decisiones de la página. No introducir un contexto de contención sin revisar sus efectos sobre tamaño y descendientes.
- Limitar tamaños fluidos con `clamp()` cuando haya extremos útiles; incluir unidades relativas al texto cuando corresponda. Evitar que el ajuste por viewport anule el crecimiento esperado al ampliar texto.
- Conservar proporción y reservar espacio para media. Seleccionar recorte o encuadre por significado: no recortar texto incrustado, rostros o detalles necesarios para entender el producto.
- Distinguir una barra de herramientas, un artículo y una tabla: pueden requerir envolver, cambiar composición o disponer de scroll local. No ocultar columnas o acciones esenciales únicamente para hacer que entren.

Leer [references/layout-failures.md](references/layout-failures.md) al reparar overflow, componentes estrechos, tablas o conflictos de sticky. Elegir el arreglo que resuelva la causa, no una ocultación global del desborde.

## Adaptar la experiencia

En pantallas estrechas, cambiar la composición donde mejore el uso: apilar grupos, simplificar arte decorativo y mantener acciones próximas a su contexto. Si la navegación necesita otro patrón, conservar enlaces, estado actual y acceso por teclado; su contrato de interacción requiere implementación real.

Para cabeceras o paneles sticky, reservar espacio para contenido, foco y enlaces ancla. Elegir unidades de viewport según el objetivo: una escena estable y un panel que deba seguir el viewport visible tienen necesidades distintas. Comprobar controles inferiores con el teclado virtual cuando haya formularios y la herramienta de prueba lo permita.

Si el proyecto incluye scroll animado, dimensionar primero la composición estática. Preservar la relación entre el contenedor de escena y su pin; recortar el arte en una capa interior. Coordinar cambios de altura con las mediciones de la animación existente. Simplificar una escena estrecha conservando su mensaje, no congelando capas que esconden contenido.

## Verificar el rango

Revisar al menos un ancho estrecho, el punto donde cambia la composición y un ancho amplio apropiado al producto. Incluir contenido real largo y zoom de texto/página cuando sea relevante. Comprobar el desborde en su posición real de scroll, el orden de foco y los destinos de navegación, además del aspecto inicial.

Entregar la causa del problema o criterio de adaptación, las composiciones implementadas y las verificaciones realizadas. No afirmar cobertura de dispositivos o teclados virtuales que no se haya probado. Esta skill no necesita otras skills ni concede autorización para publicar o cambiar servicios externos.