Files

Emanuel Almeida 2cb3210962 feat: adiciona 12 plugins Descomplicar ao marketplace

Plugins: automacao, crm-ops, design-media, dev-tools, gestao,
infraestrutura, marketing, negocio, perfex-dev, project-manager,
wordpress + hello-plugin (existente).

Totais: 83 skills, 44 agents, 12 datasets.json

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-02-07 21:41:24 +00:00

18 KiB

Raw Blame History

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

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__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

Staging - Um movimento de cada vez
Anticipation - Preparação antes do movimento
Follow Through - Overshooting ligeiro
Timing - Velocidade comunica peso/importância
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

// 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

18 KiB Raw Blame History

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

Arquitectura

Projecto Base

Uso Rápido

Criar Novo Vídeo

Comandos Disponíveis

Estrutura de Prompt Recomendada

Exemplos de Prompts

Intro Corporativa

Reel/Short Vertical

Promo Produto

Conceitos Remotion Essenciais

Timing

Componentes Core

Estrutura de Composição

Opções de Renderização

Qualidade

Formatos

Props Dinâmicas

Resoluções Comuns

Boas Práticas

Performance

Animações

Assets

Troubleshooting

Regras Detalhadas

Workflow Completo

Casos de Uso

Datasets Dify (Consulta Obrigatória)

Como Consultar

Quando Consultar

Paletas de Cores para Vídeo

Corporativo Profissional

Energético/Marketing

Minimalista/Elegante

Animações Prontas (Copy-Paste)

Fade In com Scale

Slide Up

Bounce In (Spring)

Text Reveal (Linha por Linha)

Tipografia para Vídeo

Hierarquia de Tamanhos

Font Pairings para Vídeo

Templates Prontos

Logo Intro (5s)

Stats Highlight (3s)

Motion Design Guidelines

Duração de Animações

Easing Curves

Princípios de Motion

Acessibilidade em Vídeo

Contraste de Texto

Tamanho Mínimo de Texto

Reduced Motion

Datasets Dify (Consulta Obrigatória)

Como Consultar

Quando Consultar

Quando NÃO Usar

18 KiB

Raw Blame History