riaz37/remotion-ui

Agente RemotionUI

Use este skill ao ajudar usuários a construir composições Remotion completas com RemotionUI, e não efeitos avulsos.

Regras rígidas

• Use a documentação do Remotion para fundamentos do framework.
• Use RemotionUI para componentes fonte prontos, copiados para o repositório do usuário.
• Execute npx remotion-ui@latest add <component> antes de importar um componente.
• Importe de caminhos locais: @/compositions/..., @/remotion/scenes/..., @/remotion/primitives/...
• Nunca importe componentes de UI do pacote npm remotion-ui — ele fornece apenas um CLI, não uma biblioteca de componentes. Os componentes são arquivos fonte copiados e colados, como no shadcn/ui.

Regras de animação Remotion (obrigatórias)

Os componentes RemotionUI são arquivos fonte Remotion comuns. Toda movimentação em tempo de renderização deve ser conduzida pelas primitivas baseadas em quadros do Remotion, não por APIs de temporização do navegador, porque a saída é renderizada quadro a quadro no servidor, e não reproduzida ao vivo em um navegador:

• Anime com useCurrentFrame() para ler o quadro atual, interpolate() para mapear intervalos de quadros a intervalos de valores, e spring() para movimentos físicos e suaves.
• Sequencie o tempo com <Sequence from={...} durationInFrames={...}> — nunca setTimeout, setInterval ou requestAnimationFrame.
• Nunca use transições CSS, animation / @keyframes CSS ou classes utilitárias de animação do Tailwind (animate-*, transition-*) para qualquer coisa que precise aparecer no vídeo renderizado. Elas funcionam com tempo real no navegador e não existem com precisão de quadro durante a renderização server-side do Remotion — vão parecer erradas ou estar totalmente ausentes na saída.
• É permitido usar Tailwind para classes estáticas de layout/espaçamento/cor — a regra se aplica apenas a movimento/temporização.
• Derive todos os valores de opacidade/posição/escala/rotação de interpolate(frame, [inputRange], [outputRange], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) ou spring({ frame, fps, config }), depois aplique-os via style inline (ex.: style={{ opacity, transform: \translateY(${y}px)` }}`).
• Obtenha fps de useVideoConfig(), e não de uma constante fixa.

Fluxo de trabalho

1. Entenda o objetivo do vídeo (clipe social, podcast, história de dados, introdução de produto).
2. Escolha uma composição principal em https://remotionui.com/ai/components.json
3. Execute npx remotion-ui doctor se a configuração parecer quebrada.
4. Instale: npx remotion-ui add <nome>
5. Importe dos caminhos fonte locais e componha em Root.tsx.
6. Personalize o código copiado para marca, temporização e layout — seguindo as regras de animação acima.

Índices do agente

• Componentes: https://remotionui.com/ai/components.json
• Detalhes por componente: https://remotionui.com/ai/components/.json
• Guia completo: https://remotionui.com/ai/remotionui-agent.md
• Registro: https://remotionui.com/r/index.json

CLI (amigável para agentes)

npx remotion-ui init --existing          # inicializar remotion-ui.json
npx remotion-ui doctor --json            # diagnosticar configuração
npx remotion-ui search -q caption --json
npx remotion-ui view social-clip --json
npx remotion-ui list --json
npx remotion-ui add social-clip caption-highlight

Projetos Remotion existentes

cd seu-projeto-remotion
npx remotion-ui init --existing
npx remotion-ui add social-clip
npm run dev

Padrões foco em composição

Objetivo	Composição principal
Clipe social 9:16	social-clip
Reel de criador	creator-reel
Clipe de podcast	podcast-clip
Explicador de dados	data-story
Lançamento de produto	intro