yonathan-boop/Claude

antislop-layoutmobile

Anti Slop: Reglas para Agentes de Codificación de IA. Habilidad de diseño móvil

Parte del sistema antislop. Léelo junto con antislop.md (el núcleo). Esta habilidad profundiza en la preocupación del diseño responsive: cómo un diseño debe refluir a través de diferentes tamaños de pantalla, de teléfono a escritorio. Puntos de interrupción, escala, cuadrículas, desbordamiento, objetivos táctiles y navegación. Hace referencia a las reglas del núcleo por número y nunca las duplica ni las renombra. Cárgala cuando la tarea construya o edite un diseño que deba mantenerse en cualquier ancho de pantalla.

Cómo usar esta habilidad

• Cárgala junto con antislop.md siempre que la tarea sea trabajo de diseño móvil o responsive. El núcleo contiene el mecanismo (la prueba de propósito, los tres niveles, la Puerta de Entrega); esta habilidad contiene la profundidad del diseño móvil.
• Cada entrada tiene la misma forma: Indicio (el patrón), Por qué (por qué se lee como slop), Solución (qué hacer en su lugar), con la regla del núcleo citada como R-XX.
• El principio detrás de esta habilidad: el diseño móvil es un diseño diferente, no el diseño de escritorio a un tamaño más pequeño. Debe refluir: reorganizarse en pilas, reescalarse y reordenarse con intención. Cada patrón a continuación es una forma en que un diseño no logra refluir.
• La Puerta de Entrega del núcleo sigue siendo la puerta. La "Lista de Verificación de la Habilidad Layoutmobile" al final de este archivo es el suplemento específico para móviles que se ejecuta junto a ella.

Puntos de interrupción

Diseño Solo de Escritorio

• Indicio: un estado de diseño para cada pantalla; la vista móvil es el diseño de escritorio comprimido en un teléfono.
• Por qué: R-03 requiere un diseño móvil que sea perfecto, no una ocurrencia tardía. Una página que solo se encoge no tiene ningún diseño móvil: las tarjetas que funcionaban una al lado de la otra se superponen y el texto destinado a un lienzo ancho se aglomera en uno estrecho.
• Solución: define un estado móvil real en el punto de interrupción donde el contenido deja de funcionar. El diseño móvil refluye: las columnas se apilan, los tamaños disminuyen y el orden cambia donde el contenido lo necesita. Si la vista móvil es solo la vista de escritorio a un ancho menor, el diseño no está terminado.

Punto de Interrupción Impulsado por Lista de Dispositivos

• Indicio: puntos de interrupción nombrados según anchos de teléfono (375px, 414px, 768px) elegidos porque "ese es el tamaño del iPhone", no porque el contenido se rompa allí.
• Por qué: los anchos de los dispositivos cambian cada año y cada modelo. Un punto de interrupción es un punto donde el diseño deja de mantenerse; forzarlo a coincidir con una lista de dispositivos hace que el diseño siga una hoja de especificaciones en lugar del contenido (R-03).
• Solución: coloca los puntos de interrupción donde el contenido realmente se rompe: cuando una columna deja de ser legible, cuando una fila de tarjetas se vuelve demasiado estrecha. Prueba estrechando el viewport y observando dónde se rompe, luego establece el punto de interrupción allí.

Móvil Estilizado al Final

• Indicio: reglas móviles añadidas como una anulación final: una hoja de estilos de escritorio larga con una pequeña consulta de medios al final arreglando una o dos cosas.
• Por qué: un parche de anulación no es un diseño móvil. Arregla el síntoma que se informó y deja el siguiente, y los estilos base permanecen ajustados para una pantalla ancha (R-03).
• Solución: trata el móvil como un estado diseñado, no como una anulación. Dale al viewport estrecho sus propios tamaños y apilamientos deliberados, y verifica todo el diseño allí, no solo los parches (R-35).

Diseño de Dos Estados

