Auditoría de diseño
layout-audit.mjs (junto a este archivo) recorre una página en varios anchos y mide el DOM. Reporta únicamente lo que una persona consideraría un defecto de diseño; la accesibilidad es una cuestión aparte que no evalúa.
node ~/.claude/skills/layout-audit/layout-audit.mjs --base=http://localhost:3000 --routes=/,/pricing
Banderas: --routes (separadas por comas, valor predeterminado /), --widths (valor predeterminado 1440x900,390x844), --auth=user:pass para autenticación básica, --shots=<dir> para también escribir una captura de pantalla por ruta y ancho, --json para comparar ejecuciones. Playwright se toma de @playwright/cli instalado globalmente, por lo que ningún proyecto adquiere una dependencia.
Comprobaciones
| Comprobación | Qué significa |
|---|---|
viewport-overflow | Un elemento se extiende más allá del borde de la ventana gráfica: la página se desplaza lateralmente |
clipped-text | Un cuadro corta su propio texto sin puntos suspensivos ni título, por lo que el texto es inaccesible |
collapsed-text | Un elemento contiene texto pero no tiene altura: se lee como un espacio en blanco |
overlapping-text | Dos cuadros de texto se dibujan en los mismos píxeles |
tiny-text | Texto por debajo de lo que un teléfono puede leer |
Cómo trabajar con el resultado
- Ejecútalo contra una compilación, no contra un servidor de desarrollo a medio editar. La recarga en caliente deja estilos a medio aplicar.
- Agrupa los hallazgos por elemento antes de arreglar algo. Un encabezado compartido repetido en diez rutas es un defecto, no diez, y el recuento en el informe no es la cantidad de trabajo.
- El truncamiento con puntos suspensivos y un título es un patrón, no un defecto; la herramienta ya lo excluye. Si un hallazgo dice que un cuadro recorta texto, el texto es genuinamente inaccesible.
- Un hallazgo repetido en una clase de elemento es una decisión de diseño. El tamaño de la fuente en toda una superficie, o un color, pertenece a quien posee el diseño; reporta los números y deja que ellos elijan, en lugar de cambiar la paleta de paso.
- Una captura de pantalla aún captura lo que ninguna regla establece. Toma
--shotsy mira las páginas que las reglas consideraron limpias, especialmente el ancho de teléfono. - Una ejecución limpia no dice nada sobre el teléfono de una persona. WebKit de Playwright con un perfil de iPhone no es Safari en un iPhone. Cuando un defecto reportado en teléfono no se reproduce, dilo en lugar de reportar que funciona; luego pide el dispositivo o elimina el mecanismo sospechado por completo.
- Prueba que una regla se activa antes de confiar en un cero. Planta el defecto en una página de prueba, ejecuta las comprobaciones contra ella y observa cómo la regla lo reporta. Un clip a nivel de página en particular hace que las comparaciones ingenuas de ancho pasen en cada página.