sanky369/vibe-building-skills

Remotion Script Writer

Transforme um objetivo de vídeo mais (opcionalmente) um código-fonte em um Remotion Script JSON — uma especificação cena por cena precisa o suficiente para que um agente Remotion possa implementá-la sem fazer perguntas de acompanhamento. O princípio norteador: o script é a única fonte de verdade para a renderização — toda duração, elemento, animação e fala de narração são declarados em números e strings exatas, nunca "cerca de 5 segundos" ou "algum texto de introdução". Dois agentes que recebem a mesma entrada devem emitir scripts estruturalmente idênticos.

Quando usar / quando não usar

• Use quando a saída for renderizada programaticamente com Remotion: demos de produtos de aplicativos web, tutoriais de codificação com código animado, peças de motion graphics, vídeos de visualização de dados, animações curtas para redes sociais.
• Conceito e batidas ainda não decididos para um vídeo de produto → execute skills/creative/product-video primeiro; sua folha de batidas se torna a lista de cenas desta skill.
• Vídeo com pessoa na câmera → skills/creative/talking-head (Remotion não é a ferramenta).
• Gráficos estáticos → skills/creative/social-graphics.
• Esta skill escreve apenas o script — implementar os componentes React, visualizar no Remotion Studio e renderizar são feitos pelas próprias skills de agente do Remotion downstream.

Arquivos de regras — leia antes de escrever o script

• rules/prompt-structure.md — os campos de entrada a partir dos quais o script é construído (goal, targetAudience, code, videoType, duration, style, animations, transitions). Leia ao normalizar a captação para o objeto de entrada.
• rules/script-generation.md — a estrutura JSON de saída autoritativa e instruções de geração. Leia antes de emitir o script; o esqueleto abaixo é um resumo, aquele arquivo é o contrato.
• rules/animation-patterns.md — o vocabulário aprovado de animação/transição com formas JSON exatas e diretrizes de temporização. Leia ao especificar qualquer valor de animation ou transitionToNextScene; não invente tipos de animação fora dele.
• rules/scene-templates.md — JSON de cena pronto para casos comuns (cartão de título, demonstração de recurso, passo a passo de código, visualização de dados, encerramento/CTA). Leia quando uma cena corresponder a um padrão conhecido; comece do modelo e edite.
• examples/product-demo-example.json — um script completo trabalhado. Leia para calibração da granularidade.

Captação

Pergunte em um único lote conciso, apenas o que estiver faltando (nomes dos campos conforme rules/prompt-structure.md):

1. goal e targetAudience — o que o vídeo deve alcançar, para quem?
2. videoType — product-demo | coding-tutorial | animation | data-visualization | social-media?
3. duration (segundos) e plataforma de destino (decide largura/altura/fps).
4. code — caminho para o código-fonte, URL do repositório ou trechos, se o vídeo apresentar um aplicativo ou código.
5. style — restrições visuais/de marca (cores, fontes, logotipo; um guia de estilo de skills/creative/creative-strategist se existir um).

Inferir em vez de perguntar: language do código-fonte; dimensões da plataforma (1920×1080 paisagem padrão, 1080×1920 para vertical social, fps 30); preferências de animação/transição de style se não for fornecido. Não pare: com goal + videoType + duração conhecidos, declare suposições e prossiga.

Fluxo de trabalho

1. Analise o material de origem

Se code for fornecido, explore-o: identifique os principais recursos, fluxos de usuário, estruturas de dados e superfícies de UI que valem a pena mostrar. Classifique os recursos por relevância para goal — o vídeo mostra os 3–5 principais, não tudo. Se não houver código, extraia a lista equivalente da descrição do usuário.

2. Estruture as cenas

Regras de decisão por videoType:

• product-demo → cartão de título → problema/contexto → uma cena por recurso (3–5 principais) → encerramento/CTA.
• coding-tutorial → título → configuração do conceito → uma cena por etapa de código (mostrar código, depois explicar) → recapitulação.
• data-visualization → título → contexto → uma cena por gráfico/insight → conclusão.
• social-media → cena de gancho (≤3s) → 1–2 cenas de recompensa → CTA; total ≤60s.
• animation → derive as batidas do conceito criativo (ou da folha de batidas de skills/creative/product-video).

O cálculo de temporização é obrigatório: as durações das cenas mais as sobreposições de transição devem somar exatamente a duration. As transições TransitionSeries se sobrepõem a cenas adjacentes — considere a sobreposição, não apenas some as durações. Mantenha o total abaixo de ~5 minutos (heurística de desempenho de renderização).