• Indicio: un diseño con exactamente dos estados: una sola columna apilada por debajo de un punto de interrupción, y una cuadrícula ancha de varias columnas por encima, sin nada definido en el medio. Un ancho de tableta o laptop pequeño hereda entonces el estado más cercano: la pila del teléfono estirada absurdamente ancha, o la cuadrícula de escritorio metida en una fracción de su lienzo previsto.
• Por qué: una página es un rango continuo de anchos, y R-03 exige que se mantenga en cada uno de ellos, no solo en dos puntos de interrupción elegidos. Dos estados dejan toda la banda media del rango (aproximadamente 600 a 1024 px, donde viven las tabletas y las laptops pequeñas) como un accidente: contenido que ni se apila con intención ni se sienta en una cuadrícula que encaje. El diseño se lee como diseñado solo en sus dos puntos de muestra y roto en todas partes intermedias.
• Solución: define estados reales en los anchos donde el contenido deja de funcionar, y deja que sean tantos como el contenido necesite. Un reflujo típico es de tres estados, no dos: columna única, luego una cuadrícula de dos columnas cuando las tarjetas se vuelven demasiado anchas como una sola pila, luego la cuadrícula completa de varias columnas solo cuando realmente encaja. Verifica arrastrando el viewport a través de todo el rango, no comprobando dos anchos y dando por terminado (R-35).

Escala y Tamaño

Todo del Tamaño de Escritorio

• Indicio: relleno, espacios, alturas de héroe y tamaños de tarjeta transferidos sin cambios de escritorio a móvil, por lo que cada sección se ve ampliada en un teléfono.
• Por qué: un elemento dimensionado para un lienzo de 1440px domina uno de 375px. Lo que se lee como seguro en escritorio se vuelve sobredimensionado en móvil: nada encaja, nada respira, y la página se siente como si estuviera diseñada para una pantalla que no es la que se tiene en mano (R-03). El espaciado y el tipo deben seguir el ritmo del diseño (R-05), y ese ritmo tiene un registro más pequeño en móvil.
• Solución: dale al móvil su propio paso de tamaño: una escala de tipo más pequeña, un relleno de sección más ajustado, espacios más pequeños. Mantén los objetivos táctiles en su tamaño mínimo (ver Objetivos Táctiles), pero reduce todo lo demás con intención en el punto de interrupción.

Tipo en Píxeles Fijos

• Indicio: tamaños de fuente en píxeles fijos que nunca cambian entre escritorio y móvil, por lo que los encabezados y el texto del cuerpo permanecen sobredimensionados en un teléfono.
• Por qué: el tipo que no responde al viewport es un tipo dimensionado para una sola pantalla. R-03 exige que el diseño móvil se mantenga, y R-06 requiere una tipografía que mejore la legibilidad. Un titular que abarca todo el ancho del teléfono o un tamaño de cuerpo ajustado para una línea ancha rompe ambas.
• Solución: usa tipo fluido (clamp()) para que los tamaños escalen con el viewport, o establece un paso de tipo más pequeño en el punto de interrupción. Verifica el resultado en un ancho estrecho (R-35), no solo en la vista previa de escritorio.

Secciones de 100vh

• Indicio: alturas de héroe y sección establecidas en 100vh, por lo que una sección llena toda la pantalla del teléfono y empuja todo lo demás debajo del pliegue.
• Por qué: una sección de viewport completo diseñada para un monitor de escritorio se convierte en una losa gigante en un teléfono, y 100vh incluye el cromo del navegador, por lo que se desborda del área visible en navegadores móviles. Domina el diseño en lugar de presentarlo (R-03).
• Solución: deja que las secciones se dimensionen a su contenido (auto), o usa la unidad de viewport dinámico (dvh) donde se pretenda una sección de altura completa real. Nada debajo del pliegue debería ser un accidente de las unidades de viewport.

Relleno Vacío Enorme

