claude-plugins/marketing/skills/video/SKILL.md

name, description

name	description
video	Criacao de videos profissionais com Remotion (React). Planeia conteudo, scripts e workflows de producao.

/video - Criacao de Videos com Remotion

Cria videos profissionais usando Remotion (React) a partir de descricoes em linguagem natural.

Contexto NotebookLM

ANTES de executar, consultar notebooks para contexto especializado:

Notebook	ID	Consultar quando
Producao de Video e YouTube	058a896e	Para planeamento de video
Remotion Deep Research	f2b75baa	Para implementacao tecnica Remotion

mcp__notebooklm__notebook_query({
  notebook_id: "058a896e-6c9a-4e51-ae7d-9adb2738bc5f",
  query: "<adaptar ao contexto>"
})

mcp__notebooklm__notebook_query({
  notebook_id: "f2b75baa-1ab1-48d3-8f7c-a6a9e516934c",
  query: "<adaptar ao contexto>"
})

---

Arquitectura

Prompt Natural -> Claude Code -> Codigo React/Remotion -> Video MP4/GIF/WebM

Componente	Funcao
Remotion	Framework React para videos programaticos
Esta Skill	Ensina Claude a gerar codigo Remotion correcto
Output	MP4, GIF, WebM em qualquer resolucao

---

Projecto Base

/media/ealmeida/Dados/Dev/remotion-demo/

Ja configurado com Remotion 4.x, Agent Skills, composicao de exemplo e scripts de renderizacao.

---

Uso Rapido

# 1. Navegar ao projecto
cd /media/ealmeida/Dados/Dev/remotion-demo

# 2. Descrever o video pretendido ao Claude
"Cria um video de 10 segundos para [empresa] com logo animado e tagline"

# 3. Renderizar
npm run render
# ou
npx remotion render [CompositionName] out/video.mp4

Comandos Disponiveis

Comando	Descricao
npm run dev	Abrir Remotion Studio (preview)
npm run render	Renderizar DemoVideo para MP4
npm run render:gif	Renderizar para GIF

---

Estrutura de Prompt Recomendada

Cria um video de [duracao] segundos para [empresa/proposito] com:
- Resolucao: [1920x1080 / 1080x1920 / 1080x1080]
- FPS: [30 / 60]
- Fundo: [cor solida / gradiente / imagem]
- Sequencia de animacao:
  1. [Elemento] [animacao] (frames X-Y)
  2. [Elemento] [animacao] (frames X-Y)
- Texto: [titulo, subtitulo, CTA]
- Estilo: [minimalista / corporativo / energetico / elegante]

---

Exemplos de Prompts

Intro Corporativa

Cria um video intro de 5 segundos para "Descomplicar" com:
- Resolucao: 1920x1080, 30fps
- Fundo: gradiente de #1e3a8a para #7c3aed
- Animacao:
  1. Logo fade in com bounce (0-45 frames)
  2. Tagline "Crescimento Digital" slide up (45-90 frames)
  3. Linha decorativa expande (60-120 frames)
- Estilo: profissional e moderno

Reel/Short Vertical

Cria um video vertical de 15 segundos para Instagram Reels com:
- Resolucao: 1080x1920, 30fps
- Tema: "5 Dicas de SEO"
- Sequencia:
  1. Titulo impactante com zoom (0-30 frames)
  2. Dica 1 slide in (30-90 frames)
  3. Dica 2 slide in (90-150 frames)
- CTA final: "Segue para mais!"

---

Conceitos Remotion Essenciais

Timing

• Frames: Unidade base (30fps = 30 frames/segundo)
• useCurrentFrame(): Frame actual da animacao
• interpolate(): Mapear frames para valores (opacity, position, scale)
• spring(): Animacoes com fisica (bounce, elastic)

Componentes Core

import {
  AbsoluteFill,      // Container full-screen
  Sequence,          // Sequenciar elementos no tempo
  useCurrentFrame,   // Frame actual
  useVideoConfig,    // fps, width, height, duration
  interpolate,       // Interpolacao linear
  spring,            // Animacao spring
  Img,               // Imagens
  Audio,             // Audio
  Video,             // Video embebido
} from "remotion";

