🔧 Por dentro del skill

La raíz de la skill contiene SKILL.md (el orquestador), la subcarpeta scripts/ con 3 archivos ejecutables y la subcarpeta references/ con 3 archivos de especificación. Nada más.

Conocer el mapa de la carpeta es el primer paso para entender qué hace la skill, modificarla sin romper nada y crear nuevas skills con el mismo patrón.

Raíz = SKILL.md; especialización en subcarpetas; separación entre orquestador, referencias y scripts.

pipeline.md describe los 7 pasos del flujo de producción; house-style.md define la paleta, la tipografía y las reglas visuales; gotchas.md enumera los errores más comunes y sus correcciones específicas.

Saber qué referencia consultar para cada duda evita lecturas innecesarias: cada archivo tiene un alcance preciso y no se superpone con los demás.

Especialización por dominio; se cargan bajo demanda; sin redundancia entre archivos.

fetch-fonts.mjs descarga las fuentes .woff2 locales; narration-template.sh genera el guion TTS con voz pf_dora --speed 0.98; composition-template.mjs es el generador central que produce el index.html final con todas las escenas.

Cada script resuelve un problema específico de automatización; juntos, eliminan el trabajo manual repetitivo y garantizan resultados deterministas.

Automatización mediante script; fuentes locales; TTS; generación determinista de HTML.

El SKILL.md define 7 etapas numeradas: (1) confirmar el tema, (2) escribir el guion, (3) generar el audio TTS, (4) descargar recursos, (5) ejecutar el generador, (6) validar el output, (7) entregar los archivos. Cada paso indica la referencia correcta.

El flujo numerado es lo que Claude ejecuta en orden; entenderlo te permite depurar en qué paso ocurrió un error.

Flujo numerado; responsabilidad por etapa; referencias indicadas en cada paso.

El SKILL.md indica a Claude que lea house-style.md solo antes de construir las escenas visuales, y gotchas.md solo antes de validar el output — nunca todo de una vez.

Conserva el contexto para la tarea real en vez de gastar tokens cargando especificaciones que quizá no sean necesarias.

Bajo demanda; ahorro de contexto; lectura condicional.

El SKILL.md incorpora preferencias fijas del autor: narración en PT-BR, paleta dark premium ámbar, salida doble (16:9 para YouTube y 9:16 para Shorts) y CTA final que siempre apunta a INEMA.CLUB.

Estos valores predeterminados evitan que el usuario tenga que repetir sus preferencias en cada solicitud: están codificados en la skill para mantener la coherencia de marca.

Valores predeterminados de marca; PT-BR; salida doble; CTA coherente.

Seis variables fijas: fondo #0D1321, panel #1D2D44, borde #3E5C76, texto principal #F0EBD8, acento ámbar #FFC300 y resaltado de código #2EC4B6. No se permite ningún otro color de acento.

La paleta es la identidad visual del canal. Apartarse de ella rompe la coherencia de marca: el ámbar debe ser el único punto cálido en pantalla.

Sistema cerrado de colores; ámbar = único acento; código en cian.

Sora para títulos y titulares (gran impacto visual), Inter para el cuerpo del texto (alta legibilidad), JetBrains Mono para código y datos. Las tres familias cubren todos los casos de uso del video.

Mezclar fuentes que no están en el sistema crea ruido visual. La regla es simple: título → Sora, texto → Inter, código → JetBrains.

Sora display; Inter para el cuerpo; JetBrains para código; nunca Google Fonts CDN en tiempo de ejecución.

Cada escena tiene una capa de fondo compuesta por 4 elementos: (1) brillo radial ámbar (glow), (2) texto fantasma con baja opacidad (ghost text), (3) cuadrícula de puntos (grid) y (4) textura de grano SVG (grain). Esta capa nunca se anima: permanece estática.

La capa crea profundidad sin distracciones. Entender que es estática evita el error de intentar animarla (lo que causa conflictos con el framework).

Capa estática; 4 elementos; profundidad sin distracciones.

Las fuentes se descargan mediante el script fetch-fonts.mjs en formato .woff2 y referenciadas mediante @font-face local. La CDN de Google Fonts está prohibida porque el renderizador podría no tener acceso a Internet.

Un video renderizado sin acceso al CDN mostrará fuentes de respaldo — lo que arruina el aspecto visual. Las fuentes locales garantizan la coherencia sin conexión.

woff2 local; @font-face; fetch-fonts.mjs; seguro para usar sin conexión.

El video no es la web: cada escena debe tener como máximo 8-10 elementos visuales para no sobrecargar al espectador. Los titulares van de 64px (subtítulo) a 172px (énfasis máximo): tamaños imposibles en un sitio web, pero necesarios para leer en TV o en el móvil.

Los diseñadores que vienen de la web tienden a poner demasiada información por escena. La regla de 8-10 elementos es el antídoto.

Máximo 10 elementos; fuentes grandes; aire visual; foco del espectador.

Todos los videos terminan con la escena scene9() (CTA), que muestra el logo ámbar y la dirección INEMA.CLUB con el máximo protagonismo. Esta escena se genera automáticamente mediante composition-template y no debe omitirse.

La CTA es el punto de conversión del canal. Incluida de forma predeterminada, garantiza que ningún video se entregue sin la llamada a la acción de marca.

scene9() automática; INEMA.CLUB; conversión de canal; nunca omitir.

AUDIO[] es el único array que edita el autor: cada entrada tiene el archivo MP3 y la duración en segundos. A partir de ahí, el generador deriva todo: el timing de las escenas, la duración de las transiciones, la posición de los audio tracks en el HTML y las marcas de tiempo de la timeline de GSAP.