• Indicio: relleno de sección a escala de escritorio (96px, 128px) mantenido en móvil, creando grandes espacios vacíos entre secciones en un teléfono.
• Por qué: el relleno ajustado para un lienzo grande se convierte en espacio vertical desperdiciado en uno pequeño. La página se desplaza a través del vacío, y el ritmo que R-05 exige se convierte en un vacío entre cada sección.
• Solución: reduce el relleno de la sección en el punto de interrupción a un registro móvil (aproximadamente la mitad o menos), y verifica que la página se desplace con una densidad natural en lugar de a través de desiertos de espacio.

Cuadrículas y Apilamiento

Columnas Que No Colapsan

• Indicio: una cuadrícula de varias columnas mantiene sus columnas una al lado de la otra en móvil, por lo que las columnas se encogen, el texto se ajusta torpemente y los elementos chocan.
• Por qué: una cuadrícula es una promesa sobre cuánto ancho está disponible. Cuando el viewport se estrecha y la cuadrícula no se reordena en pilas, cada columna recibe una porción, el texto se vuelve ilegible y las tarjetas se superponen (R-03). Este es el fallo de colisión: el lado a lado del escritorio se convierte en el amontonamiento del móvil.
• Solución: colapsa la cuadrícula a una sola columna refluida en el punto de interrupción. El lado a lado se apila, y cada elemento obtiene el ancho completo nuevamente. Vuelve a verificar en un ancho estrecho (R-35).

Cuadrícula de Ancho Fijo

• Indicio: grid-template-columns establecido en píxeles fijos, o áreas de cuadrícula que no pueden refluir, por lo que la cuadrícula permanece rígida cuando el viewport se encoge.
• Por qué: una pista de píxeles fijos no le importa el viewport; mantiene su ancho y fuerza el desbordamiento o la colisión. El diseño se construyó para un lienzo y no puede cambiar de forma (R-03).
• Solución: dimensiona las pistas con minmax() o auto-fit y auto-fill para que las columnas se encogan y envuelvan con el contenido, y define áreas de cuadrícula que colapsen en el punto de interrupción. La cuadrícula debe ser fluida por defecto, rígida solo donde un tamaño fijo sea deliberado.

12 Columnas Forzadas

• Indicio: una cuadrícula de 12 columnas forzada en contenido móvil que necesita una o dos columnas, por lo que los tramos parecen arbitrarios y las matemáticas luchan contra el diseño.
• Por qué: un sistema de 12 columnas es para un lienzo ancho con muchas columnas de contenido. Forzarlo en un teléfono hace que cada elemento sea una fracción de una cuadrícula invisible que el usuario nunca ve, y el contenido se ajusta a la cuadrícula en lugar de la cuadrícula al contenido (R-03).
• Solución: deja que las columnas sigan al contenido. En móvil, el contenido generalmente quiere una columna, o como máximo dos; el tramo de 12 columnas solo tiene sentido donde el diseño tiene genuinamente esa cantidad de cosas una al lado de la otra.

Desbordamiento

Fuga de Desplazamiento Horizontal

• Indicio: la página se desplaza lateralmente porque algún elemento es más ancho que el viewport: una tabla, un bloque de código, una imagen, una cadena larga sin interrupción.
• Por qué: el desplazamiento horizontal es una promesa rota en móvil. El usuario no puede ver dónde termina la página, y el diseño se derrama visiblemente fuera de la pantalla (R-03). Es el slop de desbordamiento más común porque el infractor está fuera de la pantalla en la vista previa de escritorio y pasa desapercibido hasta que un teléfono lo abre.
• Solución: encuentra el elemento más ancho que el viewport (una tabla que necesita un diseño de reflujo o un contenedor de desplazamiento, un bloque de código que envuelva, imágenes con max-width: 100%), luego conténlo o hazlo refluir. Verifica que toda la página tenga cero desplazamiento horizontal en el objetivo más estrecho (R-35).

Recorte Oculto por Desbordamiento

