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

name, description, author, version, quality_score, user_invocable, desk_task, allowed-tools

name	description	author	version	quality_score	user_invocable	desk_task	allowed-tools
video	Video content strategy and production guidance. Plans video content, scripts, and production workflows. Use when user mentions "video content", "conteúdo vídeo", "youtube strategy", "video production", "video script".	Descomplicar® Crescimento Digital	2.0.0	75	true	1486	Edit

/video - Criação de Vídeos com Remotion

Cria vídeos profissionais usando Remotion (React) a partir de descrições em linguagem natural.

Arquitectura

Prompt Natural → Claude Code → Código React/Remotion → Vídeo MP4/GIF/WebM

Componente	Função
Remotion	Framework React para vídeos programáticos
Esta Skill	Ensina Claude a gerar código Remotion correcto
Output	MP4, GIF, WebM em qualquer resolução

---

Projecto Base

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

Este projecto já está configurado com:

• Remotion 4.x instalado
• Agent Skills do Remotion
• Composição de exemplo funcional
• Scripts de renderização

---

Uso Rápido

Criar Novo Vídeo

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

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

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

Comandos Disponíveis

Comando	Descrição
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 vídeo de [duração] segundos para [empresa/propósito] com:
- Resolução: [1920x1080 / 1080x1920 / 1080x1080]
- FPS: [30 / 60]
- Fundo: [cor sólida / gradiente / imagem]
- Sequência de animação:
  1. [Elemento] [animação] (frames X-Y)
  2. [Elemento] [animação] (frames X-Y)
  3. ...
- Texto: [título, subtítulo, CTA]
- Estilo: [minimalista / corporativo / energético / elegante]

---

Exemplos de Prompts

Intro Corporativa

Cria um vídeo intro de 5 segundos para "Descomplicar" com:
- Resolução: 1920x1080, 30fps
- Fundo: gradiente de #1e3a8a para #7c3aed
- Animação:
  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 vídeo vertical de 15 segundos para Instagram Reels com:
- Resolução: 1080x1920, 30fps
- Tema: "5 Dicas de SEO"
- Sequência:
  1. Título 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!"
- Cores: marca Descomplicar

Promo Produto

Cria um vídeo promocional de 20 segundos com:
- Resolução: 1920x1080, 30fps
- Produto: [Nome]
- Features a destacar: [lista]
- CTA: "Experimenta grátis"
- Incluir: preço com animação de destaque

---

Conceitos Remotion Essenciais

Timing

• Frames: Unidade base (30fps = 30 frames/segundo)
• useCurrentFrame(): Frame actual da animação
• interpolate(): Mapear frames para valores (opacity, position, scale)
• spring(): Animações com física (bounce, elastic)

Componentes Core

import {
  AbsoluteFill,      // Container full-screen
  Sequence,          // Sequenciar elementos no tempo
  useCurrentFrame,   // Frame actual
  useVideoConfig,    // fps, width, height, duration
  interpolate,       // Interpolação linear
  spring,            // Animação spring
  Img,               // Imagens
  Audio,             // Áudio
  Video,             // Vídeo embebido
} from "remotion";

Estrutura de Composição

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

---

Opções de Renderização

Qualidade

# Alta qualidade (lento)
npx remotion render Video out.mp4 --crf=18

# Qualidade média (rápido)
npx remotion render Video out.mp4 --crf=23

# Baixa qualidade (muito rápido)
npx remotion render Video out.mp4 --crf=28

Formatos

# MP4 (H.264)
npx remotion render Video out.mp4

# GIF
npx remotion render Video out.gif --codec=gif

# WebM (VP8)
npx remotion render Video out.webm --codec=vp8

# ProRes (alta qualidade, ficheiro grande)
npx remotion render Video out.mov --codec=prores

Props Dinâmicas

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

---

Resoluções Comuns

Formato	Resolução	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

---

Boas Práticas

Performance

• Usar React.memo() para componentes pesados
• Evitar re-renders desnecessários
• Pré-carregar assets com staticFile()

Animações

• Começar com interpolate() para animações simples
• Usar spring() para movimentos naturais
• Combinar Sequence para organizar timeline

Assets

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

---

Troubleshooting

Problema	Solução
Vídeo preto	Verificar AbsoluteFill tem background
Fontes não carregam	Usar @remotion/google-fonts
Animação não funciona	Verificar range de frames no interpolate
Erro de módulo	rm -rf node_modules && npm install
Render lento	Reduzir --concurrency ou usar --crf maior

---

Regras Detalhadas

Para instruções específicas, consultar:

