Vibeset

Revisar en móvil

Repasa una pantalla en móvil, tableta y escritorio y señala lo que se rompe antes de que lo vea nadie.

Cuándo se usa

Cuando termines una vista nueva o toques la maquetación de una que ya existía.

SKILL.md

# Revisar en móvil

Revisa la vista indicada en tres anchos: 390px (móvil), 820px (tableta) y 1440px
(escritorio). Si el usuario no dice cuál, pregunta por la ruta o el archivo.

## Qué comprobar, en este orden

1. **Desbordamiento horizontal.** Nada debe empujar el ancho de la página. Los
   sospechosos habituales: tablas, bloques de código, imágenes sin max-width,
   rejillas con columnas de ancho fijo y palabras largas sin corte.
2. **Texto legible.** Mínimo 16px en el cuerpo del texto en móvil, y longitud de
   línea por debajo de 75 caracteres en escritorio.
3. **Zonas táctiles.** Todo lo que se pulsa necesita al menos 44x44px reales,
   contando el relleno, y separación suficiente entre elementos vecinos.
4. **Puntos de ruptura muertos.** Anchos donde el diseño no está roto pero sí
   feo: dos columnas apretadas, una tarjeta huérfana en la última fila, texto
   que baila.
5. **Alturas de ventana.** Con teclado abierto en móvil, 100vh corta contenido:
   comprueba si hace falta dvh.

## Cómo responder

Lista los fallos ordenados de más a menos grave. Cada uno con el ancho donde
aparece, el archivo y la línea, y el arreglo concreto en una frase. Si no hay
nada roto, dilo en una línea y no rellenes.