• Indicio: overflow: hidden en un contenedor que recorta el contenido en anchos estrechos, ocultando texto o controles en lugar de dejar que encajen.
• Por qué: recortar es ocultar un fallo. Cuando un contenedor corta su contenido porque el diseño no puede acomodarlo, el usuario pierde información e interacción (R-03). El ángulo de zoom y cambio de tamaño de texto sobre esto está cubierto por antislop-human.
• Solución: deja que el contenido refluya en lugar de recortar: permite que el contenedor crezca, envuelve su contenido, o colapsa en el punto de interrupción. Recorta solo donde recortar es la intención de diseño (como una miniatura), nunca donde oculta contenido.

Hijos de Ancho Fijo

• Indicio: hijos de flex o grid con un ancho fijo en px o min-width que se salen de su padre en una pantalla estrecha.
• Por qué: un hijo dimensionado en píxeles absolutos no le importa cuánto espacio tiene su padre. En móvil, el padre se encoge y el hijo se mantiene ancho, por lo que se desborda del contenedor y de la página (R-03).
• Solución: dimensiona a los hijos con unidades relativas y deja que se envuelvan (flex-wrap, anchos fluidos, min-width: 0 en hijos de cuadrícula). Un hijo debe poder encogerse con su contenedor, no mantener un tamaño de escritorio.

Objetivos Táctiles

Objetivos de Tamaño Insuficiente

• Indicio: botones, enlaces y controles más pequeños que aproximadamente 44 x 44 px, fáciles de pulsar en escritorio con un cursor pero difíciles de pulsar con un pulgar.
• Por qué: un cursor de escritorio tiene precisión de píxel; un pulgar no. Un objetivo que está bien a 16px se convierte en un ejercicio de frustración en un teléfono, y falla la promesa de que la interfaz de usuario es utilizable en móvil (R-03).
• Solución: dale a los objetivos interactivos un área táctil mínima de 44 x 44 px, usando relleno o un cuadro de impacto más grande incluso cuando el visual sea más pequeño. Verifica todo el conjunto de controles en un ancho de teléfono (R-35).

Objetivos Demasiado Cerca

• Indicio: objetivos de 44px empaquetados juntos sin espacio, por lo que un toque de pulgar golpea el incorrecto.
• Por qué: el tamaño del objetivo importa solo con el espaciado del objetivo. Dos controles grandes que se tocan se comportan como un solo control grande: el usuario no puede elegir ninguno de manera confiable (R-03).
• Solución: deja un espacio claro entre los objetivos interactivos adyacentes, al menos unos pocos px e idealmente suficiente para que el área de presión del dedo no se superponga. El espaciado es la otra mitad de la capacidad de toque.

Interacciones Solo con Hover

• Indicio: menús, revelaciones y tooltips que existen solo al pasar el cursor, por lo que un usuario táctil nunca puede abrirlos.
• Por qué: no hay hover en una pantalla táctil. Una interacción que solo responde al hover simplemente no existe para los usuarios móviles, y cualquier control que dependa de ella es un callejón sin salida (R-03).
• Solución: dale a cada interacción solo con hover un equivalente táctil: un menú que se abre al pasar el cursor también se abre al tocar, una revelación también se muestra al hacer clic, y los elementos interactivos muestran retroalimentación :active visible para que se registre un toque. Prueba usando la interfaz de usuario solo con contacto (R-35).

Navegación Móvil

Navegación Que Sigue Siendo de Escritorio

• Indicio: la barra superior de escritorio con su fila de enlaces mantenida una al lado de la otra en móvil, por lo que los enlaces se aglomeran, se envuelven en dos filas o se derraman más allá del viewport.
• Por qué: una navegación de escritorio está dimensionada para un lienzo ancho. Mantenida como una fila en un teléfono se convierte en un desastre de enlaces apretados, y es lo primero que un usuario móvil encuentra (R-03). La navegación es donde el reflujo importa más: el usuario tiene que encontrar a dónde ir antes de poder ir a cualquier parte.
• Solución: colapsa la navegación en un patrón móvil en el punto de interrupción: una navegación inferior para el puñado de destinos principales, o un menú para el resto. Los enlaces refluyen fuera de la fila, y los destinos principales quedan a un toque de pulgar de distancia. Verifica que se mantenga en un ancho estrecho (R-35).