• rules/animations.md - Animações fundamentais
• rules/timing.md - Interpolação e easing
• rules/transitions.md - Transições entre cenas
• rules/sequencing.md - Organização temporal
• rules/fonts.md - Carregamento de fontes
• rules/images.md - Trabalhar com imagens
• rules/audio.md - Áudio e som
• rules/tailwind.md - TailwindCSS no Remotion

---

Workflow Completo

1. DEFINIR → Duração, resolução, estilo
2. DESCREVER → Prompt detalhado ao Claude
3. GERAR → Claude cria componentes React
4. PREVIEW → npm run dev (Remotion Studio)
5. AJUSTAR → Refinar animações/timing
6. RENDER → npx remotion render
7. EXPORTAR → MP4/GIF/WebM conforme necessidade

---

Casos de Uso

Tipo	Duração	Resolução
Logo Intro	3-5s	1920x1080
Promo Rápida	15-30s	1080x1920
Explainer	60-120s	1920x1080
Social Post	5-15s	1080x1080
YouTube Intro	5-10s	1920x1080
Stories	15s	1080x1920

---

---

Datasets Dify (Consulta Obrigatória)

Em caso de dúvidas ou para aprofundar conhecimento, consultar os seguintes datasets via MCP:

Dataset	ID	Prioridade
Canva	7efc5db4-05b1-408a-9e41-b612188ee877	2
Criatividade	39818f77-8c70-4729-9b5c-6f92d3a2b418	2
Youtube Marketing	baa1b3e6-ebf0-4413-84b2-63d1164867ea	2
Marketing Redes Sociais	66117552-348f-455d-9aca-2da722567693	3

Como Consultar

// Princípios de design para vídeo
mcp__notebooklm__notebook_query, mcp__dify-kb__dify_kb_retrieve_segments({
  dataset_id: "7efc5db4-05b1-408a-9e41-b612188ee877",
  query: "animacao motion design"
})

// Técnicas criativas
mcp__dify-kb__dify_kb_retrieve_segments({
  dataset_id: "39818f77-8c70-4729-9b5c-6f92d3a2b418",
  query: "storytelling visual criativo"
})

// Optimização para YouTube
mcp__dify-kb__dify_kb_retrieve_segments({
  dataset_id: "baa1b3e6-ebf0-4413-84b2-63d1164867ea",
  query: "thumbnail intro retention"
})

Quando Consultar

• Criar animações e motion graphics
• Princípios de design visual
• Optimizar vídeos para redes sociais
• Storytelling visual

---

Paletas de Cores para Vídeo

Corporativo Profissional

const colors = {
  background: "#0f172a",     // Slate 900
  primary: "#3b82f6",        // Blue 500
  secondary: "#8b5cf6",      // Violet 500
  text: "#f8fafc",           // Slate 50
  accent: "#10b981",         // Emerald 500
}

Energético/Marketing

const colors = {
  background: "#ff006e",     // Pink forte
  primary: "#ffbe0b",        // Amarelo vibrante
  secondary: "#fb5607",      // Laranja
  text: "#ffffff",
  accent: "#8338ec",         // Roxo
}

Minimalista/Elegante

const colors = {
  background: "#fafafa",     // Off-white
  primary: "#18181b",        // Zinc 900
  secondary: "#71717a",      // Zinc 500
  text: "#18181b",
  accent: "#a855f7",         // Purple 500
}

---

Animações Prontas (Copy-Paste)

Fade In com Scale

import { interpolate, useCurrentFrame } from "remotion"

export function FadeInScale({ children }: { children: React.ReactNode }) {
  const frame = useCurrentFrame()

  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" })
  const scale = interpolate(frame, [0, 30], [0.8, 1], { extrapolateRight: "clamp" })

  return (
    <div style={{ opacity, transform: `scale(${scale})` }}>
      {children}
    </div>
  )
}

Slide Up

export function SlideUp({ children, delay = 0 }: { children: React.ReactNode; delay?: number }) {
  const frame = useCurrentFrame()

  const y = interpolate(frame, [delay, delay + 20], [50, 0], { extrapolateRight: "clamp" })
  const opacity = interpolate(frame, [delay, delay + 20], [0, 1], { extrapolateRight: "clamp" })

  return (
    <div style={{ opacity, transform: `translateY(${y}px)` }}>
      {children}
    </div>
  )
}

Bounce In (Spring)

import { spring, useCurrentFrame, useVideoConfig } from "remotion"

