aievolutionpl/social-motion-agent

Pulido de UI en Movimiento

Problema: los fotogramas codificados por un modelo comparten marcas que se leen como hechas por máquina al instante: degradado índigo, cuatro tarjetas iguales, un radio y una sombra plana en todas partes, texto gris diminuto, emoji como iconos, una barra de color a un lado de una tarjeta. Este skill las elimina antes del renderizado, y mide lo que se puede medir.

La raíz del proyecto está tres niveles por encima de esta carpeta. Fuente de la doctrina: tools/repos/ux-ui-agent-skills (MIT, instantánea en sources.lock.json). Lee solo las partes que una escena necesite.

Pasos

1. Copia templates/frame-tokens.css y templates/frame-starter.html en source/ del trabajo. Cambia solo el bloque de marca en la parte superior de los tokens (acento, superficies; toma los colores del brief de la marca de producción). Nunca fijes color, tamaño o sombra en una escena: usa las variables.
2. Construye la escena a partir de tokens. El movimiento es una función pura del tiempo (window.seek(t), sin temporizadores, sin Math.random), el contrato vstudio y los renderizadores HTML lo esperan. Elige los efectos con el skill motion-effect-picker, no adivinando.
3. Pasa cada escena distinta en cada formato de salida por el portón, en un momento que muestre la disposición terminada:

python -S studio.py polish output/jobs/ID/source/scene.html --format 9:16 --seek 4.2 --shot output/jobs/ID/previews/scene-916.png

Falla en: texto fuera del marco, textos superpuestos, texto por debajo del mínimo legible, emoji, y hallazgos ALTOS de slop_tells y taste_audit. Las advertencias (fuera del área segura, jerarquía débil, texto recortado) necesitan una decisión, no silencio. 4. Abre la captura de pantalla y mírala. Los portones prueban corrección medible, no gusto. Luego ejecuta la lista de verificación adversarial a continuación y corrige lo que un diseñador estricto rechazaría. 5. Solo entonces renderiza. Registra en el HANDOFF.md del trabajo qué escenas pasaron polish y en qué tiempo de búsqueda.

Reglas internas para fotogramas de video

1. Una cosa lidera. Texto de exhibición al menos 2.5 veces el tamaño del cuerpo. Cuatro tarjetas iguales se leen como generadas; dale a un elemento más tamaño o su propia fila.
2. Escala tipográfica real (tokens): etiqueta 2.1, cuerpo 2.8, titular 3.6, título 6.4, exhibición 9, héroe 17 (cqmin, 1 cqmin = 1% del lado corto). Nada por debajo del 2% del lado corto. Los números usan .num (tabular).
3. Ritmo de 4 px (--sp-*). Elementos relacionados más juntos que los no relacionados.
4. Varios radios y sombras, cada uno con un rol (chip, panel, tarjeta, píldora; --sh-1..3, dos capas cada uno). Nunca un radio y una sombra en todas partes.
5. Bordes completos de pelo o contraste de superficie. Nunca una barra de color a un lado de una tarjeta, alerta o llamada. Estado = icono más palabras.
6. Color con significado. Un acento. Peligro solo para destructivo o negativo. Sin degradado índigo a púrpura fijo, sin texto o fondo #000 puro (los tokens usan un casi negro matizado).
7. Sin emoji ni pictogramas decorativos. Usa iconos SVG en línea (currentColor) o palabras. Sin caracteres de guión en el texto en pantalla (regla del espacio de trabajo).
8. Contraste: cuerpo 4.5:1, texto grande 3:1. Un pie de foto sobre metraje necesita una cortina o píldora (.pill-caption), nunca texto desnudo.
9. Áreas seguras. 9:16 mantiene el 17% superior y el 30% inferior del ancho libres de texto (UI de plataforma), lados 5.6%. 16:9 5.6% en todo el contorno. Los tokens establecen --safe-*; el portón lo verifica.
10. Permanencias. Un bloque de texto permanece en reposo al menos 0.5 s más 0.3 s por palabra antes de salir. Entradas de 0.4 a 0.7 s, entrada rápida y aterrizaje suave (ease-out). Mueve solo transform y opacity.
11. Datos extremos: nombres largos, 0, 100%, muchos elementos. Una escena no debe romperse con ellos; prueba un caso extremo.

Lista de verificación adversarial (antes de aprobar)

• Cubre el titular: ¿el ojo aún aterriza en algún lugar, o en nada?
• ¿Hay algún elemento que sea solo decoración? Elimínalo.
• Entrecerrando los ojos: ¿hay dos puntos focales en competencia?
• ¿Se muestra algún número sin su unidad, fuente o comparación?
• ¿La escena se vería igual con el nombre de otra marca? Entonces no tiene dirección: toma una estética de tools/repos/ux-ui-agent-skills/taste/aesthetic-systems.md o una especificación de design-systems/library/<name>/DESIGN.md (138 de ellas) y resuélvela en el bloque de tokens.

Referencias más profundas (cargar bajo demanda)

Necesidad	Archivo en tools/repos/ux-ui-agent-skills/
Doctrina anti-slop, valores predeterminados prohibidos	taste/design-taste.md
Gramática del movimiento (entradas, escalonamiento, hover)	taste/motion-choreography.md
Gráficos y pantallas de datos densos	components/data-viz.md, tokens/data-viz.json, examples/terminal/
Paletas, escalas OKLCH, modo oscuro	.claude/rules/tokens-and-color.md
Copia de UI, etiquetas, estados vacíos	content/voice-tone.md
Rúbrica de revisión con puntuación	workflows/design-review.md, .claude/agents/design-critic.md
Un aspecto con nombre (Stripe, Linear, Apple...)	design-systems/library/ + taste/aesthetic-systems.md

Ejecuta los portones ascendentes directamente solo cuando sea necesario (desde esa carpeta, DS_REQUIRE_BROWSER=1, Chrome del sistema): node scripts/slop_tells.mjs <archivo>, node scripts/taste_audit.mjs <archivo>, node scripts/measure_render.mjs <archivo> (contraste WCAG en el renderizado real). Sus resultados son heurísticas: una señal fuerte, no un veredicto. No edites el checkout ascendente.