PTENES
CURSO · CLAUDE CODE · SKILLS

Transforma HTML en video
con Claude Code.

Un curso completo sobre la Skill HyperFrames: videos explicativos narrados, animados y renderizados localmente — sin clave de API. Desde el concepto de Skill hasta el MP4 final en 16:9 y 9:16. Este mismo material nació de un video hecho con una Skill.

escenas (HTML) narración (TTS) timeline GSAP HyperFrames Chrome + FFmpeg MP4 · 16:9 MP4 · 9:16

Diagrama ilustrativo del pipeline de HyperFrames

4
Rutas
16
Módulos
0
Claves de API
100%
Local

Los 4 tracks

Del concepto de Skill a tu biblioteca de videos funcionando en Reels.

🧩 TRILHA 1

Skills en Claude Code

Qué es una Skill, el archivo SKILL.md, name + description, la divulgación progresiva y dónde se encuentran. El contenido del video, por escrito.

4 módulos · básico →
🎬 TRILHA 2

Pipeline: HTML → MP4

Cómo crear un video en HyperFrames: configuración, guion, narración TTS local, composición de escenas, GSAP, lint, inspect y render en los dos formatos.

5 módulos · práctico →
🔧 TRILHA 3

Por dentro de la skill

Cómo se construyó la skill video-explicativo y qué hace: estructura de archivos, house style, el generador build-index.mjs y los problemas resueltos.

4 módulos · avanzado →
💡 TRILHA 4

Aplicaciones y prompts

Dónde usar la herramienta: YouTube, Shorts/Reels, incorporación de producto, clases y lanzamientos. Incluye una biblioteca de prompts listos para pegar en Claude Code.

3 módulos · práctico →

Cómo funciona, en 1 minuto

01

Tú das un tema

Claude escribe el guion en 6–9 escenas, genera la narración en PT-BR con TTS local (Kokoro) y mide las duraciones reales.

02

Se convierte en HTML animado

Un generador crea cada escena en HTML + GSAP, con audio y animación sincronizados mediante el mismo array de tiempos. Dark premium, acento ámbar.

03

Renderiza en MP4

HyperFrames ejecuta Chrome headless + FFmpeg y exporta el video en 16:9 (YouTube) y 9:16 (Shorts/Reels). Sin nube, sin API.

📦 LA SKILL, EN EL AIRE

Descarga la Skill video-explicativo

Es solo una carpeta con un SKILL.md, tres scripts y tres referencias. Coloca en ~/.claude/skills/ (global) o .claude/skills/ (del proyecto) y pídele un video a Claude Code. Este curso completo explica cada archivo de ella.

video-explicativo/
├─ SKILL.md
├─ references/ *.md
└─ scripts/ *.mjs · *.sh