feat(marketing): adiciona plugin marketing (agents, skills, knowledge e metadados do projeto)

2026-10-28 16:09:09 +00:00
parent e43fec3bd9
commit 13c39d8000
96 changed files with 9733 additions and 0 deletions
@@ -0,0 +1,209 @@
+---
+name: video
+description: Criacao de videos profissionais com Remotion (React). Planeia conteudo, scripts e workflows de producao.
+layer: wiki
+---
+
+# /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 |
+
+-