📂 La carpeta video-explicativo/
Todo lo que Claude necesita para crear un video explicativo vive dentro de una sola carpeta bien organizada. Ni más ni menos.
La carpeta video-explicativo/ es el skill completo: contiene el archivo de entrada (SKILL.md), los scripts ejecutables (scripts/) y las referencias de apoyo (references/). Claude accede a cada capa solo cuando la necesita; nunca a todas a la vez.
video-explicativo/
├── SKILL.md ← entrada principal
├── scripts/
│ ├── composition-template.mjs ← gerador de composição
│ ├── fetch-fonts.mjs ← baixa .woff2 subset latin
│ └── narration-template.sh ← gera WAVs com Kokoro
└── references/
├── pipeline.md ← passo a passo completo
├── house-style.md ← identidade visual dark premium
└── gotchas.md ← armadilhas e correções- ✓Mantener los 7 archivos en la estructura exacta
- ✓Copiar scripts al proyecto de video antes de editar
- ✓Usar
SKILL.mdcomo puerta de entrada siempre - ✓Consultar
references/bajo demanda mediante enlaces
- ✗Editar los scripts directamente en la carpeta de la skill
- ✗Ignorar los archivos de referencia pensando que son opcionales
- ✗Crear archivos extra en la raíz del proyecto (
index-vertical.html, copias de seguridad) - ✗Renombrar
SKILL.mdo cambiar tu ubicación
📚 Las 3 referencias
Cada archivo en references/ tiene un propósito único y se carga solo cuando se necesita ese conocimiento específico.
pipeline.md
Paso a paso
La guía operativa completa. Explica en detalle cada uno de los 7 pasos del flujo: estructura del proyecto, cómo escribir el guion, generar narraciones con Kokoro, medir duraciones con ffprobe, montar la composición y renderizar en dos formatos.
house-style.md
Identidad visual
Define el dark premium que Nei usa en todos los videos: paleta (#0D1321 bg, ámbar como acento, ciano como destaque), tipografía Sora 700–800 para títulos e Inter para el cuerpo, JetBrains Mono para código. Formatos: 16:9 → 1920×1080 y 9:16 → 1080×1920. CTA final obligatorio: INEMA.CLUB.
gotchas.md
Trampas
Problemas reales ya enfrentados: overlapping_clips_same_track (alternar data-track-index 1/3 para escenas, 2/4 para captions), gsap_exit_missing_hard_kill (agregar tl.set después del fade-out), elementos decorativos off-canvas marcados con data-layout-ignore, y el uso de ffmpeg -nostdin en git-bash.
O SKILL.md apunta a los 3 archivos de referencia mediante enlaces Markdown relativos. Claude nunca carga todas las referencias de una sola vez — abre solo el archivo enlazado cuando se necesita ese contexto específico. Así mantiene ligera la ventana de contexto.
Antes de iniciar cualquier video, lee el pipeline.md completo. Documenta casos reales ya vividos y evita que repitas errores que llevan horas diagnosticar, especialmente el error de ffmpeg -nostdin en Windows/git-bash.
🔧 Los 3 scripts
Cada script en scripts/ es una plantilla que copias al proyecto de video y adaptas; nunca la editas directamente en el skill.
Los scripts son plantillas — no son ejecutables directos. Tú copia para tu proyecto de video (renombrando según sea necesario) y luego lo adapta. El original en la skill permanece intacto para el próximo video.
composition-template.mjs
Generador principal de la composición HyperFrames. Define AUDIO[] con duraciones reales, CAPTIONS[], función sceneN() por escena HTML y anim(i,t) para los tweens de GSAP.
build-index.mjsfetch-fonts.mjs
Descarga las fuentes Sora, Inter y JetBrains Mono de Google Fonts como archivos .woff2 subset latin, generando assets/fonts/fonts.css con @font-face locales.
node fetch-fonts.mjsnarration-template.sh
Script de Shell que escribe los archivos assets/txt/sN.txt y llama al HyperFrames TTS con la voz pf_dora --speed 0.98 para generar assets/audio/sN.wav.
assets/narration.sh# Gera cada cena via HyperFrames TTS
for i in 1 2 3 4 5 6 7 8; do
npx -y hyperframes tts "txt/s$i.txt" \
--voice pf_dora \
--speed 0.98 \
--output "audio/s$i.wav"
done
# Mede durações com ffprobe
for i in 1 2 3 4 5 6 7 8; do
d=$(ffprobe -v error \
-show_entries format=duration \
-of default=noprint_wrappers=1:nokey=1 \
"audio/s$i.wav" 2>/dev/null)
echo "s$i: ${d}s"
done- ✓Copiar al proyecto antes de editar
- ✓Ejecutar
node fetch-fonts.mjsantes del primer render - ✓Completar
AUDIO[]con duraciones REALES de ffprobe
- ✗Usar Google Fonts vía CDN (el lint falla:
google_fonts_import) - ✗Usar duraciones estimadas en vez de las medidas con ffprobe
- ✗Olvidar
ffmpeg -nostdinen Windows (archivo no generado)
🔢 El flujo de 7 pasos del SKILL.md
El SKILL.md define una secuencia obligatoria. Seguirla en ese orden evita retrabajo: cada paso depende del anterior.
Roteiro
— escribe SCRIPT.md
6–9 escenas, desde los principios básicos hasta lo avanzado. Narración breve por escena (≈100s de voz ≈ 1:50 de video). Desarrolla las siglas en la locución: "SKILL.md" → "SKILL punto M D".
Projeto
— inicializa HyperFrames
npx hyperframes init <nome> --example blank --non-interactive. Copiar design.md (estilo de la casa) en la raíz.
Fontes
— descarga un .woff2 con subconjunto latin
node fetch-fonts.mjs → genera assets/fonts/fonts.css. Obligatorio: el lint falla si se usa un CDN de fuentes.
Narração
— genera WAVs de Kokoro
Voz pf_dora --speed 0.98. Medir las duraciones con ffprobe. Template en scripts/narration-template.sh.
Composição
— adapta la plantilla
Copiar como build-index.mjs. Completar AUDIO[] con duraciones REALES. Ejecutar: node build-index.mjs (16:9) e node build-index.mjs --vertical (9:16).
Validar
— lint + inspect
npx hyperframes lint (0 errores) e npx hyperframes inspect --samples 16 (0 problemas). Corrige siguiendo references/gotchas.md.
Render
— draft → high
Primero el borrador para revisarlo, después --quality high. Genera renders/<nome>-16x9.mp4 e renders/<nome>-9x16.mp4.
El paso 3 (fuentes) DEBE ir antes del paso 5 (composición), porque la plantilla importa assets/fonts/fonts.css que solo existe después del fetch. Omitir ese orden genera un error de archivo no encontrado en tiempo de ejecución.
🧠 Divulgación progresiva en la práctica
El diseño de divulgación progresiva es lo que hace que el skill sea eficiente: Claude carga solo lo que necesita, cuando lo necesita.
Nivel 1 — Siempre en la memoria: solo el name e description del skill. Claude sabe que el skill existe y cuándo usarlo.
Nivel 2 — Cargado para la tarea: o SKILL.md completo, con los 7 pasos y los enlaces a las referencias.
Nivel 3 — Cargado bajo demanda: cada archivo en references/ solo cuando se está ejecutando ese paso específico.
Este diseño funciona para cualquier skill complejo: SKILL.md conciso con enlaces explícitos a referencias especializadas. Cuando Claude ejecuta el paso 6 (validar), accede a gotchas.md. Al montar la composición, accede a pipeline.md. Nunca uses ambos al mismo tiempo sin necesidad.
- ✓Description clara y específica (el disparador de cuándo usarla)
- ✓Flujo conciso con enlaces a referencias detalladas
- ✓Referencias organizadas por tema (pipeline / style / gotchas)
- ✗Poner todo el contenido de references/ dentro de SKILL.md
- ✗Description vaga como «crea videos», sin especificidad
- ✗Mezclar reglas de identidad visual con reglas de ejecución
🎯 El patrón del usuario Nei
Toda producción de video de Nei sigue convenciones firmes: no son preferencias opcionales, son la identidad del canal.
#0D1321 fondo, ámbar como acento principal, cian para resaltes secundarios.
# Cena s9 — CTA INEMA.CLUB (incluída no template, não remover)
write s9 "Isso é conteúdo do INEMA ponto CLUB. Acesse: inema ponto club."
# Render — sempre os dois formatos
node build-index.mjs && npx hyperframes render \
--quality high \
--output renders/<nome>-16x9.mp4
node build-index.mjs --vertical && npx hyperframes render \
--quality high \
--output renders/<nome>-9x16.mp4La voz pf_dora con velocidad --speed 0.98 es la voz predeterminada de todos los videos. Alternativas PT-BR disponibles: pm_alex (masculina) y pm_santa (masculina formal). La primera ejecución de TTS descarga ~340MB de modelo — sin clave de API, sin espeak-ng.
La escena 9 (CTA INEMA.CLUB) ya está preconstruida en el composition-template.mjs. NUNCA debe eliminarse. Es la firma del canal y parte de la identidad de la marca. ¿Vas a agregar más escenas? Insértalas antes de la escena 9, no después.
📋 Resumen del Módulo 3.1
Qué aprendiste
- ✓La estructura exacta de los 7 archivos de la skill
video-explicativo/ - ✓El propósito de cada uno de los 3 archivos en
references/ - ✓Cómo funciona cada script y cómo debe usarse
- ✓Los 7 pasos obligatorios del flujo y su orden
- ✓Cómo la divulgación progresiva mantiene ligero el contexto
- ✓Las convenciones innegociables de Nei (PT-BR, dark premium, 16:9+9:16, CTA)
Datos para recordar
- →Voz predeterminada:
pf_dora --speed 0.98 - →LEAD = 0.5s · TAIL = 0.9s · FADE = 0.45s
- →Fuentes: Sora 700–800 / Inter 400–600 / JetBrains Mono
- →Fondo:
#0D1321· Acento ámbar · Cian destacado - →7 archivos en total: 1 SKILL.md + 3 scripts + 3 references
#0D1321, tipografía Sora, animaciones GSAP y cómo el ámbar y el cian crean el ambiente premium en los videos de INEMA.CLUB.