🌐 agent-browser (Playwright)
A primeira peça é a captura. O agent-browser dirige um navegador via Playwright: abre a URL num viewport fixo, navega o app, executa ações e tira os screenshots reais com suas bounding boxes.
É o agent-browser que produz a matéria-prima do vídeo: assets/shots/*.png (os estados) e o steps.json (caixas + captions + narração). Sem essa etapa, não há o que animar.
O agent-browser navega o app de verdade — então o localhost:8000 (ou a URL) precisa estar respondendo durante a captura. Os detalhes do capture.mjs e do actions.json ficam na Trilha 2.
🎞️ HyperFrames (HTML→MP4)
A segunda peça é o render. O HyperFrames converte uma página HTML animada em vídeo MP4, usando Chrome headless para gerar os frames e FFmpeg para montá-los.
A página animada (moldura + shots + cursor + zoom + CTA), gerada pelo build-demo.mjs.
Renderiza frame a frame, de forma determinística, sem interface visível.
Junta os frames e o áudio num MP4 16:9 final.
Como o vídeo nasce de HTML renderizado em Chrome headless, é natural que o render seja determinístico (sem rede) — exatamente o princípio do Módulo 1.2. Os detalhes do render ficam na Trilha 3.
🗣️ Kokoro TTS local
A terceira peça é a narração. O Kokoro gera a fala em PT-BR localmente — um WAV por passo (mais a CTA), com a voz pf_dora a --speed 0.98.
O Kokoro roda como modelo local (kokoro-onnx). A primeira execução baixa ~340MB; depois, cada vídeo gera os WAVs sem nenhum serviço externo. O gerador mede esses WAVs com ffprobe para sincronizar o timing automaticamente.
- ✓ "512" → "quinhentos e doze"
- ✓ "automationsai.net" → "inema ponto club"
- ✓ Siglas e URLs soletradas/expandidas
- ✓ 1 frase curta por passo
- ✗ Deixar números crus (lê errado)
- ✗ Esperar atuação dramática (voz é boa, mas neutra)
- ✗ Frases longas que estouram o passo
- ✗ Inglês na narração (sempre PT-BR)
Como o áudio não dá para ouvir no fluxo de geração, o padrão é mostrar frames ao usuário e pedir que ele confirme a locução antes do render final.
🔒 Sem chave de API
As três peças rodam localmente. Captura, render e narração não dependem de nenhum serviço pago nem de chave de API — o que significa custo zero por vídeo e nenhum dado saindo da máquina.
Node 22+ e FFmpeg; o Chrome do HyperFrames (npx hyperframes browser ensure); o TTS Kokoro (pip install kokoro-onnx soundfile); e o agent-browser no PATH. Tudo software local — nenhuma credencial de nuvem.
Ela traz as próprias fontes (Sora/Inter/JetBrains Mono em assets/fonts/) e a house style. Não depende de nenhum outro projeto, repositório ou serviço para funcionar.
📥 Instalar a skill
Como skill é só uma pasta, instalar é simples. Há três caminhos: descompactar o .zip, copiar a pasta, ou criar um symlink para desenvolver.
Em qualquer um dos três jeitos, reinicie a sessão para o Claude Code reconhecer a skill recém-instalada.
📂 Onde a skill vive
Skills moram em .claude/skills. A escolha do local define o escopo: global (qualquer projeto) ou de projeto (só naquele repositório).
Disponível em qualquer projeto. Ideal para uma skill que você usa o tempo todo, em vários repositórios.
Disponível só naquele projeto e versionável junto com o código — bom para times.
Skill pessoal de uso constante → global. Skill específica de um produto e compartilhada com o time → no .claude/skills do repositório.
⚡ Como disparar a skill
Instalada, a skill dispara por frases-gatilho do dia a dia. Conhecer essas frases garante que o demonstrativo (e não o explicativo) entre em ação.
- • "vídeo de demonstração"
- • "demo do app / do sistema"
- • "walkthrough"
- • "mostrar passo a passo usando o app"
- • Dar uma URL e pedir um vídeo do uso
- • Dar um
localhost:8000 - • "gravar a tela do sistema"
- • "vídeo mostrando como usar X"
"Faça um vídeo sobre X" (sem app) tende a acionar o video-explicativo. Para o demonstrativo, deixe claro que há um app a mostrar — ou dê o link.
Como a entrada da skill é o link do app, oferecer a URL logo de início já comunica a intenção e ativa o fluxo certo.
📋 Resumo do Módulo 1.3
- ✓ agent-browser (Playwright) captura os shots + boxes
- ✓ HyperFrames renderiza HTML→MP4 (Chrome headless + FFmpeg)
- ✓ Kokoro TTS local narra (voz pf_dora, --speed 0.98)
- ✓ Tudo roda na máquina — sem chave de API, custo zero
- ✓ Instalar: zip, copiar pasta ou symlink; global vs projeto
- ✓ Disparar: "demo", "walkthrough", ou dar o link