Communitygithub.com

remotion-shorts-skill

Crie vídeos verticais curtos com Remotion e publique-os no TikTok, Instagram Reels e YouTube Shorts. Transforma um tópico, artigo, URL, conjunto de dados, changelog ou lista em um curto de texto cinético 1080x1920 (palavras animadas grandes, contagens estatísticas, listas top-N, vídeos de lançamento e changelog, citações), sincronizado com a velocidade de leitura e mantido dentro da zona segura de cada aplicativo, renderizado localmente sem API paga.

O que é remotion-shorts-skill?

Este skill permite que você crie vídeos verticais curtos e dinâmicos usando Remotion, sem precisar escrever código de animação complexo. Você simplesmente define um roteiro em JSON, com cenas como gancho, estatística, lista ou final, e o skill renderiza um vídeo MP4 1080x1920 otimizado para TikTok, Instagram Reels e YouTube Shorts. Ele cuida do layout, animação, sincronização com a velocidade de leitura e mantém o texto dentro da área segura de cada aplicativo. O skill suporta múltiplos temas visuais (ink, paper, volt, ocean, clean) e permite publicar diretamente via WoopSocial, com confirmação do usuário antes de postar. É útil para criadores de conteúdo, profissionais de marketing e desenvolvedores que desejam produzir vídeos de forma escalável, baseados em dados reais, changelogs ou listas, sem depender de APIs pagas de renderização.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/social-media-skills/remotion-shorts-skill/tree/HEAD/skills/remotion-shorts-skill

Perguntar na sua IA favorita

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

Documentação

Skill Remotion Shorts

Você escreve um curto como um arquivo JSON de cenas. O projeto Remotion empacotado organiza as palavras, cronometra cada cena de acordo com a velocidade de leitura, mantém o texto dentro da área que nenhum botão do aplicativo cobre, renderiza uma folha de revisão, uma capa e o MP4, e o usuário pode publicá-lo com o WoopSocial.

Você não escreve código Remotion para cada vídeo. Os modelos são fixos e testados; seu trabalho é o roteiro: o que cada tela diz, em que ordem e com que velocidade.

0. Configuração (uma vez por máquina)

Requer Node 20 ou superior. Verifique com node -v; se estiver faltando, direcione o usuário para https://nodejs.org. O Remotion suporta macOS 15 ou superior, Windows x64 e Linux com glibc 2.35+ (Ubuntu 22.04, Debian 12 ou superior).

node <skill-dir>/scripts/setup.mjs remotion-shorts

Isso copia o projeto para ./remotion-shorts, instala pacotes fixados (cerca de 260 MB) e baixa o navegador headless com o qual o Remotion renderiza (100 a 150 MB). Leva de 1 a 3 minutos na primeira vez. Execute novamente após a atualização do skill: ele atualiza os arquivos de modelo (quaisquer arquivos que o usuário alterou são mantidos como .bak) e nunca toca em seus scripts, assets ou saída.

Licença. O Remotion é gratuito para indivíduos e empresas de até 3 pessoas. Empresas com 4 ou mais pessoas precisam de uma licença corporativa Remotion, e renderizar a partir de scripts conta como automação (remotion.pro/license). Se o usuário estiver renderizando para uma empresa maior, avise-o uma vez, claramente, antes da primeira renderização.

1. Pergunte o que você precisa (uma mensagem, pule o que já é conhecido)

  • O material. Um tópico, artigo, URL, anotações, dados, changelog ou lista. Você escreve apenas fatos que pode referenciar. Se o usuário fornecer um tópico sem fonte, encontre uma fonte primária (estatísticas oficiais, documentos, o changelog do próprio produto) e nomeie-a.
  • Para quem é e o único takeaway. Um curto diz uma coisa.
  • Aparência. Um tema (ink, paper, volt, ocean, clean) ou suas cores de marca, e um handle para a tela final.
  • Áudio. Os efeitos sonoros integrados estão ativados por padrão (um hit no gancho, um whoosh em cada corte, um pop nos destaques, ticks nas contagens); eles são feitos para este modelo e são seguros em todos os aplicativos. Música apenas de um arquivo para o qual eles tenham os direitos de uso (veja references/writing-shorts.md para saber por que nenhuma biblioteca gratuita é segura em todos os três aplicativos).
  • Onde será publicado. TikTok, Reels, Shorts ou todos os três.

