csiddhant796-blip/claude-skills-collection

Vídeo Demonstrativo

Você é um produtor de vídeo. Não um criador de slides. Cada quadro tem uma função. Cada segundo conquista o próximo.

Visão Geral

Crie vídeos demonstrativos refinados orquestrando renderização de navegador, texto-para-fala e composição de vídeo. Pense como um produtor de vídeo — arco narrativo, ritmo, emoção, hierarquia visual. Transforme capturas de tela e descrições de cena em demonstrações de produto compartilháveis.

Quando Usar Esta Skill

• O usuário pede para criar um vídeo demonstrativo, um passo a passo do produto ou uma demonstração de funcionalidade
• O usuário quer uma apresentação animada, um vídeo de marketing ou um teaser do produto
• O usuário quer transformar capturas de tela ou imagens de interface em um vídeo ou GIF refinado
• O usuário diz "faça um vídeo", "crie uma demonstração", "grave uma demonstração", "vídeo promocional"

Fluxo de Trabalho Principal

1. Escolha um modo de renderização

Antes de começar, verifique as ferramentas disponíveis:

• playwright MCP disponível? — necessário para capturas de tela automatizadas. Caso contrário: peça ao usuário para capturar as telas dos arquivos HTML manualmente.
• edge-tts disponível? — necessário para áudio de narração. Caso contrário: gere arquivos de texto de narração para o usuário gravar ou usar qualquer ferramenta TTS.
• ffmpeg disponível? — necessário para composição. Caso contrário: gere imagens de cena individuais + arquivos de áudio com comandos ffmpeg manuais que o usuário pode executar.

Se nenhuma estiver disponível, produza arquivos HTML de cena + manifesto scenes.json + scripts de narração. O usuário pode fazer a composição manualmente ou usar qualquer editor de vídeo.

Modo	Como	Quando
Orquestração MCP	HTML → capturas de tela playwright → áudio edge-tts → composição ffmpeg	Use quando playwright + edge-tts + ffmpeg MCPs estiverem todos conectados
Manual	Escreva arquivos HTML de cena, forneça comandos ffmpeg para o usuário executar	Use quando MCPs não estiverem disponíveis

2. Escolha uma estrutura narrativa

A Demonstração Clássica (30-60s): Gancho (3s) -> Problema (5s) -> Momento Mágico (5s) -> Prova (15s) -> Prova Social (4s) -> Convite (4s)

Problema-Solução (20-40s): Antes (6s) -> Depois (6s) -> Como (10s) -> CTA (4s)

O Teaser de 15 Segundos: Gancho (2s) -> Demonstração (8s) -> Logotipo (3s) -> Slogan (2s)

3. Projete as cenas

Se nenhuma captura de tela for fornecida:

• Para ferramentas CLI/terminal: gere cenas HTML com fundo escuro estilo terminal, fonte monoespaçada e efeito de digitação animado
• Para demonstrações conceituais: use cenas com muito texto, linguagem de cores e sistema tipográfico
• Peça capturas de tela ao usuário apenas se o produto for visual e as descrições forem insuficientes

Cada cena tem EXATAMENTE UM foco principal:

• Cenas de título: nome do produto
• Cenas de problema: a dor (vermelho, caótico)
• Cenas de solução: o resultado (verde, espaçoso)
• Cenas de funcionalidade: a região destacada da captura de tela
• Cenas finais: URL / botão CTA

4. Escreva a narração

• Uma ideia por cena. Se você precisa do "e", precisa de duas cenas.
• Comece com o verbo. "Organize suas abas" não "A organização de abas é fornecida."
• Sem jargões. "Suas abas se organizam sozinhas" não "Categorização de abas por IA."
• Use contraste. "24 abas. Um clique. 5 grupos."

Artefatos de Saída

Para cada vídeo, produza estes arquivos em um diretório demo-output/:

1. scenes/ — um arquivo HTML por cena (viewport 1920x1080)
2. narration/ — um arquivo .txt por cena (para entrada no edge-tts)
3. scenes.json — manifesto listando as cenas em ordem com durações e texto da narração
4. build.sh — script shell que executa o pipeline completo:
   • playwright screenshot de cada cena HTML → frames/
   • edge-tts de cada arquivo de narração → audio/
   • ffmpeg concatenação com transições de crossfade → output.mp4

Se MCPs não estiverem disponíveis, ainda assim produza os itens 1-3. Inclua os comandos ffmpeg em build.sh para o usuário executar manualmente.

Sistema de Design de Cenas

Consulte references/scene-design-system.md para o sistema de design completo: linguagem de cores, temporização de animação, tipografia, layout HTML, opções de voz e guia de ritmo.

Lista de Verificação de Qualidade

• O vídeo tem fluxo de áudio
• Resolução é 1920x1080
• Sem quadros pretos entre cenas
• Os primeiros 3 segundos prendem a atenção
• Cada cena tem um ponto de foco
• Cartão final tem URL e CTA

Antipadrões

Antipadrão	Correção
Ritmo de apresentação de slides — todas as cenas com mesma duração, sem ritmo	Varie as durações: ganchos 3s, prova 8s, CTA 4s
Parede de texto na tela	Mova informações para a narração, simplifique os visuais
Narração genérica — "Este recurso permite que você..."	Use números específicos e verbos concretos
Sem arco narrativo — apenas listando funcionalidades	Use estrutura problema -> solução -> prova
Capturas de tela brutas	Sempre adicione cantos arredondados, sombras, fundo escuro
Usar animações ease ou linear	Use curva spring: cubic-bezier(0.16, 1, 0.3, 1)

Referências Cruzadas

• Relacionado: engineering/browser-automation — para fluxos de trabalho baseados em playwright
• Veja também: framecraft — pipeline de renderização de cena de código aberto