1-Pankaj/slopless-ui

Slopless UI

Slop es el aspecto generado por máquina: el héroe con degradado predeterminado, el punto pulsante, un icono en cada encabezado, un botón en cada acción, texto lleno de guiones largos y adjetivos, y ninguna decisión que puedas defender en una revisión. Las interfaces generadas modernas rara vez fallan por errores de marcado. Fallan por ser intercambiables: competentes, pulidas e imposibles de recordar.

Este skill existe para que la salida de un agente no lo sea. Le da a la construcción una dirección escrita antes de cualquier código, disciplina mientras se construye y una verificación antes de mostrar el resultado a alguien. No añade más estilo. Añade decisiones y luego termina.

El método

Trabaja en este orden. Cada paso tiene un trabajo y los detalles de cada paso viven en un archivo de referencia. Lee una referencia solo cuando llegues al paso que la necesita.

1. Lee la sala

Antes de escribir una línea, encuentra las decisiones que ya existen: un archivo DESIGN.md o de tokens, las variables CSS del proyecto, un bloque tailwind.config.* o @theme, los componentes existentes. Si el proyecto ya tiene un aspecto, síguelo exactamente. Tu trabajo es primero la consistencia, después el gusto. No rediseñes nada a menos que el usuario haya pedido un rediseño.

2. Escribe el brief

Cuatro líneas, escritas antes de cualquier código. Son un contrato contigo mismo, y los pasos posteriores los verifican.

1. Audiencia: quién usa esto y qué está haciendo aquí en diez segundos.
2. Sensación: uno o dos adjetivos que puedas defender en una revisión (tranquilo, denso, cálido, exacto).
3. Firma: la única cosa que un extraño recordará. Si no puedes nombrarla, el resultado será genérico. Elige una: una tipografía inusual, un número en negrita, un color inesperado, una composición fuerte.
4. Modo: Persuadir (landing, precios), Operar (panel, app), Leer (documentación, artículo) o Experimentar (portafolio, galería). El modo cambia cada decisión posterior.

Guía completa, los cuatro modos y una biblioteca de veintiocho direcciones de inicio para categorías comunes de sitios web: references/direction.md.

3. Toma las decisiones como tokens

Convierte el brief en valores reales, no en adjetivos: dos familias tipográficas con pesos y una pila de respaldo, un color de acento con un trabajo, una escala de espaciado, una escala de radio, duraciones y curvas de movimiento. Escríbelos como variables CSS o el formato de tokens del framework. "Limpio y moderno" no es una decisión. --accent: #8E3B2F lo es.

• Tipografía: references/typography.md
• Color: references/color.md
• Movimiento: references/motion.md

4. Construye con la veta

Luego aplica las reglas de disciplina mientras construyes:

• Las leyes primero. Una cuadrícula, una columna, espaciado de 4 u 8 puntos, un punto focal por vista, los ocho estados de componentes, teclado y suelos de contraste. Estos no son estilo; son la física en la que todo sistema de diseño está de acuerdo: references/foundations.md.
• Un punto focal, una acción principal por vista. La jerarquía proviene del tamaño, el peso y el espacio, no de los recuadros.
• Los botones son compromisos. Un botón relleno por vista es normal. Las acciones secundarias son enlaces o botones silenciosos. Si una región muestra más de dos botones, rediseñala: references/icons-and-buttons.md.
• Los iconos son muebles. Las palabras son más claras. Cuando los iconos se ganan un lugar, un conjunto, un peso, un tamaño consistente: references/icons-and-buttons.md.
• El texto es diseño. Oraciones cortas, sustantivos concretos, botones con verbo primero, sin guiones largos, sin jerga: references/copy.md.
• Cada estado existe: vacío, cargando, error, contenido largo. Cinco filas perfectas y un camino feliz no es una pantalla terminada.
• La página tiene pulso. Los controles responden al presionar, las transiciones salen como entraron, una entrada coreografía el primer segundo y las secciones se revelan una vez al desplazarse. Como máximo una animación ambiental característica, nombrada en el brief. El presupuesto de movimiento y cada curva que necesita: references/motion.md.
• Alinear a la izquierda los bloques de texto. Centrar solo elementos cortos de una línea.

5. Termina antes de la entrega

Nunca presentes una interfaz de usuario que no hayas mirado. El pase de acabado, en orden:

