Communitygithub.com

studio1111/remotion-video-production

Crie vídeos precisos por quadro e repetíveis usando React e Remotion, incluindo composições, transições, texto animado, mídia, áudio, legendas e validação de renderização.

O que é remotion-video-production?

Esta skill capacita agentes de IA (como Claude Code, Cursor ou Cody) a produzir vídeos frame-accurate e repetíveis usando o framework Remotion, que combina React com renderização programática de vídeo. Ela orienta o fluxo completo de trabalho: desde a inspeção de projetos existentes ou criação de novos, definição explícita de IDs de composição, dimensões, FPS, duração, props e localizações de assets, até a renderização e validação do arquivo final. A skill enfatiza o uso de APIs baseadas em frame/tempo (`useCurrentFrame()`, `useVideoConfig()`) em vez de animações CSS baseadas em tempo real, garantindo sincronia precisa. Inclui regras de qualidade para evitar trabalho desnecessário por frame, manter caminhos de assets reproduzíveis e verificar contagem de quadros, legendas e continuidade visual. Suporta as plataformas que implementam o protocolo de skills MCP, como Claude Code, Cursor e Codex.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/studio1111/AI-Motion-Graphics-Studio/tree/main/.agents/skills/remotion-video-production

Perguntar na sua IA favorita

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

Documentação

Produção de Vídeo com Remotion

Upstream

Skills oficiais do agente Remotion: https://github.com/remotion-dev/skills Documentação oficial: https://www.remotion.dev/docs/ai/skills

Para o conjunto completo de skills oficiais e seus arquivos de regras referenciados, instale-o no workspace consumidor usando npx skills add remotion-dev/skills. Esta skill local é um guia de fluxo de trabalho, não uma cópia byte a byte da distribuição upstream.

Fluxo de Trabalho

  1. Inspecione o projeto existente e preserve as alterações do usuário.
  2. Se nenhum projeto existir, use o fluxo de criação oficial e verifique a compatibilidade de pacotes.
  3. Defina o ID da composição, dimensões, FPS, duração, props e localizações de assets explicitamente.
  4. Use APIs baseadas em quadro/tempo, como useCurrentFrame() e useVideoConfig(); não dependa de animações CSS baseadas em tempo real para o tempo de renderização.
  5. Use helpers de interpolação/spring com easing intencional e intervalos clamp quando apropriado.
  6. Sequencie cenas e transições de modo que suas contagens de quadros e sobreposições produzam a duração total pretendida.
  7. Use componentes de mídia suportados e helpers de asset estático; aguarde assets assíncronos antes de renderizar.
  8. Inicie a pré-visualização do Studio e inspecione-a antes de editar ou renderizar onde o ambiente permitir.
  9. Renderize apenas quando solicitado, depois inspecione o arquivo exportado e verifique duração, dimensões, FPS, áudio e quadros representativos.

Regras de Qualidade

  • Evite trabalho desnecessário por quadro e efeitos caros.
  • Mantenha caminhos de fontes, imagens, áudio e vídeo reproduzíveis.
  • Evite matemática de quadros inválida, durações negativas, assets ausentes e interpolação sem limites.
  • Verifique ajuste de texto, formatação RTL, temporização de legendas e continuidade visual.
  • Verifique o licenciamento atual do Remotion e os termos de uso comercial antes da implantação.

Habilidades Relacionadas