Emanuel Almeida
6b3a6f2698
- All SKILL.md files now <500 lines (avg reduction 69%) - Detailed content extracted to references/ subdirectories - Frontmatter standardised: only name + description (Anthropic standard) - New skills: brand-guidelines, spec-coauthor, report-templates, skill-creator - Design skills: anti-slop guidelines, premium-proposals reference - Removed non-standard frontmatter fields (triggers, version, author, category) Plugins affected: infraestrutura, marketing, dev-tools, crm-ops, gestao, core-tools, negocio, perfex-dev, wordpress, design-media Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
297 lines
7.4 KiB
Markdown
297 lines
7.4 KiB
Markdown
---
|
|
name: video
|
|
description: 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
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```tsx
|
|
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
|
|
|
|
```tsx
|
|
// 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
|
|
|
|
```bash
|
|
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
|
|
|
|
```bash
|
|
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
|
|
|
|
```bash
|
|
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](references/components.md) - Animacoes prontas, templates, paletas de cores, tipografia, motion design, acessibilidade
|
|
- [rules/animations.md](rules/animations.md) - Animacoes fundamentais
|
|
- [rules/timing.md](rules/timing.md) - Interpolacao e easing
|
|
- [rules/transitions.md](rules/transitions.md) - Transicoes entre cenas
|
|
- [rules/sequencing.md](rules/sequencing.md) - Organizacao temporal
|
|
- [rules/fonts.md](rules/fonts.md) - Carregamento de fontes
|
|
- [rules/images.md](rules/images.md) - Trabalhar com imagens
|
|
- [rules/audio.md](rules/audio.md) - Audio e som
|
|
- [rules/tailwind.md](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](https://remotion.dev/docs)
|