export function BounceIn({ children }: { children: React.ReactNode }) {
  const frame = useCurrentFrame()
  const { fps } = useVideoConfig()

  const scale = spring({
    frame,
    fps,
    config: {
      damping: 10,
      stiffness: 200,
      mass: 0.5,
    },
  })

  return (
    <div style={{ transform: `scale(${scale})` }}>
      {children}
    </div>
  )
}

Text Reveal (Linha por Linha)

export function TextReveal({ lines }: { lines: string[] }) {
  const frame = useCurrentFrame()

  return (
    <div className="space-y-2">
      {lines.map((line, i) => {
        const delay = i * 15
        const opacity = interpolate(
          frame,
          [delay, delay + 10],
          [0, 1],
          { extrapolateRight: "clamp" }
        )

        return (
          <div key={i} style={{ opacity }}>
            {line}
          </div>
        )
      })}
    </div>
  )
}

---

Tipografia para Vídeo

Hierarquia de Tamanhos

// Remotion 1920x1080
const textSizes = {
  hero: "120px",        // Título principal
  h1: "80px",          // Secções
  h2: "60px",          // Sub-títulos
  h3: "40px",          // Destaques
  body: "32px",        // Texto normal
  caption: "24px",     // Legendas
}

// Remotion 1080x1920 (Vertical)
const textSizesVertical = {
  hero: "80px",
  h1: "56px",
  h2: "40px",
  h3: "32px",
  body: "24px",
  caption: "18px",
}

Font Pairings para Vídeo

// Moderno Tech
<style>{`
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@700;900&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=swap');
`}</style>

// Editorial Elegante
<style>{`
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
`}</style>

---

Templates Prontos

Logo Intro (5s)

