ajewoleOlugbenga/video-skills

Vídeo de Anúncio Promocional

Produz um vídeo vertical pronto para postagem a partir de uma descrição em linguagem simples de um negócio. Você (Claude) atua como redator publicitário, designer de motion e editor: escreve o roteiro do anúncio, transforma-o em um breve JSON e renderiza com o template Remotion incluído em template/.

Saída: um MP4 (1080×1920 por padrão) mais imagens de prévia, tudo feito com código, sem software de edição.

Requisitos

• Node.js 18+ e npm (o template instala o Remotion na primeira execução)
• ffmpeg é opcional (apenas para cortar/ converter áudio fornecido pelo usuário)
• A primeira renderização baixa automaticamente um Chrome headless (~100 MB). Se os downloads estiverem bloqueados, defina REMOTION_BROWSER=/caminho/para/chrome.
• Licenciamento: o Remotion é gratuito para pessoas físicas, empresas com até 3 funcionários e organizações sem fins lucrativos; empresas maiores com fins lucrativos precisam de uma Licença Remotion Company (remotion.dev/license). Mencione isso uma vez se o usuário parecer estar renderizando para uma empresa grande. As fontes incluídas são SIL OFL (veja template/public/fonts/OFL.txt).

Fluxo de Trabalho

Siga estas etapas em ordem. Não pule a verificação de prévia na etapa 5.

1. Reunir o briefing

Você precisa: nome do negócio, o que está sendo vendido, a oferta/preço, para quem é, como comprar (número do WhatsApp, perfil do IG, site, localização). É bom ter: cores da marca, logotipo, fotos de produtos, depoimentos reais de clientes, números reais (clientes atendidos, anos no mercado).

Pergunte pelos itens essenciais que faltam em uma mensagem curta (máximo 3 perguntas). Não pergunte sobre coisas que você pode escolher bem sozinho (cores, ordem das cenas, redação). Se o usuário não estiver disponível, faça escolhas sensatas e diga quais foram suas suposições.

2. Escrever o roteiro

Leia references/ad-scriptwriting.md e escolha uma estrutura. Escreva o roteiro como uma lista curta de cenas e mostre-o ao usuário em algumas linhas antes de renderizar, a menos que ele peça para você seguir em frente. Regras mais importantes:

• Gancho nos primeiros 2 segundos, máximo 7 palavras. Quebra de rolagem, sobre o espectador, não sobre a marca.
• Total de 15 a 30 segundos, 5 a 8 cenas.
• Nunca invente depoimentos, contagens de clientes, avaliações ou preços. Use cenas testimonial e stat apenas com fatos fornecidos pelo usuário. Caso contrário, deixe-as de fora.
• Copie preços, números de telefone e identificadores exatamente como foram fornecidos.

3. Configurar o espaço de trabalho (uma vez por projeto)

cp -r <skill-dir>/template ./promo-ads   # pule se ./promo-ads já existir
cd promo-ads && npm install

<skill-dir> é a pasta onde este SKILL.md está localizado (o diretório base da skill, mostrado quando a skill é carregada). Pode estar dentro de um cache de plugins ou em ~/.claude/skills/; nunca edite arquivos lá, sempre copie o template primeiro.

Coloque o logotipo, fotos de produtos e áudio fornecidos pelo usuário em promo-ads/public/assets/. Fotos de produtos em formato quadrado ou 4:5 com fundo limpo ficam melhores.

4. Escrever o JSON do briefing

Crie promo-ads/briefs/<slug-do-negocio>.json. Referência completa dos campos: references/brief-schema.md. Comece a partir de template/briefs/example.json.

Pontos-chave:

• As cores devem ser hexadecimais de 6 dígitos. Escolha um background, um primary forte (botões, marcador de destaque), um accent (rótulos, burst de preço, badges) e text com forte contraste contra o fundo.
• Coloque 1-2 palavras-chave por linha entre *asteriscos* para destacá-las, por exemplo, "Muito cansado para *cozinhar* hoje?".
• Tipos de cena: hook, problem, product, benefits, stat, price, testimonial, cta. Cada um aceita seconds opcional.
• Ícones disponíveis: check, star, truck, clock, shield, phone, chat, globe, tag, spark, heart, location, cash, bolt, gift, x.

5. Prévia das imagens e, em seguida, examine-as

scripts/render.sh briefs/<slug>.json stills

Isso valida o briefing e depois escreve um PNG por cena em out/<slug>-frames/. Abra cada imagem e verifique:

• Nenhum texto cortado ou quebrando de forma estranha (uma palavra órfã sozinha em uma linha → encurte o texto)
• Texto claramente legível contra o fundo
• Nada importante próximo aos 15% superiores ou 22% inferiores (os botões da plataforma cobrem essas áreas; o template já mantém o conteúdo na zona segura, então isso importa mais para textos longos)
• Ortografia, preços e contatos exatamente corretos

Corrija o briefing e execute novamente as imagens até que estejam limpas. Isso é barato (≈1 min); uma renderização completa não.

6. Renderizar o vídeo

scripts/render.sh briefs/<slug>.json

Escreve out/<slug>.mp4 (≈2–4 min para 30 s). Confirme que a duração é de 15 a 30 s.

7. Entregar

Entregue o MP4 ao usuário e uma linha sobre o que contém. Ofereça um próximo passo útil, como:

• 2-3 ganchos alternativos como variantes A/B (copie o briefing, altere apenas a cena de gancho)
• Outro formato: "format": "1:1" ou "4:5" para posts no feed, "16:9" para YouTube/site
• Uma versão com narração (veja references/voiceover.md)

Áudio

• Efeitos sonoros (whoosh, pop, ding, impact) tocam automaticamente nas mudanças de cena e itens de lista. Desligue com "audio": {"sfx": false}.
• Uma batida inicial isenta de royalties toca por padrão. Use a própria faixa do usuário com "audio": {"music": "assets/song.mp3"}, ou false para nenhuma. Nunca baixe ou use músicas protegidas por direitos autorais; o usuário deve possuir ou ter licença para qualquer faixa que fornecer.
• Narração: veja references/voiceover.md.

Personalizando a aparência

Para alterações além do briefing (novo tipo de cena, animação diferente), edite arquivos em promo-ads/src/:

• scenes/Scenes.tsx: um componente por tipo de cena
• components/Words.tsx: texto cinético e o marcador de destaque
• components/Frame.tsx: fundo, chip da marca, zonas seguras, transição de saída da cena
• Ad.tsx: padrões de tempo de cena e áudio

Mantenha as regras do Remotion: toda animação deve ser orientada por useCurrentFrame() (sem transições CSS, sem setTimeout), e os assets devem ser carregados com staticFile().

Se algo falhar, veja references/troubleshooting.md.