yash0208/demo-video-master

O que demo-video-master faz?

Transforme um recurso + URL em um vídeo demo cinematográfico em um único comando.

Combina quatro ferramentas em um único pipeline automatizado:

Etapa	Ferramenta	O que faz
Captura	agent-browser	Screenshots + gravação de rolagem da URL ao vivo
Design	video-shotcraft	5–7 tomadas cinematográficas, teclas PageCam, legendas, SFX
Renderização	Remotion	React → mp4
Voz	ElevenLabs	Narração VO por cena
Merge	ffmpeg	VO + vídeo → final.mp4

---

Gatilho

Qualquer um destes ativa esta skill:

demo-video: <descrição do recurso> <url>

faça um vídeo demo para <url> — <descrição do recurso>

---

Pipeline Completo (leia antes de começar)

Consulte pipeline.md para as instruções completas passo a passo para o agente.

Resumo rápido:

1. Captura — execute scripts/capture.mjs <url> <slug> → PNGs vão para public/textures/<slug>/
2. Design — invoque o video-shotcraft no modo autônomo com as capturas; saída shotlist.json + arquivos TSX de cena
3. Paralelo:
   • 3a VO — execute scripts/elevenlabs-vo.mjs <slug> em segundo plano
   • 3b Renderização — npx remotion render src/Root.tsx <CompositionId> out/<slug>.mp4
4. Merge — scripts/merge.sh <slug> — ffmpeg insere VO no vídeo renderizado
5. Commit + preview — faça commit em examples/<slug>/, abra QuickLook

---

Configuração (uma vez)

# 1. Instale esta skill
git clone https://github.com/yash0208/demo-video-master ~/.claude/skills/demo-video-master

# 2. Instale agent-browser (vercel-labs/agent-browser)
npm install -g agent-browser
agent-browser install          # baixa o Chrome uma vez

# 3. Instale skills pré-requisitas
git clone https://github.com/vincentwei1021/video-shotcraft ~/.claude/skills/video-shotcraft
git clone https://github.com/yash0208/remotion-best-practices ~/.claude/skills/remotion-best-practices

# 4. Instale ffmpeg
brew install ffmpeg             # macOS; ou apt install ffmpeg no Linux

# 5. Copie o template .env para seu projeto de vídeo
cp ~/.claude/skills/demo-video-master/.env.example _video/.env.local
# Preencha ELEVENLABS_API_KEY e ELEVEN_VOICE_ID

---

Regras (sempre aplicar)

• Apenas screenshots — use capturas reais da página via agent-browser; nunca sintetize UI
• Mascaramento de PII — substitua dados reais do usuário antes que qualquer captura entre na renderização
• Renderização determinística — sem Math.random() / Date.now() nas cenas Remotion; semeie toda aleatoriedade a partir do índice
• VO + renderização paralelos — sempre execute ElevenLabs e Remotion simultaneamente para economizar tempo
• Infográficos externos apenas — elementos animados ficam sobre os screenshots; sem elevações de cartão translateZ, sem anéis de borda desenhados nos screenshots

---

Variáveis de Ambiente

ELEVENLABS_API_KEY=sua_chave_aqui
ELEVEN_VOICE_ID=seu_id_de_voz_aqui   # padrão: Adam (pNInz6obpgDQGcFmaJgB)