code-video

Code Video

<skill> é a pasta que contém este SKILL.md. O motor fica em <skill>/template/:

• kit.js: linhas desenhadas à mão, texto e tipo cinético, câmera, transições, sprites pixel, minis, pixelização de imagens, clipes de vídeo, props de telefone e cursor, desfoque de movimento, useFonts
• módulos de estilo para os visuais creditados e formatos: handdrawn.js, motion.js, sand.js, lyric.js, beat.js (cada um desenha as peças características do original)
• módulos de visual arcade.js, terminal.js, thermal.js, transit.js, blueprint.js: uma API de cena compartilhada mais a cena de formato característica de cada visual (references/looks.md)
• minis-ai.js: minis prontas para tópicos relacionados a IA (Claude, Codex, Gemini, DeepSeek, Grok, Qwen)
• render.mjs: renderização paralela com headless Chrome; multiplexa audio.wav quando presente
• main.js: esqueleto da cena

<skill>/scripts/audio.py sintetiza música e efeitos sonoros, <skill>/scripts/beats.py encontra a grade de batidas de uma música, e <skill>/scripts/reference_sheet.py coloca quadros de um original creditado acima dos seus.

Ferramentas necessárias: node/npm, ffmpeg compilado com libx264, Google Chrome e uv. Se alguma estiver faltando, pare e diga qual.

for c in node npm ffmpeg uv; do command -v $c >/dev/null || echo "missing: $c"; done; ffmpeg -hide_banner -encoders | grep -q libx264 || echo "missing: libx264"

0. Pergunte pelo visual e formato, depois as configurações

O visual é apenas o estilo de desenho; o formato é a estrutura da história. Qualquer visual funciona com qualquer formato, exceto que os formatos lírico e de batida trazem seu próprio visual a menos que o usuário peça outro. Primeiro pergunte por ambos em uma mensagem curta com duas listas numeradas (mais opções do que uma pergunta pode conter). Pule o que o usuário já nomeou e sugira um formato baseado no tópico (uma comparação sugere versus, uma escalação sugere mapa de rota, e assim por diante).

Visuais:

Visual	Sensação	Som padrão	Guia	Crédito
1. Desenho à mão + minis 8-bit (padrão)	lúdico, caderno de esboços	nenhum	styles/handdrawn.md	@nahiddotai
2. Gráficos de movimento de marca	limpo, oficial	nenhum	styles/motion.md	@digitalstrategyai
3. Arte em areia	caloroso, como história	música e efeitos	styles/sand.md	@Michaelzsguo
4. Arcade 16-bit	jogo, energético	música estilo chiptune e acertos	looks.md	original
5. Terminal CRT	desenvolvedor, retrô	cliques de tecla, pad suave	looks.md	original
6. Recibo térmico	impresso, tátil	ticks de impressora, carimbo	looks.md	original
7. Mapa de trânsito	diagrama, organizado	sinos, trens	looks.md	original
8. Blueprint	técnico, preciso	sons de desenho técnico	looks.md	original

Formatos (detalhes em references/formats.md):

Formato	Estrutura	Crédito
1. Promo padrão (padrão)	gancho → título → passos → número grande → final	original
2. Versus	rodadas entre duas opções, depois uma contagem	original
3. Sessão	comandos e saídas que mostram como é usado	original
4. Recibo	lista itemizada, total, carimbo	original
5. Mapa de rota	linhas, estações, baldeações	original
6. Ficha técnica	partes, cada uma com uma especificação	original
7. Videoclipe lírico (visual próprio)	uma música original, um fato e um diagrama por linha	@goodside
8. Filmagem sincronizada com batida (visual próprio)	clipes reais cortados nas batidas de uma música: parede, carrossel, telefone	@twoclipping

Ao listar visuais e formatos, nomeie a fonte original de cada um creditado com seu link.

Depois pergunte as configurações em uma chamada AskUserQuestion. Pule qualquer coisa que o usuário já disse e coloque a opção recomendada primeiro.

• Duração: 30 s / 15 s / 45 s / 60 s
• Quadro: 16:9 1920×1080 / 9:16 1080×1920 / 1:1 1080×1080 / 16:9 2560×1440
• Personagens: mascote do logotipo + minis do tópico / minis especificadas pelo usuário / apenas mascote do logotipo / nenhum
• Idioma na tela: o idioma desta conversa / Inglês / ambos

Os personagens assumem a forma do visual: sprites 8-bit, silhuetas de areia, heróis pixel ou ícones planos. Minis são um elenco de apoio que se encaixa no tópico. Use o elenco do usuário se eles nomearem um. Caso contrário, escolha um elenco da pesquisa e proponha no plano (veja "Minis" em references/storyboard.md).

Use estes padrões para qualquer coisa que você não perguntou e declare-os no plano:

• 30 fps (60 fps com desfoque de movimento para o formato de batida), H.264 MP4, no máximo 10 MB por 30 s (um pouco mais quando há som)
• Som conforme listado para o visual; os formatos lírico e de batida sempre têm música. Não há vocais cantados.

Regras para cada visual e formato

