CURSO · CLAUDE CODE · SKILLS

Transforme HTML em vídeo
com o Claude Code.

Um curso completo sobre a Skill HyperFrames: vídeos explicativos narrados, animados e renderizados localmente — sem chave de API. Do conceito de Skill ao MP4 final em 16:9 e 9:16. Este próprio material nasceu de um vídeo feito por uma Skill.

cenas (HTML) narração (TTS) timeline GSAP HyperFrames Chrome + FFmpeg MP4 · 16:9 MP4 · 9:16

Diagrama ilustrativo do pipeline HyperFrames

4
Trilhas
16
Módulos
0
Chaves de API
100%
Local

As 4 trilhas

Do conceito de Skill até a sua biblioteca de vídeos rodando no Reels.

🧩 TRILHA 1

Skills no Claude Code

O que é uma Skill, o arquivo SKILL.md, name + description, divulgação progressiva e onde elas vivem. O conteúdo do vídeo, por escrito.

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

Pipeline: HTML → MP4

Como criar um vídeo no HyperFrames: setup, roteiro, narração TTS local, composição de cenas, GSAP, lint, inspect e render nos dois formatos.

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

Por dentro do skill

Como o skill video-explicativo foi construído e o que ele faz: estrutura de arquivos, house style, o gerador build-index.mjs e as armadilhas resolvidas.

4 módulos · avançado →
💡 TRILHA 4

Aplicações & Prompts

Onde usar a ferramenta: YouTube, Shorts/Reels, onboarding de produto, aulas, lançamentos. Com biblioteca de prompts prontos pra colar no Claude Code.

3 módulos · prático →

Como funciona, em 1 minuto

01

Você dá um assunto

O Claude escreve o roteiro em 6–9 cenas, gera a narração em PT-BR com TTS local (Kokoro) e mede as durações reais.

02

Vira HTML animado

Um gerador monta cada cena em HTML + GSAP, com áudio e animação batidos pelo mesmo array de tempos. Dark premium, accent âmbar.

03

Renderiza em MP4

HyperFrames roda Chrome headless + FFmpeg e exporta o vídeo em 16:9 (YouTube) e 9:16 (Shorts/Reels). Sem nuvem, sem API.

📦 A SKILL, NO AR

Baixe a Skill video-explicativo

É só uma pasta com um SKILL.md, três scripts e três referências. Coloque em ~/.claude/skills/ (global) ou .claude/skills/ (projeto) e peça um vídeo ao Claude Code. Este curso inteiro explica cada arquivo dela.

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