1. python3 scripts/foldcheck.py <archivos modificados> y corrige cada error que reporte.
2. python3 scripts/contrast.py <primer plano> <fondo> para cada par de texto que introdujiste. El texto del cuerpo necesita 4.5:1 o mejor; el texto grande y los bordes necesitan 3:1.
3. Renderiza en un navegador real y captura la pantalla en anchos de escritorio y teléfono (node scripts/finish.mjs <url-o-archivo> si Playwright está disponible, de lo contrario cualquier herramienta de navegador que tu entorno proporcione).
4. Entorna los ojos para ver las capturas: desenfoca la vista o escala la imagen. La jerarquía y el punto focal deben sobrevivir.
5. Corrige, vuelve a verificar solo las vistas cambiadas y detente después de tres pases de corrección.

Protocolo completo, etiquetas de honestidad y formato de informe: references/verification.md.

Innegociables

Estos patrones se leen como hechos por máquina. Trátalos como prohibidos por defecto, incluso cuando un tutorial los muestre:

• Puntos parpadeantes, pulsantes, saltarines o flotantes y decoraciones, incluidos indicadores de "escribiendo" y puntos de estado brillantes que nadie pidió.
• Estilo ciberpunk, neón, glitch, synthwave, vaporwave, matrix y holográfico. El resplandor no tiene fuente, por lo que no convence a nadie.
• Héroes con degradado de púrpura a azul y de índigo a fucsia, texto degradado, orbes de color borrosos detrás del contenido.
• Guiones largos en cualquier texto visible para el usuario. Usa un punto, una coma o paréntesis. Lo mismo para la lista de jerga de IA en references/copy.md.
• Emojis usados como iconos, viñetas o elementos de interfaz.
• Un icono en cada encabezado y un botón en cada acción.
• Lorem ipsum, "próximamente", testimonios inventados o métricas presentadas como reales.
• Inter, Roboto, Arial o la pila del sistema como la tipografía de identidad por defecto.
• Una página que nunca se mueve. La salida estática se lee como una plantilla ensamblada; el presupuesto de movimiento en references/motion.md es parte del acabado, no un adorno.

El catálogo completo con correcciones: references/anti-slop.md.

La prueba de entrecerrar los ojos

Entorna los ojos (o escala una captura de pantalla al tamaño de una miniatura) y mira de nuevo. Tres cosas deben sobrevivir al desenfoque: el punto focal, el orden de lectura y la acción principal. Si la página se convierte en una sopa gris, el problema es la jerarquía, y ninguna cantidad de pulido lo solucionará. Primero arregla el espaciado, el tamaño y el peso. Esta prueba toma diez segundos y detecta más mal diseño que cualquier lista de verificación.

Si el usuario pide un patrón prohibido

A veces una persona realmente quiere neón, degradados fuertes o un tema ciberpunk. No luches contra ellos ni des sermones. Constrúyelo bien: contraste real, jerarquía real, estados funcionales, movimiento contenido. Di una vez, en una línea, que el skill lo desaconseja por defecto y que seguiste su preferencia. La lista de prohibiciones protege la salida no guiada, no la preferencia expresada.

Mapa de referencias

Archivo	Leer cuando
references/direction.md	Paso 2, en cada nueva página o rediseño
references/typography.md	Paso 3, al elegir o verificar fuentes
references/color.md	Paso 3, al elegir o verificar color
references/motion.md	Paso 3 para tokens, Paso 4 para el pase de movimiento (presupuesto, entradas, revelaciones, ambientales, movimiento reducido)
references/foundations.md	Paso 4, para diseño, espaciado, jerarquía, estados y las leyes nombradas
references/copy.md	Paso 4, siempre que se escriba texto
references/icons-and-buttons.md	Paso 4, para acciones, controles e iconos
references/anti-slop.md	Cuando la salida se siente familiar de mala manera, o en revisión
references/verification.md	Paso 5, antes de decir que algo está listo

Informe

Termina el trabajo de interfaz de usuario con un informe breve: qué se construyó, la sensación de una línea del brief, la etiqueta de verificación de references/verification.md (verificado visualmente, verificado estáticamente o no verificado, con la razón) y cualquier cosa que quede sin hacer. Nunca llames a un resultado "perfecto en píxeles" o "totalmente probado". Di lo que hiciste.

Scripts

Sin dependencias, sin llamadas de red, sin telemetría. Las rutas son relativas a la carpeta de este archivo.

python3 scripts/foldcheck.py src/            # auditoría estática para patrones hechos por máquina
python3 scripts/contrast.py "#201B12" "#F6F1E5"   # contraste WCAG para un par
node scripts/finish.mjs ./index.html          # pase de navegador: capturas, consola, desbordamiento (necesita Playwright)

foldcheck y contrast siempre se ejecutan. finish es opcional y se degrada correctamente cuando falta Playwright; usa cualquier herramienta de navegador que ofrezca tu entorno, porque el punto es mirar, no la herramienta.