Um curso completo sobre a Skill video-demonstrativo: ela navega o seu app de verdade com um navegador automatizado, captura as telas reais passo a passo e monta um walkthrough narrado — moldura de navegador, cursor que clica nos controles, zoom e narração local. Tudo na sua máquina, sem chave de API.
Diagrama ilustrativo do pipeline do vídeo demonstrativo
Duas skills irmãs, dois objetivos. Esta mostra um app real sendo usado; a outra explica um conceito com motion graphics.
Captura as telas reais do app e anima cursor + zoom por cima. Tutorial/walkthrough de "como usar a ferramenta X".
Cenas em motion graphics que explicam um conceito. Sem app real — tudo é HTML animado. Ver curso →
Do conceito de walkthrough até o MP4 narrado do seu app rodando.
O que é um vídeo demonstrativo, quando usá-lo, o princípio "capturar antes, animar depois" e a stack sem API key (agent-browser + HyperFrames + Kokoro).
3 módulos · básico →Dirigir o app de verdade com agent-browser/Playwright: o actions.json, coordenadas e bounding boxes, scroll em páginas longas, inputs React e fluxos multi-estado.
4 módulos · prático →Moldura de navegador, cursor animado e zoom; house style dark premium; narração TTS local Kokoro; e o render no HyperFrames com lint, inspect e a CTA do AutomationsAI.
3 módulos · avançado →Um actions.json descreve URL, viewport e os passos. O agent-browser navega o app de verdade e captura as telas reais (shots + steps.json).
O viewport fixo vira o espaço de coordenadas. Cursor mira os controles, zoom destaca a ação, e a narração Kokoro é medida pra bater com cada passo.
HyperFrames roda Chrome headless + FFmpeg e exporta o walkthrough em 16:9 com moldura de navegador e a CTA do AutomationsAI. Sem nuvem, sem API.
É uma pasta auto-contida: SKILL.md, scripts (capture + composição + narração), referências e as fontes. Coloque em ~/.claude/skills/ (global) ou .claude/skills/ (projeto) e peça um vídeo de demonstração ao Claude Code. Este curso inteiro explica cada parte dela.