Estrutura de Composicao

// src/Root.tsx
<Composition
  id="NomeVideo"
  component={MeuComponente}
  durationInFrames={150}  // 5s a 30fps
  fps={30}
  width={1920}
  height={1080}
  defaultProps={{ titulo: "Exemplo" }}
/>

---

Opcoes de Renderizacao

Qualidade

npx remotion render Video out.mp4 --crf=18   # Alta qualidade (lento)
npx remotion render Video out.mp4 --crf=23   # Qualidade media (rapido)
npx remotion render Video out.mp4 --crf=28   # Baixa qualidade (muito rapido)

Formatos

npx remotion render Video out.mp4                    # MP4 (H.264)
npx remotion render Video out.gif --codec=gif        # GIF
npx remotion render Video out.webm --codec=vp8       # WebM
npx remotion render Video out.mov --codec=prores     # ProRes

Props Dinamicas

npx remotion render Video out.mp4 \
  --props='{"titulo":"Descomplicar","cor":"#1e3a8a"}'

---

Resolucoes Comuns

Formato	Resolucao	Uso
16:9 HD	1920x1080	YouTube, Website
16:9 4K	3840x2160	YouTube 4K
9:16 Vertical	1080x1920	Reels, TikTok, Shorts
1:1 Quadrado	1080x1080	Instagram Feed
4:5 Portrait	1080x1350	Instagram Feed optimal

---

Casos de Uso

Tipo	Duracao	Resolucao
Logo Intro	3-5s	1920x1080
Promo Rapida	15-30s	1080x1920
Explainer	60-120s	1920x1080
Social Post	5-15s	1080x1080
YouTube Intro	5-10s	1920x1080
Stories	15s	1080x1920

---

Boas Praticas

Performance

• Usar React.memo() para componentes pesados
• Evitar re-renders desnecessarios
• Pre-carregar assets com staticFile()

Animacoes

• Comecar com interpolate() para animacoes simples
• Usar spring() para movimentos naturais
• Combinar Sequence para organizar timeline

Assets

• Colocar imagens/audio em public/
• Usar staticFile("nome.png") para referenciar
• Formatos recomendados: PNG (imagens), MP3/WAV (audio)

---

Troubleshooting

Problema	Solucao
Video preto	Verificar AbsoluteFill tem background
Fontes nao carregam	Usar @remotion/google-fonts
Animacao nao funciona	Verificar range de frames no interpolate
Erro de modulo	rm -rf node_modules && npm install
Render lento	Reduzir --concurrency ou usar --crf maior

---

Workflow Completo

1. DEFINIR -> Duracao, resolucao, estilo
2. DESCREVER -> Prompt detalhado ao Claude
3. GERAR -> Claude cria componentes React
4. PREVIEW -> npm run dev (Remotion Studio)
5. AJUSTAR -> Refinar animacoes/timing
6. RENDER -> npx remotion render
7. EXPORTAR -> MP4/GIF/WebM conforme necessidade

---

Referencias Detalhadas

Para conteudo detalhado, consultar:

• references/components.md - Animacoes prontas, templates, paletas de cores, tipografia, motion design, acessibilidade
• rules/animations.md - Animacoes fundamentais
• rules/timing.md - Interpolacao e easing
• rules/transitions.md - Transicoes entre cenas
• rules/sequencing.md - Organizacao temporal
• rules/fonts.md - Carregamento de fontes
• rules/images.md - Trabalhar com imagens
• rules/audio.md - Audio e som
• rules/tailwind.md - TailwindCSS no Remotion

---

Anti-Patterns

• Nao usar para tarefas fora do dominio de video/Remotion
• Nao usar quando outra skill mais especifica esta disponivel
• Nao executar sem confirmar requisitos com o utilizador

---

Projecto Base: /media/ealmeida/Dados/Dev/remotion-demo/ Documentacao: remotion.dev/docs