Communitygithub.com

atlantis-mk/remotion-video-template

Cria automaticamente vídeos de narração (voz sobreposta) no estilo infográfico escuro a partir de um tópico: escreve o roteiro, gera voz com Doubao TTS, cria storyboard e assets, anima com Remotion, renderiza o vídeo final, gera capa e textos de publicação. Suporta formato paisagem e retrato.

O que é remotion-video-template?

Este skill permite que um agente AI (como Claude Code, Cursor ou Codex) produza vídeos completos de narração com infográficos animados a partir de um único tópico fornecido pelo usuário. O fluxo é totalmente automatizado e dividido em 9 etapas: verificação de ambiente, determinação do tópico, escrita do roteiro, geração de voz com a API Doubao TTS (chinesa), criação do storyboard, busca de assets visuais (imagens, vídeos, ícones), scaffolding do projeto Remotion, renderização do vídeo e capa, e produção dos textos de publicação (título, descrição, tags) para cada plataforma alvo. O skill é independente de plataforma de agente (funciona em qualquer ambiente que suporte scripts Python e Node.js) e reside em `.agents/skills/remotion-infographic-video/`. Ele impõe regras rigorosas de estilo (paleta de cores escura com fundo #070A0F, animações spring, 15 componentes registrados, tokens de design), fontes de dados (números devem ter origem, assets devem ter licença clara), e segurança (chave da API lida apenas do arquivo `.env` local, não exposta em chat, não troca de motor TTS). O resultado final é um vídeo MP4, uma capa PNG e conjuntos de arquivos de publicação (título, descrição, tags) para cada plataforma, tudo entregue via `deliverable.json`.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/atlantis-mk/remotion-video-template/tree/HEAD/.agents/skills/remotion-infographic-video

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Vídeo de Narração com Infográficos

Localização e Estrutura (Arquitetura v1.11)

  • O diretório raiz de entrega sempre contém AGENTS.md (como usar este template); este skill fica fixo em .agents/skills/remotion-infographic-video/.
  • tests/ está na raiz do repositório (ao lado de .agents/), pertence ao CI/gate de desenvolvimento e não faz parte da execução do skill, não é copiado quando se instala apenas o skill.
  • O arquivo .env fica apenas neste diretório do skill, não na raiz do repositório.

Preparação Antes de Usar (Copiar e Usar)

  1. Copiar:
    • Uso do repositório completo: Clone/copie a raiz do repositório de entrega e abra (contém AGENTS.md e tests/).
    • Apenas o skill: Copie .agents/skills/remotion-infographic-video/ para o mesmo caminho relativo no projeto de destino (incluindo scripts/ e seus lib/).
    • O pacote do skill não precisa de instalação pip / npm; scripts/ usa apenas a biblioteca padrão do Python. Após configurar .env, os passos 0–5 podem ser executados.
  2. Configurar .env: Execute cp .env.example .env neste diretório do skill, edite .env preenchendo:
    • Obrigatório: DOUBAO_TTS_API_KEY= (escreva a chave após o sinal de igual, sem aspas)
    • Opcional: DOUBAO_SPEAKER= (timbre padrão, veja VOICE)
    • .env já está em .gitignore, não cole a chave no chat e não troque o motor de TTS.
  3. Pré-requisitos de ambiente (instale por conta própria, o script não instala): Node 18+, Python 3, ffmpeg, ffprobe, conexão de rede.
  4. Iniciar produção: Quando o usuário disser "Iniciar produção" ou intenção equivalente:
    • Primeiro execute python3 scripts/check_env.py (pode usar --skill-dir <caminho absoluto do skill>; o padrão é este diretório).
    • Código de saída 3: Indique para preencher DOUBAO_TTS_API_KEY em .agents/skills/remotion-infographic-video/.env (ou no caminho absoluto do skill). Aguarde o usuário responder "preenchido" e execute novamente; antes disso, não sintetize voz nem crie o projeto.
    • Se passar: Se a mensagem já contiver um tópico, vá direto para as etapas fixas; caso contrário, pergunte apenas uma vez pelo tópico (pode especificar "retrato"; o padrão é paisagem 1920×1080, retrato 1080×1440, regras em LAYOUT). O nome da plataforma não afeta as dimensões.

Regras Rígidas

  • A chave é lida apenas do arquivo .env neste diretório do skill (no repositório de entrega: .agents/skills/remotion-infographic-video/.env) na variável DOUBAO_TTS_API_KEY; não permita que o usuário cole a chave no chat, não troque o motor de TTS, não exiba a chave em nenhuma saída.
  • Não publicar, não fazer upload: produza apenas o vídeo final, a capa e os arquivos de texto.
  • Números devem ter origem; números exibidos na tela devem ter um selo de fonte; ícones esquemáticos devem ser marcados como "esquemático".
  • A última linha de stdout de cada script é um resumo JSON; trate conforme o código de saída: 3 = chave ausente (indique preencher .env, pare), 4 = falha de autenticação (pare), 5 = corrija artefatos upstream, 6 = execute novamente apenas itens com falha, 7 = entre em modo de reparo.

Etapas Fixas

  1. Verificação prévia: python3 scripts/check_env.py. Código de saída 3: siga as instruções acima para preencher .env e execute novamente.
  2. Definir tópico: Determine topic, slug e orientação; escreva <slug>/job.json (se a orientação não for mencionada, padrão paisagem); quando o usuário mencionar uma plataforma, escreva platforms, caso contrário use as plataformas padrão conforme PUBLISH.
  3. Escrever roteiro: Escreva script.md (## Sxx Nome da seção + - [01] Texto {context: … | rate: 0 | pause: 300}) e sources.md (bloco json no final); execute python3 scripts/validate.py sources <slug>/script.md <slug>/sources.md; números sem origem devem ser removidos ou ter fonte adicionada.
  4. Sintetizar voz: Se houver uma ferramenta MCP de TTS (tts_synthesize) com entrada e saída equivalentes disponível no ambiente, use-a; caso contrário, execute python3 scripts/tts_doubao.py <slug>/script.md --out-dir <slug>/voice; ambos produzem um timeline.json validado pelo mesmo Schema (em assets/schemas/): python3 scripts/validate.py timeline <slug>/voice/timeline.json. Frases com falha podem ser reexecutadas com --only.
  5. Storyboard: Escreva storyboard.json (cada frase deve ser coberta por pelo menos um plano; transições de seção e entradas de plano usam valores enum); execute python3 scripts/validate.py storyboard <slug>/storyboard.json --timeline <slug>/voice/timeline.json.
  6. Assets: Use python3 scripts/fetch_asset.py com o subcomando add para registrar cada asset; prune para remover assets não utilizados; assets sem licença clara não podem ser usados.
  7. Criar projeto: python3 scripts/scaffold_project.py --job <slug>/job.json --out <slug>/project gera o projeto, escreva cada cena de seção conforme o exemplo (em assets/example/), depois execute python3 scripts/build_timeline.py --timeline <slug>/voice/timeline.json --storyboard <slug>/storyboard.json --subtitles <slug>/voice/subtitles.json --manifest <slug>/assets-manifest.json --project <slug>/project e, dentro do projeto, npm ci.
  8. Autoverificação: bash scripts/check_project.sh <slug>; em caso de falha, leia check/report.json, corrija e execute novamente, no máximo 3 vezes; se ainda falhar, pare e reporte.
  9. Renderizar: bash scripts/render.sh <slug> produz o vídeo final (<slug>/out/video.mp4) e a capa (<slug>/publish/cover_<W>x<H>.png), com verificação automática.
  10. Textos de publicação e entrega: Conforme PUBLISH, para cada plataforma alvo, crie um conjunto de publish/<plataforma>/title.txt, description.txt; tags por plataforma em publish/<plataforma>/tags.txt (uma por linha); execute python3 scripts/validate.py publish <slug>, python3 scripts/validate.py deliverable <slug>, python3 scripts/validate.py leak <slug> e, por fim, python3 scripts/fetch_asset.py credits-diff --manifest <slug>/assets-manifest.json --slug-dir <slug> para revisar os créditos.

Resumo das Regras de Estilo

  • Cores, tamanhos de fonte e valores de animação vêm apenas de assets/tokens.json; cor de fundo base #070A0F; código de cena não escreve valores de cor (veja STYLE).
  • Entrada unificada com spring; 5 tipos de transição de seção, 3 tipos de entrada de plano, use os valores enum do storyboard (veja MOTION).
  • Use apenas os 15 componentes registrados; para componentes fora da lista, escreva novos dentro do projeto usando tokens + useLayout() (veja COMPONENTS).
  • Apenas quatro camadas: background / scene / hud / subtitle; sem tela de créditos final; duração do vídeo = duração da narração.
  • Aleatoriedade apenas com random(seed), proibido Math.random.
  • Layout derivado da largura e altura do canvas; apenas src/layout/presets.ts em src/ pode conter dimensões de canvas (veja LAYOUT).
  • Formato do roteiro em SCRIPT, parâmetros de TTS em VOICE, licenciamento e créditos de assets em ASSETS.

Proibições

  • Não publicar, não fazer upload para nenhuma plataforma.
  • Não vazar a chave: não exibir, não escrever em artefatos, não permitir que o usuário cole a chave no chat, não trocar o motor de TTS.
  • Não usar assets sem licença clara; créditos, descrições e títulos não devem conter links.
  • Não inventar dados: números sem origem não entram no roteiro nem na tela.
  • Após a definição do tópico até a entrega, não fazer perguntas ao usuário nem solicitar assets.

Entrega

Retorne o conteúdo de deliverable.json de uma só vez: caminho e duração do vídeo, orientação, capa, títulos e descrições por plataforma, tags, créditos de assets, diretório de saída e observações.

Habilidades Relacionadas