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. Del concepto de Skill al MP4 final en 16:9 y 9:16. Este mismo material nació de un video hecho con un 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 recorridos

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

🧩 RUTA 1

Skills en Claude Code

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

4 módulos · básico →
🎬 RUTA 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 →
🔧 RUTA 3

Por dentro de la skill

Cómo se creó 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 →
💡 RUTA 4

Aplicaciones y prompts

Dónde usar la herramienta: YouTube, Shorts/Reels, onboarding de producto, clases y lanzamientos. Con 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 el audio y la animación sincronizados por 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, AL AIRE

Descarga la Skill video-explicativo

Es solo una carpeta con un SKILL.md, tres scripts y tres referencias. Colócalos 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