Tener una única fuente elimina las desincronizaciones: no hay forma de que el audio y la timeline discrepen porque ambos leen el mismo dato.

Fuente única de verdad; array AUDIO[]; derivación automática.

El generador calcula el array S[] sumando LEAD=0.5s (silencio antes del audio), TAIL=0.9s (silencio después) y FADE=0.45s (superposición de entrada/salida). Para cada escena: start = soma das durações anteriores, dur = audio.dur + LEAD + TAIL, audioStart = LEAD.

Entender el cálculo te permite ajustar los parámetros para videos con otro ritmo sin romper la sincronización.

LEAD 0.5s; TAIL 0.9s; FADE 0.45s; S[] derivado de AUDIO[].

Cada escena es una función sceneN(s) que devuelve la cadena HTML de la escena usando el objeto de timing s. Las animaciones se declaran con anim(element, props, delay), que acumula una lista de tweens de GSAP, nunca CSS directo.

Separar la estructura visual (HTML) de la animación (GSAP mediante anim()) facilita editar una sin tocar la otra.

sceneN() devuelve HTML; anim() declara tweens; separación de estructura y movimiento.

El generador construye el HTML en 4 bloques: (1) .scene divs con el contenido visual, (2) .caption divs con subtítulos sincronizados, (3) <audio> tracks alternados (escenas 1/3 en el track A, 2/4 en el track B), y (4) el bloque <script> con la timeline de GSAP iniciada en pausa.

Conocer la estructura de los 4 bloques te permite editar el output manualmente cuando sea necesario sin perder la lógica de sincronización.

4 bloques; timeline en pausa; reproducción controlada por eventos de audio.

Ejecutar el generador con la flag --vertical, agrega la clase .v al <body> y aplica overrides CSS que reposicionan elementos para el formato 9:16 (1080×1920px). El archivo generado siempre es index.html, sobrescribiendo la versión 16:9.

Entender el mecanismo de sobrescritura evita confusiones entre los dos formatos y explica por qué ambos comparten el mismo archivo base.

body.v; CSS overrides; --vertical flag; un archivo, dos formatos.

El composition-template define scene9() como la escena final de CTA codificada de forma fija. Siempre se inyecta después de las escenas de contenido, independientemente de cuántas escenas tenga el video: si el video tiene 7 escenas, la última siempre es la scene9 de CTA.

Saber que es automática evita duplicar la CTA manualmente, y saber que no se puede omitir garantiza la consistencia de marca en todo el output.

scene9() hard-coded; siempre la última; INEMA.CLUB; nunca duplicar.

El framework de HyperFrames establece opacity:1 en todos los .clip durante la captura del frame — se ignoran las animaciones de opacidad en ellos. El objetivo correcto para el fade-in/out siempre es .scene-inner, el contenedor interno de la escena.

Este es el gotcha #1 más frecuente. El video parece correcto en el navegador, pero el render final muestra escenas parpadeantes o sin transición.

Objetivo correcto = .scene-inner; .clip = prohibido para opacity; sobrescritura del framework.

Las escenas impares (1, 3, 5…) usan el <audio> track A; las escenas pares (2, 4, 6…) usan el track B. Esto permite que un track termine de forma natural mientras el otro ya carga el siguiente audio — eliminando el problema de clips superpuestos donde dos audios se reproducen al mismo tiempo.

Si colocas todos los audios en el mismo track, habrá una superposición inevitable en las transiciones con FADE. El patrón alternado lo resuelve de forma estructural.

Track A = impares; Track B = pares; superposición eliminada; precarga en el track inactivo.

Los elementos puramente decorativos ubicados fuera del área visible (p. ej., brillos que se desbordan, textos fantasma en negativo) deben tener el atributo data-layout-ignore. Sin él, el motor de layout de Remotion los cuenta dentro del bounding box y puede cortar o desplazar la escena.

Los elementos decorativos fuera del canvas sin el atributo son la causa #1 de composiciones con recortes inesperados en el render.

data-layout-ignore; fuera del canvas; bounding box; elementos decorativos invisibles.

El gotchas.md prohíbe cualquier @import url(fonts.googleapis.com) en el HTML generado. La variable centinela google_fonts_import se usa en las plantillas para garantizar que el generador lance un error si detecta la cadena en el output, lo que obliga a usar siempre @font-face local.

El entorno de render no tiene acceso a internet. Una importación externa hace que falten fuentes, que el texto aparezca en sans-serif de respaldo y que el diseño se rompa por completo.

Prohibido Google Fonts CDN; @font-face local; sentinela google_fonts_import.

En Windows y en git-bash, ffmpeg intenta leer stdin interactivo incluso en llamadas no interactivas, lo que bloquea el proceso indefinidamente. La flag -nostdin desactiva este comportamiento. Todos los comandos ffmpeg en los scripts de la skill la incluyen de forma predeterminada.

Si quitas la flag al adaptar un script, el proceso se bloqueará silenciosamente en Windows, sin mostrar ningún mensaje de error: será difícil diagnosticarlo.

-nostdin; Windows/git-bash; stdin interactivo; proceso bloqueado.

El generador y las plantillas prohíben Date.now(), Math.random() y cualquier fetch() dentro del HTML renderizable. Remotion renderiza cada frame de forma independiente: el código no determinista produce frames inconsistentes y un video con parpadeo.

Es la causa más difícil de diagnosticar: el video parece correcto en la vista previa, pero tiembla en el render final. La regla simple: si el valor cambia entre ejecuciones, no pertenece a la plantilla.

Determinismo total; sin Date.now; sin Math.random; sin fetch en tiempo de ejecución; valores fijos.