📂 La carpeta video-explicativo/
Todo lo que Claude necesita para crear un video explicativo está en 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 todo 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- ✓Mantén los 7 archivos en la estructura exacta
- ✓Copiar los scripts al proyecto de video antes de editar
- ✓Usar
SKILL.mdsiempre como punto de entrada - ✓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 adicionales en la raíz del proyecto (
index-vertical.html, copias de seguridad) - ✗Renombrar
SKILL.mdo cambiar su 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 resaltado), tipografía Sora 700–800 para títulos e Inter para el cuerpo, JetBrains Mono para el código. Formatos: 16:9 → 1920×1080 y 9:16 → 1080×1920. CTA final obligatorio: INEMA.CLUB.
gotchas.md
Trampas
Problemas reales que ya se enfrentaron: 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 fuera del canvas marcados con data-layout-ignore, y 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 a la vez — abre solo el archivo al que se hace referencia cuando se necesita ese contexto específico. Así se mantiene ligera la ventana de contexto.
Antes de iniciar cualquier video, lee el pipeline.md completo. Documenta casos reales 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 se ejecutan directamente. Tú copia para tu proyecto de video (cambiándole el nombre según sea necesario) y luego lo adapta. El original en la skill queda 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 tweens 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 a 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 lugar 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 el primer principio hasta un nivel avanzado. Narración breve por escena (≈100 s de voz ≈ 1:50 de video). Expande las siglas al hablar: "SKILL.md" → "SKILL punto M D".
Projeto
— inicializa HyperFrames
npx hyperframes init <nome> --example blank --non-interactive. Copiar design.md (estilo de la casa) para la raíz.
Fontes
— descarga el subset latin en .woff2
node fetch-fonts.mjs → genera assets/fonts/fonts.css. Obligatorio: el lint falla si se usa un CDN de fuentes.
Narração
— genera archivos WAV con Kokoro
Voz pf_dora --speed 0.98. Medir duraciones con ffprobe. Plantilla 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) y npx hyperframes inspect --samples 16 (0 problemas). Corregir siguiendo references/gotchas.md.
Render
— draft → high
Primero el draft 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), ya que la plantilla importa assets/fonts/fonts.css que solo existe después del fetch. Saltarse 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 revelació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 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 ensamblar la composición, accede a pipeline.md. Nunca uses ambos al mismo tiempo sin necesidad.
- ✓Description clara y específica (el desencadenante para usarla)
- ✓Flujo conciso con enlaces a referencias detalladas
- ✓Referencias organizadas por tema (pipeline / style / gotchas)
- ✗Incluir 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, sino la identidad distintiva del canal.
#0D1321 fondo, ámbar como acento principal, cian para destacados 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 del TTS descarga un modelo de ~340MB — sin clave de API ni 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. ¿Agregar más escenas? Insértala 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 se debe usar
- ✓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 mood premium en los videos de INEMA.CLUB.