getedgehq/skills

Vídeo de Lançamento de Produto

Crie um filme de lançamento cuja história, sistema visual, movimento e evidências sejam todos derivados do produto que está sendo lançado. A entrega é um vídeo renderizado mais o projeto editável que o produziu.

Use HyperFrames quando estiver instalado. Um projeto Remotion também é suportado; prefira componentes remocn mantidos a recriar primitivas de animação comuns. Não mude de stack após o storyboard ser aprovado.

Entradas a serem definidas

Antes de construir, estabeleça:

• URL do produto ou brief de origem;
• público-alvo e a única mudança de crença que o filme deve criar;
• proporção de aspecto, duração alvo, idioma e escolha de narração;
• afirmações que podem aparecer e a evidência por trás de cada uma;
• se um roteiro existente deve permanecer literal ou pode ser reestruturado.

Se qualquer um desses itens alterar materialmente o filme, pergunte uma vez antes de começar.

Saída obrigatória

Mantenha o projeto editável. No mínimo, produza:

capture/                 cópia do produto, capturas de tela, logotipos e tokens de design
STORYBOARD.md            plano aprovado, quadro a quadro
SCRIPT.md                narração, quando o filme é narrado
design.md                regras de tipo, cor, espaçamento, movimento e enquadramento
compositions/            fonte para cada quadro
renders/launch.mp4       entrega final

Não trate uma prévia, storyboard, folha de contato ou rascunho sem áudio como o vídeo final.

Fluxo de trabalho

1. Capture o produto

Inspecione a URL fornecida ou os assets. Preserve a cópia exata do produto, UI real, logotipos, tipografia, cores e estados da interface. Registre cada asset utilizável e sua origem. Não invente funcionalidades, clientes, métricas ou integrações.

Se não existir um site, crie um pequeno registro de origem a partir do brief e dos assets fornecidos, para que os quadros posteriores ainda tenham uma base rastreável.

2. Escolha a história

Escreva uma frase para cada um dos seguintes itens antes de storyboard:

• a frustração atual do público;
• o mecanismo distintivo do produto;
• a prova que o espectador deve acreditar;
• a ação que o espectador deve realizar.

Selecione apenas os beats que o material de origem suporta. Um filme curto geralmente precisa de um gancho, mecanismo, prova e encerramento; não precisa de um inventário de funcionalidades.

Leia references/story-and-shot-system.md ao planejar a sequência.

3. Estabeleça o sistema visual

Derive design.md do produto capturado, em vez de um modelo de vídeo genérico. Defina a tela, tipografia, papéis de cor, grade, áreas seguras, densidade visual, caráter de movimento, tratamento de legendas e família de transições.

Limite o filme a uma gramática visual. A repetição cria identidade; um novo estilo para cada quadro faz o filme parecer montado a partir de modelos.

4. Storyboard antes da animação

Para cada quadro, registre:

• horário de início e fim;
• função narrativa;
• cópia exata na tela;
• asset de origem ou estado da UI;
• intenção de composição e câmera;
• entrada, desenvolvimento e saída;
• transição para o próximo quadro;
• qualquer afirmação e sua fonte de evidência.

O quadro deve continuar se desenvolvendo por sua duração útil. Evite uma animação de entrada seguida por vários segundos de conteúdo estático.

Mostre o storyboard para aprovação antes de construir o filme completo.

5. Construa com primitivas mantidas

HyperFrames é preferido para sequências de quadros em HTML. Para Remotion, leia references/remotion-and-remocn.md e use remocn para comportamentos comuns de tipografia, terminal, gráfico, fundo e transição. A animação personalizada é apropriada apenas quando o produto requer uma ideia de movimento que a biblioteca não pode expressar.

Cada quadro deve ser determinístico em um quadro arbitrário. Não dependa de temporizadores em tempo de execução, aleatoriedade não baseada em semente ou estado de interação que um renderizador não possa reproduzir.

6. Revise o filme montado

Antes de renderizar, inspecione:

• primeiro, meio e último quadro de cada cena;
• cada costura de transição;
• quebra de texto, recorte, contraste e áreas seguras;
• sincronia com narração e música;
• fidelidade do produto e precisão das afirmações;
• o filme completo em velocidade normal com áudio;
• uma passagem sem áudio, para que a história visual ainda faça sentido.

Execute node scripts/check-project.mjs <project-dir> para a verificação do projeto no nível do pacote. Execute também as verificações nativas de lint, validação e renderização da stack de vídeo selecionada.

Pause para aprovação na prévia montada. Renderize o MP4 final apenas após aprovação.

Limite de evidência

Um exemplo polido demonstra a intenção artesanal; não prova que o skill melhora o desempenho do modelo. Relate separadamente:

• verificações de pacote e projeto;
• renderização final bem-sucedida;
• revisão visual humana;
• qualquer avaliação comparativa, apenas quando execuções registradas e pontuações existirem.

Nunca chame o skill de avaliado porque um vídeo atraente foi produzido.

Condições de falha

Pare em vez de enviar quando:

• a afirmação principal do produto não pode ser obtida;
• a UI capturada é substituída por interface cromada inventada;
• um quadro é ilegível na resolução de entrega;
• narração e imagem discordam;
• o projeto não pode renderizar deterministicamente;
• a fonte editável ou o MP4 final estiverem faltando.