La Hamburguesa Desnuda

• Indicio: todo oculto detrás de un icono de hamburguesa sin etiqueta y sin pista, por lo que un usuario nunca se da cuenta de que existe el menú o no puede decir qué abre.
• Por qué: una hamburguesa desnuda asume que el usuario ya sabe lo que significa el icono y que un menú se esconde detrás de él. Ese es conocimiento que el usuario móvil puede no tener, y en móvil el menú oculto puede contener la única forma de navegar por la aplicación (R-03).
• Solución: mantén el menú reconocible: etiqueta la hamburguesa ("Menú"), o mantén los destinos principales visibles y oculta solo los secundarios. Si un menú es la única forma de llegar a algo importante, esa capacidad de acceso debe ser obvia.

Navegación Inferior Que Se Come el Contenido

• Indicio: una barra de navegación inferior fija que se superpone al contenido, cubriendo los últimos elementos de la lista, el botón final o el formulario que el usuario estaba tratando de completar.
• Por qué: una barra inferior que se superpone al contenido hace que el usuario no pueda acceder a lo que está debajo. Es un robo de espacio y una barrera para completar tareas (R-03). La navegación inferior debe estar diseñada para coexistir con el contenido, no para ocultarlo.
• Solución: asegúrate de que la navegación inferior fija tenga un fondo claro o el contenido tenga un relleno inferior que compense su altura. Verifica que todos los elementos interactivos (especialmente los botones de formulario al final de la página) sean accesibles, y que la navegación inferior no cubra ninguno de ellos (R-35).

Lista de Verificación de la Habilidad Layoutmobile (Puerta de Entrega - Suplemento Móvil)

Ejecuta esta lista después de la Puerta de Entrega del núcleo. Marca cada elemento solo cuando esté verificado en un viewport estrecho real (R-35).

Puntos de interrupción

• Hay al menos un punto de interrupción definido donde el contenido se rompe, no donde un dispositivo lo dice.
• El diseño no es solo de escritorio comprimido ni solo de dos estados.

Escala y tamaño

• Las secciones tienen su propio tamaño en móvil (relleno, espacio, altura de héroe reducidos).
• El tipo usa fluidos (clamp()) o un paso de tipo más pequeño en el punto de interrupción.
• Ninguna sección usa 100vh a menos que sea una altura completa intencional con dvh.

Cuadrículas y apilamiento

• Las cuadrículas multicolumna se colapsan a una sola columna que refluye (o dos como máximo) en el punto de interrupción.
• Las pistas de la cuadrícula son fluidas (minmax, auto-fit) a menos que un tamaño fijo sea deliberado.
• No hay un sistema de 12 columnas forzado en contenido móvil que necesita menos.

Desbordamiento

• La página tiene cero desplazamiento horizontal en el ancho más estrecho soportado.
• No hay overflow: hidden que recorte el contenido (a menos que sea intencional para una miniatura).
• Todos los hijos de flex/grid pueden encogerse con su contenedor (sin ancho fijo que cause desbordamiento).

Objetivos táctiles

• Todos los botones, enlaces y controles tienen al menos 44 x 44 px de área táctil.
• Los objetivos adyacentes no se tocan sin espacio.
• Todas las interacciones de solo hover tienen un equivalente táctil (y se prueban solo con toque).

Navegación

• La navegación colapsa a un patrón móvil en el punto de interrupción (inferior, menú, etc.).
• El menú de hamburguesa (si se usa) está etiquetado o los destinos principales se mantienen visibles.
• La navegación inferior fija no cubre contenido interactivo (relleno inferior o fondo claro).