3. Especifique cada cena completamente

Para cada cena, preencha todos os campos: sceneNumber, title, durationInSeconds, visuals.background, visuals.elements[] (type, conteúdo exato em string, font, size, color, position, animation de rules/animation-patterns.md), audio.voiceover (a(s) frase(s) exata(s) falada(s) — verifique se cabem na duração da cena a ~2,5 palavras/segundo), e transitionToNextScene. Use os modelos de rules/scene-templates.md onde eles corresponderem.

4. Compile ativos e requisitos técnicos

Liste cada imagem, clipe de vídeo, faixa de áudio, fonte e logotipo referenciados por qualquer cena em requiredAssets — nada referenciado pode faltar na lista. A geração de ativos está fora do escopo: marque cada um como fornecido pelo usuário ou descreva-o precisamente; imagens estáticas podem ser produzidas via skills/creative/image-generation (pipeline do repositório: docs/creative_cli.py, modelo fal-ai/nano-banana-pro). Liste remotionPackages (por exemplo, @remotion/transitions sempre que transições forem usadas) e quaisquer bibliotecas de terceiros.

5. Valide contra o nível de qualidade, depois entregue o JSON

Entregue o script mais a nota de transferência (abaixo). O agente Remotion downstream gera componentes, configura a composição, visualiza no Studio e renderiza.

Formato de saída obrigatório

Emita um único objeto JSON correspondendo exatamente à estrutura em rules/script-generation.md:

{
  "videoMetadata": {
    "title": "...", "durationInSeconds": 60,
    "width": 1920, "height": 1080, "fps": 30,
    "videoType": "product-demo"
  },
  "scenes": [
    {
      "sceneNumber": 1, "title": "...", "durationInSeconds": 5,
      "visuals": {
        "background": "#RRGGBB or asset ref",
        "elements": [
          { "type": "text|image|code|chart", "content": "exact content",
            "animation": { "type": "<from rules/animation-patterns.md>", "durationInSeconds": 1 } }
        ]
      },
      "audio": { "voiceover": "Exact spoken sentence(s)." },
      "transitionToNextScene": { "type": "<from rules/animation-patterns.md>", "durationInSeconds": 1 }
    }
  ],
  "requiredAssets": { "images": [], "videos": [], "audio": [], "fonts": [], "logos": [] },
  "technicalRequirements": { "remotionPackages": [], "thirdPartyLibraries": [] }
}

Siga o JSON com uma curta nota de transferência em markdown: verificação da duração total (mostrar cálculo da cena), as 1–3 suposições que você fez e quais ativos o usuário deve fornecer antes de renderizar.

Nível de qualidade (verifique antes de entregar)

• Durações das cenas + sobreposições de transição somam exatamente videoMetadata.durationInSeconds; mostre a aritmética na nota de transferência.
• Cada animation e tipo de transição existe em rules/animation-patterns.md — nenhum tipo inventado.
• Toda fala de narração cabe em sua cena a ~2,5 palavras/segundo; nenhuma cena tem elementos visuais sem propósito declarado pela narração ou título.
• Todo ativo referenciado em qualquer cena aparece em requiredAssets; fontes usadas por elementos de texto são listadas.
• Correção do Remotion incorporada na especificação: temporização baseada em quadros via useCurrentFrame(), molas com damping: 200 para revelações, máquina de escrever via divisão de string (não opacidade por caractere), aleatoriedade determinística apenas (random() do remotion, nunca Math.random()), premountFor em sequências pesadas, <Sequence>/<Series>/<TransitionSeries> para ordenação.
• Os campos content são texto final, não placeholders como "descrição do recurso aqui".
• A narração é um rascunho automático — sinalize na nota de transferência que o usuário pode querer refiná-la.

Integração

• skills/creative/product-video → alimenta: conceito + folha de batidas + quadros-chave para vídeos de produto; cada batida se torna uma cena.
• skills/creative/creative-strategist → alimenta: guia de estilo (cores, fontes, clima) aplicado a visuals e style.
• skills/creative/original-design → alimenta: um briefing de linguagem de design; o vocabulário visual de cada cena deve vir daquele mundo.
• skills/creative/image-generation → produz: ativos estáticos listados em requiredAssets.images.
• skills/creative/social-graphics → consome: imagens estáticas/miniaturas renderizadas para ativos de postagem.
• Downstream: skills de agente Remotion (fora deste repositório) consomem o JSON para construir componentes, visualizar e renderizar.