2. Escreva o roteiro

Leia references/writing-shorts.md antes do primeiro roteiro de uma sessão. A versão resumida:

  • A cena 1 é um gancho que declara o benefício em cerca de 10 palavras ou menos: um número, uma afirmação ou a promessa da lista ("5 ferramentas gratuitas que substituem..."). Ela aparece completamente na tela a partir do quadro 0. Se o gancho tiver um número, coloque-o em big para que seja a primeira coisa que o olho vê.
  • Uma ideia por cena. Uma cena é uma batida, não um parágrafo. Cenas de estatística carregam um número e o que ele significa. Os itens da lista contam para baixo ou para cima; diga qual no gancho.
  • Informação real em cada cena. Um vídeo de texto modelado sem nada de novo é o que o YouTube chama de conteúdo inautêntico e o Instagram chama de não original. Nunca encha.
  • Os números são exatos e têm fonte. Coloque a fonte no footer ("Dados: USGS"). Nunca arredonde um número para uma afirmação diferente.
  • Termine com uma ação ou uma linha que volte ao gancho para que o loop pareça contínuo. Sem "obrigado por assistir".
  • Duração: 15 a 45 segundos é o alvo; o renderizador avisa após 59.

Escreva short.json na pasta do projeto. O formato completo, cada tipo de cena e cada opção estão em references/short-json.md. Um roteiro mínimo:

{
  "theme": "ink",
  "footer": "Dados: USGS",
  "handle": "@seuhandle",
  "scenes": [
    { "type": "hook", "big": "2,5%", "text": "da água da Terra é doce" },
    { "type": "stat", "value": "96,5", "suffix": "%", "label": "é água salgada nos oceanos" },
    { "type": "stat", "value": "68,7", "suffix": "%", "label": "da água doce é gelo e geleiras", "highlight": "gelo e geleiras" },
    { "type": "end", "text": "Salve isso para o trivia noturno", "highlight": "Salve isso" }
  ]
}

3. Verifique antes de renderizar o vídeo

cd remotion-shorts
node render.mjs short.json --stills

Em alguns segundos, isso imprime o plano (segundos e tamanho da fonte por cena) e escreve:

  • out/short/sheet.jpg: o último quadro de cada cena (tudo na tela), com as áreas da zona segura marcadas com uma linha tracejada fina (o texto deve permanecer dentro dela).
  • out/short/cuts.jpg: quadro 0 e os quadros ao redor de cada corte, para verificar o movimento.
  • out/short/cover.jpg: o gancho depois de pousar (faça o upload como capa do Reels).
  • out/short/report.json: tempos, quebras de linha e avisos.

Abra ambas as folhas e olhe para elas. Verifique: cada cena é legível no tamanho de um telefone, cada uma diz uma coisa, os destaques estão nas palavras que importam, algo parece apertado, a ordem está correta e o quadro 0 mostra o gancho inteiro. Corrija o JSON e execute --stills novamente até que você o publicaria.

Os avisos interrompem a renderização do vídeo (código de saída 2): texto muito longo para uma tela, um gancho muito longo, um destaque que não está no texto, uma cena muito rápida para ler, um ritmo fora de 0,85 a 1,25 ou um curto com mais de 59 segundos. Corrija o roteiro; use --force somente quando o usuário viu o aviso e o quer mesmo assim. Alguns problemas são erros que --force não pode substituir, como uma palavra muito larga para a tela em qualquer tamanho: isso colocaria o texto fora da tela.

4. Renderize

node render.mjs short.json

Escreve out/short/short.mp4: 1080x1920, 30 fps, H.264, yuv420p, AAC (uma faixa silenciosa quando não há música), que TikTok, Reels e Shorts aceitam. Um curto de 30 segundos renderiza em cerca de um minuto em um laptop recente. Máquinas com 8 GB de memória renderizam 2 quadros por vez; se uma renderização ainda for morta por falta de memória, execute-a novamente com --concurrency 1.

Antes de mostrá-lo, pegue três quadros e olhe para eles (início, meio, fim), ou reproduza-o se seu cliente permitir. Em seguida, mostre ao usuário a capa, a folha e o caminho do MP4.

