abdurshd/skills

GenVid Promo

Produza o vídeo finalizado, não apenas um roteiro ou storyboard. Construa uma composição Remotion determinística cuja narração, visuais, claims do produto e ritmo sejam verificados.

Inicialização obrigatória

1. Inspecione a invocação em busca de um provedor de TTS e um valor de chave de API ou uma referência explícita a uma variável de ambiente/secreto.
2. Se algum deles estiver faltando, pare e pergunte: Qual provedor de TTS devo usar e como devo acessar sua chave de API? Prefira uma variável de ambiente secreta como OPENAI_API_KEY ou GEMINI_API_KEY; não vou confirmar ou imprimi-la.
3. Não escolha silenciosamente um provedor, presuma uma chave existente, sintetize fala de placeholders ou continue além desta barreira.
4. Carregue imediatamente a skill remotion-best-practices instalada por completo. Carregue sua regra video-layout antes do design; carregue suas regras de áudio, transições, legendas, FFmpeg e metadados quando esses recursos forem usados. Diga explicitamente que essa dependência está sendo usada. Se não estiver disponível, declare isso e use references/production-pipeline.md como fallback mínimo.
5. Leia references/tts-providers.md antes de implementar a síntese. Verifique os modelos atuais do provedor e os formatos de SDK/API com a documentação oficial, pois eles mudam.

Fluxo de trabalho

1. Estabeleça o briefing

Determine o produto, público, objetivo de lançamento, plataforma, proporção de aspecto, duração alvo, tom, CTA, localidade e claims necessários. Inferir escolhas criativas reversíveis quando ausentes. Pergunte apenas por escolhas que alterem materialmente o resultado.

Padrão: 1920x1080, 30 FPS, 35-75 segundos, um narrador, legendas e um CTA claro. Adicione composições verticais ou quadradas quando o canal solicitado as exigir.

2. Verifique o produto real

Inspecione o repositório e execute o aplicativo real quando disponível. Rastreie rotas reais, componentes, estados de dados, tokens de design, fontes, ícones, cópia, nomes de planos, preços e comportamento de recursos. Para um produto ativo, inspecione a experiência renderizada real com automação de navegador. Nunca invente uma tela, capacidade, métrica, depoimento, preço ou interação.

Use visuais do produto nesta ordem:

1. Importe componentes reais em um harness controlado Remotion/demo com dados mock determinísticos.
2. Extraia componentes de exibição seguros para animação, preservando o DOM real, tokens, cópia e estados.
3. Construa réplicas derivadas da fonte apenas quando componentes reais não puderem renderizar fora do aplicativo; compare-as com capturas de tela reais e divulgue esse fallback.
4. Use capturas de tela ou gravações de tela apenas onde componentes seguros para animação forem impraticáveis.

Não exponha segredos de produção nem mude dados ativos apenas para filmar um estado.

3. Escreva a história e o storyboard

Use um arco compacto: gancho -> problema -> revelação -> prova através do uso real -> benefícios mais fortes -> CTA. Dê a cada cena uma mensagem e um visual focal. Escreva a narração da cena antes do tempo final.

Crie storyboard.json usando references/storyboard-schema.md. Inclua o estado exato da UI, proveniência do componente/fonte, ações, narração, claims e intenção de transição para cada cena.

4. Construa o sistema Remotion

Crie um sistema visual reutilizável para tokens do produto, tipografia, áreas seguras, molduras de navegador/dispositivo, cursor, destaques, texto de máquina de escrever, movimentos de câmera e transições. Use useCurrentFrame() com interpolate() ou chamadas spring() justificadas; nunca use animações ou transições CSS.

Prefira movimento projetado: foco de câmera, revelações mascaradas, movimentos em eixo compartilhado, crossfades de bom gosto, continuidade de objetos e encenação temporal. Evite movimento aleatório, grades genéricas de cartões, UI minúscula e pontos focais concorrentes simultâneos.

5. Gere e sincronize a narração

Gere um arquivo de áudio por cena. Preserve a transcrição como a fonte da verdade. Meça a duração real do áudio e escreva voiceover-manifest.json; derive a duração da cena a partir do áudio mais lead-in e espaço para respirar. Inicie a narração após o visual se estabelecer e programe ações visíveis para a frase exata que as descreve.

Não estique o áudio para caber em cenas fixas. Regere ou reajuste o tempo quando a entrega e os visuais divergirem. Adicione legendas a partir da transcrição conhecida; use STT apenas quando a saída falada for diferente o suficiente para exigir timestamps no nível da palavra.

Execute node <skill-dir>/scripts/validate-genvid.mjs <storyboard> <manifest> [project-root] antes da renderização.

6. Renderize e inspecione

Renderize stills representativos perto da entrada, meio, interação chave e saída de cada cena. Inspecione-os no tamanho de visualização normal. Corrija clipes, texto ilegível, sobreposição acidental, desvio do cursor, UI infiel, tempo morto, cortes abruptos e incompatibilidades de narração.

Renderize o MP4 final com H.264, BT.709 e áudio AAC de alta qualidade, a menos que o destino exija outro formato. Assista ao resultado completo com som. Confirme tempo de execução, dimensões, codecs, presença de áudio, CTA final e caminhos dos artefatos.

Padrão de conclusão

Termine apenas quando o MP4 existir e tiver sido assistido ou amostrado em toda a linha do tempo. Reporte o caminho renderizado, dimensões, FPS, duração, provedor/modelo/voz do TTS, fonte dos visuais do produto, claims verificados, testes realizados e qualquer fallback intencional de réplica/captura.