• Visuais creditados reproduzem o original. Antes de planejar, abra o guia e olhe seus quadros de referência <skill>/docs/styles/<key>.jpg com a ferramenta Read. Cada item na tabela Signature do guia deve aparecer na tela; a tabela é um requisito, não um menu. Extras vêm depois da assinatura, nunca no lugar dela.
• Idioma: cada pedaço de texto na tela segue a configuração de idioma na tela, incluindo rótulos, HUD, letras, recibos, saída de terminal e cartão final.
• Tema da pesquisa: a paleta vem das cores reais da marca (página CI, CSS do site ou pixels do logotipo) e as fontes da marca quando possível. Mostre a paleta como valores hex com sua fonte no plano. Visuais com um material ou campo fixo (areia, campo de movimento escuro, verde terminal, papel térmico, azul blueprint) mantêm isso e carregam a marca no logotipo, um acento e cartão final.
• Números: cada número tem uma fonte. Calcule idades e "N anos" a partir da data de fundação em vez de copiar uma linha antiga de "N anos" do site. Não invente leituras de UI ou estatísticas de exemplo; use valores reais ou deixe-os de fora.
• Crédito: visuais e formatos creditados nomeiam o criador cuja ideia eles adaptam. Mantenha esses créditos quando você alterar um guia.
• Aguarde seu próprio trabalho. Execute renderizações em primeiro plano com um longo timeout Bash (até 600000 ms). Quando você iniciar agentes ou comandos em segundo plano, aguarde seus resultados antes de terminar sua vez: em uma execução não interativa, nada o acorda novamente.

1. Pesquisa

Siga references/research.md.

• Mantenha proporcional: para um vídeo de menos de um minuto, cerca de 10 fatos com fontes e os ativos da marca são suficientes. Dê a um agente somente leitura uma breve diretiva (as perguntas, os sites, um limite de cerca de 15 buscas) e execute pesquisas independentes em paralelo.
• Verifique você mesmo os números principais contra a frase original.
• Se as fontes discordarem em um número, pergunte ao usuário qual usar.

2. Aprovação do plano

Mostre o seguinte e obtenha aprovação antes de criar a pasta de trabalho:

• resumo da pesquisa com links das fontes
• visual e formato, e a linha do tempo das cenas usando os padrões e tempos em seus guias
• para um visual ou formato creditado: sua tabela de assinatura com a cena que mostra cada item
• paleta (valores hex e de onde cada um veio) e fontes
• plano de som quando o visual ou formato tem som: andamento, seções e dicas
• números usados e números descartados, lista de ativos (URL do logotipo, fontes, personagens, clipes, licença da música), localização da pasta de trabalho

Se o usuário alterar cenas ou ênfase, reafirme o fluxo revisado uma vez, depois prossiga.

3. Construção

cp -R <skill>/template <work-folder>/<name>-video && cd <work-folder>/<name>-video
chmod -R u+w .   # a habilidade instalada pode ser somente leitura, e cp mantém seus modos
npm i
bash <skill>/scripts/fetch_fonts.sh assets/fonts
curl -fsSL -o assets/logo_src.png '<URL oficial do logotipo>'
uv run --with pillow python <skill>/scripts/clean_logo.py assets/logo_src.png assets/logo.png

• index.html: defina tamanho, fps e duração em window.VIDEO; declare as fontes que o guia nomeia com @font-face (e apenas essas); carregue o módulo de estilo para um visual ou formato creditado (handdrawn.js, motion.js, sand.js, lyric.js, beat.js) ou um módulo de visual para visuais 4–8 (suas fontes carregam através de useFonts(LOOK.fonts)).
• Com um módulo de visual, construa cenas a partir da API de cena e da cena de formato característica (references/looks.md); defina cores da marca em LOOK.colors.
• main.js: THEME, funções de cena e boot(). A API está em references/kit-api.md.
• Use o logotipo real e os arquivos de marca nominativa.
• Desenhe o mascote do logotipo como um sprite drawPixels (ou como uma silhueta no visual de areia).
• Registre minis em MINIS e desenhe-as com drawMini. Para tópicos relacionados a IA, carregue minis-ai.js e desenhe apenas os personagens faltantes.
• Mostre ao usuário um still da escalação de personagens no início e obtenha confirmação.
• Mantenha cópia e números como constantes no topo de main.js. Para duas versões (um número pendente, dois idiomas), ramifique em um parâmetro de URL e renderize cada uma com QUERY=lang=ko node render.mjs video ….
• Som: escreva audio.json com os mesmos tempos de cena que main.js, depois uv run --with numpy --with scipy python <skill>/scripts/audio.py audio.json audio.wav. Para o formato de batida, execute beats.py na música primeiro e corte em sua grade.

4. Controle de qualidade

Siga references/qa-checklist.md.

1. Renderize stills com node render.mjs stills <tempos no meio da cena e tempos logo antes e depois de cada transição>.
2. Construa folhas de revisão com uv run --with pillow python <skill>/scripts/contact_sheet.py stills <temp-folder> e olhe para elas.
3. Corrija o que encontrar.
4. Renderize o vídeo uma vez com CRF=25 node render.mjs video <Nome>.mp4, extraia os quadros de transição e um quadro a cada 2 s, e verifique o tamanho do arquivo. Com som, verifique o fluxo de áudio, volume e tempo das dicas.
5. Para um visual ou formato creditado, construa uv run --with pillow python <skill>/scripts/reference_sheet.py <key> <Nome>.mp4 <temp-folder>/ref.jpg, olhe para ele e marque cada item de assinatura. Corrija qualquer erro e renderize novamente.

5. Entrega

• A renderização do QA é o arquivo de entrega. Renderize novamente apenas após uma correção; se exceder o tamanho alvo, aumente CRF para 27 ou reduza boot({ noise }).
• Exclua arquivos intermediários como stills/ e logs.
• Envie o MP4 com SendUserFile (exiba render) e relate:
  • especificação: visual, formato, duração, resolução, fps, tamanho do arquivo, som
  • a fonte original de um visual ou formato creditado, com seu link, e o resultado da lista de verificação da assinatura
  • lista de cenas
  • fatos usados, com links das fontes
  • números descartados e por quê, e itens que precisam de confirmação
  • o comando de re-renderização, observando que deve ser executado dentro da pasta de trabalho