Várias contas: nunca publique o mesmo arquivo em várias contas. Faça uma variante por conta (um gancho, tema ou ordem de cena diferente, salvo como seu próprio JSON) para que duas contas não publiquem um conteúdo quase duplicado.

5. Publique (WoopSocial, com confirmação)

Leia references/woopsocial.md. Resumidamente:

  1. social_accounts_list para encontrar as contas (conecte-as primeiro, se necessário).
  2. Para o TikTok, social_accounts_get_platform_inputs para a conta: as opções de privacidade e o vídeo mais longo permitido. O usuário escolhe a privacidade; não há padrão.
  3. Upload: media_uploads_create_session com o tamanho exato em bytes de report.json, salve a resposta como session.json, execute node upload.mjs session.json out/short/short.mp4, depois media_uploads_complete_session até que fique READY.
  4. Escreva a legenda por plataforma (TikTok e Reels: uma linha que adiciona ao vídeo mais 3 a 5 hashtags específicas; YouTube: um título com menos de 100 caracteres mais uma descrição). Use contentOverride para texto por plataforma.
  5. posts_validate, depois mostre ao usuário: contas, legenda por plataforma, privacidade, horário agendado com fuso horário, a capa. Aguarde um sim claro. Em seguida, posts_create e posts_get.

Campos de divulgação: isYourBrand: true no TikTok quando o curto promove o produto do próprio usuário; isAiGeneratedContent apenas para imagens, vídeo ou voz de IA realistas (texto cinético não precisa). YouTube madeForKids é uma declaração legal: pergunte, nunca adivinhe.

6. Relate

Mostre: o caminho do MP4, duração, a folha, onde foi publicado (links de posts_get) ou o agendamento, e qualquer coisa que você não pôde fazer. Nunca invente visualizações ou resultados; leia-os mais tarde com social_account_posts_list e relate a data em que foram coletados.

Editando a aparência

  • Cores da marca: passe theme como um objeto (bg, fg, accent, accentText, font, uppercase). Mantenha o contraste do texto em 7:1 ou melhor; verifique o acento também no fundo.
  • Fotos ou vídeo atrás das cenas: image por cena ou background para todo o curto. Eles são escurecidos sob a cor do tema para que o texto permaneça legível. Use arquivos que o usuário possui ou tem licença e credite-os na legenda quando a licença solicitar.
  • Fontes incluídas: Anton (condensada, maiúscula, alta), Poppins, Inter. Todas OFL.
  • Para alterar os próprios modelos, edite src/Short.tsx e visualize com npm run studio.

Casos extremos

  • Sem fonte para um número: não o use. Diga o que está faltando.
  • Texto que não cabe: divida a cena; não reduza a fonte abaixo do mínimo (o renderizador não permitirá).
  • Texto RTL ou CJK, ou emoji: as fontes incluídas não os cobrem e podem aparecer como caixas vazias. Diga isso e deixe-os de fora (os emojis podem ir na legenda).
  • Usuário quer um som trending: as postagens da API não podem adicionar um. Publique no TikTok com postMode: MEDIA_UPLOAD para que ele caia na caixa de entrada do TikTok do usuário para finalização no aplicativo.
  • A renderização falha no Linux com bibliotecas ausentes: instale os pacotes listados em references/platform-specs.md.
  • Windows: sempre passe as propriedades no arquivo JSON, nunca inline na linha de comando.

Barra de qualidade

Antes de considerar concluído, deve passar por todos os seguintes:

  • O quadro 0 mostra o gancho inteiro (verifique cuts.jpg); cerca de 10 palavras ou menos, declarando o benefício.
  • Cada cena diz uma coisa; nenhuma cena com mais de cerca de 14 palavras.
  • Cada número corresponde à sua fonte; a fonte está na tela ou na legenda.
  • Sem avisos, ou o usuário os viu e escolheu --force.
  • Ambas as folhas verificadas: nenhum texto fora da linha tracejada de segurança, destaques nas palavras certas.
  • 15 a 59 segundos.
  • Uma versão distinta para cada conta.
  • O usuário confirmou antes de qualquer coisa ser publicada.

Habilidades Relacionadas