import { AbsoluteFill, Img, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion"

export function LogoIntro({ logoSrc }: { logoSrc: string }) {
  const frame = useCurrentFrame()
  const { fps } = useVideoConfig()

  // Logo scale com spring
  const logoScale = spring({
    frame: frame - 10,
    fps,
    config: { damping: 12, stiffness: 200 }
  })

  // Tagline slide up
  const taglineY = interpolate(frame, [60, 90], [50, 0], { extrapolateRight: "clamp" })
  const taglineOpacity = interpolate(frame, [60, 90], [0, 1], { extrapolateRight: "clamp" })

  return (
    <AbsoluteFill style={{ backgroundColor: "#0f172a", justifyContent: "center", alignItems: "center" }}>
      {/* Logo */}
      <div style={{ transform: `scale(${logoScale})` }}>
        <Img src={logoSrc} style={{ width: "300px" }} />
      </div>

      {/* Tagline */}
      <div
        style={{
          position: "absolute",
          bottom: "150px",
          fontSize: "48px",
          color: "#f8fafc",
          fontWeight: 600,
          transform: `translateY(${taglineY}px)`,
          opacity: taglineOpacity,
        }}
      >
        Crescimento Digital
      </div>
    </AbsoluteFill>
  )
}

Stats Highlight (3s)

export function StatsHighlight({ stat, label }: { stat: string; label: string }) {
  const frame = useCurrentFrame()
  const { fps } = useVideoConfig()

  // Número escala com bounce
  const scale = spring({
    frame,
    fps,
    config: { damping: 10, mass: 0.5, stiffness: 200 }
  })

  // Label fade in
  const labelOpacity = interpolate(frame, [30, 45], [0, 1], { extrapolateRight: "clamp" })

  return (
    <AbsoluteFill style={{ backgroundColor: "#3b82f6", justifyContent: "center", alignItems: "center" }}>
      {/* Número */}
      <div
        style={{
          fontSize: "180px",
          fontWeight: 900,
          color: "#ffffff",
          transform: `scale(${scale})`,
        }}
      >
        {stat}
      </div>

      {/* Label */}
      <div
        style={{
          fontSize: "40px",
          color: "#dbeafe",
          marginTop: "20px",
          opacity: labelOpacity,
        }}
      >
        {label}
      </div>
    </AbsoluteFill>
  )
}

---

Motion Design Guidelines

Duração de Animações

Tipo	Frames (30fps)	Duração
Micro (hover, toggle)	3-6	100-200ms
Rápida (fade, slide)	12-18	400-600ms
Normal (entrada cena)	24-30	800-1000ms
Lenta (transição cena)	45-60	1.5-2s

Easing Curves

import { Easing } from "remotion"

// Entrada suave
const easeOut = Easing.bezier(0, 0, 0.2, 1)

// Saída suave
const easeIn = Easing.bezier(0.4, 0, 1, 1)

// Entrada e saída suave
const easeInOut = Easing.bezier(0.4, 0, 0.2, 1)

// Spring natural
const spring = Easing.bezier(0.34, 1.56, 0.64, 1)

// Uso
const y = interpolate(frame, [0, 30], [100, 0], {
  easing: easeOut,
  extrapolateRight: "clamp"
})

Princípios de Motion

1. Staging - Um movimento de cada vez
2. Anticipation - Preparação antes do movimento
3. Follow Through - Overshooting ligeiro
4. Timing - Velocidade comunica peso/importância
5. Exaggeration - Amplificar para ênfase

---

Acessibilidade em Vídeo

Contraste de Texto

// NUNCA usar contraste baixo
// BAD: texto cinza em fundo branco
const bad = { color: "#9ca3af", background: "#ffffff" } // Ratio 2.8:1

// GOOD: contraste mínimo 4.5:1
const good = { color: "#1f2937", background: "#ffffff" } // Ratio 15.8:1

Tamanho Mínimo de Texto

// 1080p (1920x1080)
const minSize = "28px" // Legível em mobile

// 4K (3840x2160)
const minSize4k = "56px"

Reduced Motion

import { useVideoConfig } from "remotion"

export function RespectMotion({ children }: { children: React.ReactNode }) {
  const { fps } = useVideoConfig()
  const prefersReducedMotion = false // Remotion não tem acesso a media queries

  // Para export, criar versão alternativa sem animações complexas
  return children
}

---

Datasets Dify (Consulta Obrigatória)

Em caso de dúvidas ou para aprofundar conhecimento, consultar os seguintes datasets via MCP:

Dataset	ID	Prioridade
Canva	7efc5db4-05b1-408a-9e41-b612188ee877	2
Criatividade	39818f77-8c70-4729-9b5c-6f92d3a2b418	2
Youtube Marketing	baa1b3e6-ebf0-4413-84b2-63d1164867ea	2
Marketing Redes Sociais	66117552-348f-455d-9aca-2da722567693	3

Como Consultar

# PRIMARIO: NotebookLM (Gemini 2.5 RAG)
# mcp__notebooklm__notebook_query({notebook_id: "76647e0f-3ae2-4c00-a0a8-f457aebf5655", query: "<tema>"})  // Marketing Digital Avancado
# mcp__notebooklm__notebook_query({notebook_id: "9053d0e8-dd39-460b-b5ea-e67af3e9a675", query: "<tema>"})  // Social Media e Branding
# mcp__notebooklm__notebook_query({notebook_id: "7b8fec17-d34f-4e3f-a8c6-8231e51f6323", query: "<tema>"})  // Copywriting e Persuasao
# mcp__notebooklm__notebook_query({notebook_id: "058a896e-6c9a-4e51-ae7d-9adb2738bc5f", query: "<tema>"})  // Producao de Video e Youtube
# mcp__notebooklm__notebook_query({notebook_id: "79d43410-0e29-4be1-881d-84db6bdc239a", query: "<tema>"})  // Estrategia e Empreendedorismo
# mcp__notebooklm__notebook_query({notebook_id: "4c595973-ba10-420a-a3bf-e4389e424ad3", query: "<tema>"})  // Marketing Digital PT
# mcp__notebooklm__notebook_query({notebook_id: "0c9c079c-a426-486c-99eb-1564d42d37ad", query: "<tema>"})  // Gestao de Projectos e Agile
# FALLBACK: Dify KB (se NotebookLM insuficiente)

// Princípios de design para vídeo
mcp__dify-kb__dify_kb_retrieve_segments({
  dataset_id: "7efc5db4-05b1-408a-9e41-b612188ee877",
  query: "animacao motion design"
})

// Técnicas criativas
mcp__dify-kb__dify_kb_retrieve_segments({
  dataset_id: "39818f77-8c70-4729-9b5c-6f92d3a2b418",
  query: "storytelling visual criativo"
})

// Optimização para YouTube
mcp__dify-kb__dify_kb_retrieve_segments({
  dataset_id: "baa1b3e6-ebf0-4413-84b2-63d1164867ea",
  query: "thumbnail intro retention"
})

Quando Consultar

• Criar animações e motion graphics
• Princípios de design visual
• Optimizar vídeos para redes sociais
• Storytelling visual

---

Versão: 2.0.0 | Data: 2026-02-03 | Autor: Descomplicar® Projecto Base: /media/ealmeida/Dados/Dev/remotion-demo/ Documentação: remotion.dev/docs

---

Quando NÃO Usar

• Para tarefas fora do domínio de especialização desta skill
• Quando outra skill mais específica está disponível
• Para operações que requerem confirmação manual do utilizador