Contrato de Activación
Usar para sitios web/landings (cualquier stack) o videos renderizados por código (reel promocional, clip de lanzamiento) en el lenguaje de los diseñadores de movimiento: cortes de color plano a sangre, versalitas pesadas ultra-anchas, esquinas HUD monocromáticas, movimiento cinético sincronizado al ritmo, o shaders 3D de impresión risográfica. No para dashboards, sitios de documentación o aplicaciones centradas en formularios.
Reglas Estrictas
- Todas las rutas a continuación son relativas a la carpeta de este skill (
SKILL_DIR); ejecuta herramientas comonode "$SKILL_DIR/assets/palette/palette.mjs" …. - Responde en el idioma del usuario; escribe el texto del sitio/video en el idioma del proyecto.
- Completa la fase de ingestion (intake) ANTES del diseño o código. Nunca uses colores hexadecimales fijos: el color proviene de los tokens de rol de
palette.mjs(ink,bone,action,machine,on-*,hud-on-*). - El texto sobre un campo usa
on-<campo>; nunca renders una combinación deforbiddenPairscomo texto/fondo. - Un movimiento característico por escena; alternar movimientos intensos y suaves; nunca tres campos del mismo rol seguidos; las poses clave se mantienen ≥1 beat; una única familia de easing.
- Web: animar transform/opacity; respetar
prefers-reduced-motion(estados finales estáticos, sin bucles, sin pins); pausar canvases fuera de pantalla; fijar solo ≥1024px; sin desbordamiento a 375px. - Nunca inventes testimonios, métricas o clientes; conserva el contenido existente.
- Rechazar la lista anti-desastre (
references/design-system.md§8).
Puertas de Decisión
| Situación | Acción |
|---|---|
| Tipográfico, cortes de color plano | Swiss Kinetic: design-system.md, assets/web, assets/video |
| 3D, táctil, cartel/impreso | Riso Shader: shader-print.md, assets/shader/ |
| Ambos | Híbrido: campo shader detrás de tipografía cinética sobre áreas planas (tokens on-*) |
| Color de marca conocido | `palette.mjs --brand "#HEX" --format css |
| Predefinido | --list (mostrar nombre, etiquetas, muestras) → --preset <nombre> |
| Sorpréndeme | Inferir industria/ambiente desde README, copia, CSS, palabras del usuario → --surprise --mood "<etiquetas>" --seed <n>; indicar motivo; una repetición mediante --exclude <nombre> |
| Sitio web | references/web-techniques.md; adaptar assets/web/* al stack |
| Video | Copiar assets/video/reel-template/; references/video-pipeline.md |
| Sitio + video | Video primero como storyboard, luego sitio desde las mismas escenas |
Pasos de Ejecución
- Detectar salida (sitio/video/ambos) y stack; leer el contenido existente y los activos de marca.
- Ingestion (intake): UNA pregunta por turno: estilo (Swiss Kinetic / Riso Shader / Híbrido / Sorpréndeme), luego paleta (Color de marca / Predefinida / Sorpréndeme).
- Fuentes desde el
fontPairingdel preset odesign-system.md§2. BPM: preferir 120 (fotogramas enteros por beat a 30 y 60fps; 144/150 a 60fps); otros tempos redondean beats a fotogramas. - Escribir una tabla de escenas
# | escena | rol del campo | movimiento característico | beatsusando el ritmo canónico (§7). - Construir desde los assets correspondientes.
- QA: web →
assets/qa/qa-screenshots.js(1440 + 390, desbordamiento, consola), juzgar solo después de que las animaciones se asienten; video → fotogramas de prueba, render completo,ffprobe, hoja de contacto. - Informar resultados y lo que no se pudo verificar (por ejemplo, el audio nunca se escucha).
Contrato de Salida
Devolver: paleta (+ motivo de sorpresa) y resumen de contraste, tabla de escenas, archivos creados/modificados, rutas de evidencia QA, limitaciones conocidas.
Referencias
references/design-system.md— roles, tipografía, temporización, easing, movimientos, ritmo, anti-desastre.references/palettes.md— ingestion, presets, formatos de tokens.references/web-techniques.md— GSAP/Lenis/canvas, accesibilidad, rendimiento.references/video-pipeline.md— canvas determinista → navegador sin cabeza → ffmpeg, audio.references/shader-print.md— trazado de rayos WebGL2, medios tonos de 3 tintas, desregistro.