¿Qué hace Remotion Video Director?

Una habilidad interactiva que guía a los usuarios desde "necesito un vídeo" hasta un MP4 renderizado con música, a través de un proceso experto de deliberación, diseño de escenarios y patrones probados de Remotion.

Cuándo Usarlo

Activa esta habilidad cuando el usuario:

Quiere crear un vídeo usando Remotion
Necesita una demo de producto, vídeo de lanzamiento, plantilla de contenido recurrente, vídeo de marketing o intro narrativa
Dice "necesito un vídeo", "haz un vídeo de...", "crea un vídeo Remotion", "vídeo como código"
Quiere ayuda para pensar qué vídeo hacer o cómo estructurarlo
Tiene un proyecto Remotion y quiere una revisión experta

Relación con el Skill Oficial de Remotion

El skill oficial remotion-dev/skills enseña a Claude la API de Remotion (37 archivos de reglas que cubren animaciones, audio, subtítulos, transiciones, etc.). Este skill maneja la capa creativa y estratégica superpuesta:

Skill oficial: "¿Cómo uso interpolate()?" (referencia técnica)
Video Director: "¿Qué vídeo debería hacer y cómo debería fluir?" (proceso creativo)

Si el skill oficial de Remotion está instalado, apóyate en él para detalles específicos de la API. Si no, las references/remotion-patterns.md y references/component-library.md de este skill proporcionan suficiente conocimiento de Remotion para crear vídeos de producción.

Flujo de Trabajo en Cuatro Fases

Fase 1: Encuadre Estratégico

Objetivo: Entender lo que el usuario necesita a través de la conversación y luego reunir perspectivas expertas.

CRÍTICO: Esta fase es INTERACTIVA. Haz preguntas una a la vez y ESPERA las respuestas. No sueltes todas las preguntas a la vez ni avances automáticamente sin la entrada del usuario.

Paso 1 - Descubrimiento (Conversacional)

Comienza con una sola pregunta abierta:

"¿Para qué es este vídeo? Cuéntame sobre la idea, quién lo verá y qué quieres que hagan después."

ESPERA la respuesta del usuario. Luego haz preguntas de seguimiento específicas según lo que falte:

Si la audiencia no está clara: "¿Quién verá específicamente esto? (clientes, equipo, inversores, redes sociales?)"
Si la acción deseada no está clara: "Después de verlo, ¿qué deberían HACER los espectadores? (registrarse, entender algo, compartir?)"
Si no se mencionan restricciones: "¿Alguna restricción que deba conocer? Duración, colores de marca, activos existentes, fecha límite?"
Si mencionan un producto: "¿Puedes compartir capturas de pantalla del producto/interfaz?"

No continúes hasta que entiendas: propósito, audiencia, acción deseada y restricciones.

Paso 2 - Dirección Creativa

Presenta las opciones de dirección creativa y pide al usuario que elija:

Estilo	Sensación	Mejor Para
Minimal/Jobs	Fondo negro, pausas dramáticas, una idea por fotograma, fuente Impact	Lanzamientos de productos, grandes ideas, discursos clave
Datos-Ricos/Bloomberg	Fondo azul marino oscuro, gráficos animados, denso pero organizado	Resúmenes de reuniones, informes, paneles
Cálido/Narrativo	Tonos cálidos, citas personales, acentos serif	Intros de cursos, historias de equipo, comunidad
Terminal/Hacker	Tema oscuro de código, máquina de escribir, monoespaciado en todas partes	Demos técnicas, herramientas de desarrollo, ingeniería
Personalizado	El usuario describe o proporciona capturas de pantalla/vídeos de referencia	Cualquier cosa específica

"¿Qué dirección de estilo se ajusta a tu vídeo? O comparte capturas de pantalla de vídeos que hayas visto que te gustaron."

ESPERA la respuesta.

Lee references/video-archetypes.md para la especificación completa de la dirección elegida (colores, fuentes, estilo de animación, reglas de temporización).

Paso 3 - Entrada de Referencia (Opcional)

"¿Tienes algún vídeo de referencia, capturas de pantalla o estilos visuales que te gustaría que emule? (Omite si no)"

Si el usuario proporciona referencias, analízalas para: paleta de colores, tipografía, velocidad de animación, densidad de diseño, estado de ánimo general. Incorpóralos en el brief creativo.

ESPERA la respuesta o la confirmación de omitir.

Paso 4 - Panel de Expertos

Basado en el arquetipo seleccionado (de references/video-archetypes.md) y la dirección creativa, reúne un panel de 3-4 expertos de references/expert-definitions.md.

Genera perspectivas de expertos - para cada experto, genera 2-3 frases:

Una recomendación específica
Un riesgo a tener en cuenta

Mantenlo conciso. Preséntalo como una breve mesa redonda. Resalta solo donde los expertos discrepen (señala una decisión que el usuario debe tomar).

Paso 5 - Brief Creativo

Sintetiza en un brief estructurado:

## Brief Creativo

**Propósito**: [una frase]
**Audiencia**: [quién, qué les importa]
**Mensaje Central**: [la ÚNICA cosa que los espectadores deben recordar]
**Acción Deseada**: [qué deberían hacer los espectadores a continuación]
**Duración**: [segundos] ([fotogramas] fotogramas a 30fps)
**Dirección Creativa**: [estilo seleccionado - Minimal/Jobs, Bloomberg, etc.]
**Arco Emocional**: [p.ej., curiosidad -> prueba -> confianza -> acción]

## Estrategia de Audio
- Música: [ambiental/optimista/dramática/escasa] de Pixabay
- Voz en off: [sí/no]
- Estado de ánimo musical: [descripción que coincida con la dirección creativa]

## Secuencia de Escenas
| # | Escena | Duración | Propósito |
|---|--------|----------|-----------|
| 1 | ...   | Xs       | ...     |

## Modelo de Datos (si aplica)
[Qué está parametrizado vs. codificado - la estructura de plantilla reutilizable]

## Estilo Visual
- Tema: [nombre de la dirección creativa]
- Fondo: [color]
- Colores: [primario, acento, secundario]
- Tipografía: [fuente de encabezado, fuente de cuerpo, fuente mono]
- Sensación de animación: [rápida/suave/dramática/máquina de escribir]

"Aquí está el brief creativo. ¿Quieres ajustar algo antes de que diseñemos las escenas?"

ESPERA la confirmación o los ajustes.

Fase 2: Diseño de Escenarios

Objetivo: Convertir el brief en un escenario detallado escena por escena.

Paso 6 - Diseño de Escenas

Para cada escena en la secuencia, especifica:

Contenido: Texto exacto, datos, visuales
Componentes: Qué componentes reutilizables usar (de references/component-library.md)
Animación: Animaciones de entrada/salida, temporización en fotogramas
Transiciones: Disolución cruzada entre todas las escenas (8-12 fotogramas)

Lee references/remotion-patterns.md para restricciones críticas de Remotion y patrones de estilo premium.

Regla de Enfoque de Escena: Cada escena debe servir a UNA idea que se conecte con el mensaje central. Si una escena es tangencial al mensaje central, ELIMÍNALA. Pocas escenas enfocadas siempre son mejores que muchas dispersas.

Presupuesto de Fotogramas: Mapea toda la línea de tiempo:

const TIMING = {
  scene1: { start: 0, dur: 6 },   // Gancho
  scene2: { start: 6, dur: 10 },  // ...
  // El total debe coincidir con composition durationInFrames / fps
};

Paso 7 - Arquitectura de Datos

Si el vídeo está basado en datos (informe recurrente, marketing multivariante):

Diseña el objeto de configuración que cambia entre renderizados
Identifica qué permanece constante (plantilla visual) vs. qué varía (contenido)
Muestra al usuario la forma de la configuración y confirma

Ejemplo de patrón (de WeeklyIntro):

const weekData = {
  weekLabel: "Mar 3 - Mar 9",
  heroNumber: 312,
  heroLabel: "nuevos registros",
  // ... campos que cambian semanalmente
};

Paso 8 - Confirmación del Usuario

Presenta el escenario completo.

"¿Listo para construir, o quieres ajustar algo?"

ESPERA la confirmación.

Fase 3: Construcción

Objetivo: Crear el proyecto Remotion y renderizar la primera versión.

CRÍTICO: Nunca ejecutes ningún comando que lance un asistente CLI interactivo o solicite entrada. Esto incluye npx create-video, npx remotion init, npm init, o npx remotion render sin argumentos. Siempre crea archivos manualmente y pasa todos los argumentos explícitamente a los comandos CLI.

Paso 9 - Andamiar Proyecto

Crea la estructura del proyecto Remotion manualmente (NO uses asistentes de andamiaje - ver el encabezado de la Fase 3):

<proyecto>/
├── src/
│   ├── Root.tsx
│   ├── Video.tsx           # o <VideoName>.tsx
│   ├── theme/
│   │   ├── colors.ts
│   │   ├── fonts.ts
│   │   └── springs.ts
│   ├── scenes/
│   │   ├── Scene1Hook.tsx
│   │   └── ...
│   ├── components/
│   │   ├── FadeIn.tsx
│   │   └── ...
│   └── data/
│       └── config.ts       # si está basado en datos
├── public/
│   ├── music.mp3           # música de fondo
│   └── illustrations/      # si se usan imágenes de fondo
├── package.json
├── tsconfig.json
└── remotion.config.ts

Instala dependencias: pnpm install

Paso 10 - Construir Escenas

Construye cada componente de escena siguiendo el escenario de la Fase 2. Usa componentes de references/component-library.md.

Reglas críticas de construcción (de references/remotion-patterns.md):

Toda animación mediante useCurrentFrame() + interpolate()/spring() - NUNCA transiciones CSS
Siempre fijar la interpolación: { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
useCurrentFrame() es relativo al <Sequence> más cercano, no a la línea de tiempo global
Disolución cruzada entre cada escena (sobre de 8-12 fotogramas; excepción: estilo Terminal/Hacker donde los cortes duros funcionan)
Cada elemento debe animarse al entrar - nunca aparecer estático en un corte

Reglas de estilo premium (de references/remotion-patterns.md):

Variedad de fuentes: mezclar fuente de encabezado + fuente de cuerpo + fuente mono (no Inter en todas partes)
Contraste extremo de tamaño: titulares 72-96pt, cuerpo 20-24pt
Centrar preguntas/titulares importantes verticalmente
Máximo 15-20 palabras por diapositiva de cuerpo, 7 palabras para diapositivas de titular (estilo Jobs)
Mantener el texto en el 85% superior del fotograma
Mínimo 24px de fuente para legibilidad
Relleno de 80-120px desde los bordes

Paso 11 - Integración de Audio

Lee references/music-and-audio.md para la guía de audio completa.

"¿Quieres añadir música de fondo? Recomiendo buscar en pixabay.com/music/ una pista libre de derechos que coincida con el estilo [dirección creativa seleccionada]. Comparte el enlace de descarga o el archivo y lo integraré con curvas de volumen adecuadas."

ESPERA la respuesta del usuario.

Si el usuario proporciona música:

Descargar/guardar en public/music.mp3
Añadir componente <Audio> con curva de volumen de fundido de entrada/salida
Bajar el volumen de la música durante escenas con muchos datos (0.30 -> 0.15)
Si la pista es más larga que el vídeo, usa startFrom para reproducir la sección final

Si el usuario quiere voz en off:

Generar guión de narración a partir del contenido de la escena (~3 palabras/segundo)
El usuario graba o usa ElevenLabs
Integrar con atenuación de música (la música baja a 0.10-0.12 durante la narración)

Si el usuario omite el audio: renderizar con el flag --muted.

Paso 12 - Renderizado y Vista Previa

CRÍTICO: Siempre pasa el archivo de punto de entrada para evitar indicaciones interactivas. Nunca ejecutes npx remotion render sin argumentos - podría lanzar un selector de composición interactivo. Siempre especifica el archivo de entrada y el ID de composición explícitamente:

# Renderizar MP4 final - siempre especificar punto de entrada + ID de composición
npx remotion render src/Root.tsx <IDComposicion> out/<nombre>.mp4 --codec=h264 --crf=18

# Si no hay audio:
npx remotion render src/Root.tsx <IDComposicion> out/<nombre>.mp4 --codec=h264 --crf=18 --muted

Abre el vídeo para que el usuario lo revise.

Fase 4: Revisión

Objetivo: Refinar el vídeo mediante revisión experta y comentarios del usuario hasta que esté listo para enviar.

Paso 13 - Revisión Multi-Experto

Después de que el usuario haya visto el vídeo, ejecuta el protocolo de revisión de references/expert-definitions.md.

Genera una tabla de puntuación (ver references/expert-definitions.md para la plantilla completa):

| Dimensión                | Prioridad | Puntuación |
|--------------------------|-----------|------------|
| Claridad del gancho (primeros 3-5s) | Crítica   | ?/5        |
| Mensaje central transmitido | Crítica   | ?/5        |
| Ritmo / dinamismo        | Alta      | ?/5        |
| Legibilidad visual       | Alta      | ?/5        |
| Acción objetivo clara    | Alta      | ?/5        |
| Adecuación a la audiencia | Media     | ?/5        |

Añade 2-3 dimensiones específicas del tipo (p.ej., "Sensación visual premium" para Minimal/Jobs, "Armonía audiovisual" si se añadió música, "Reutilización de configuración" para informes de datos).

Cada experto revisa desde su ángulo, incluyendo el Cinematógrafo sobre composición visual y el Director Musical sobre audio (si se añadió música). Sintetiza en:

Fortalezas - lo que funciona bien
Mejoras - cambios específicos y accionables
Veredicto - enviar tal cual, necesita una pasada más, o necesita reelaboración significativa

Pregunta al usuario qué mejoras aplicar.

Paso 14 - Revisión del Usuario e Iteración

La revisión experta detecta problemas técnicos, pero solo el usuario sabe si el vídeo se siente bien.

"Ahora que has visto el vídeo y la revisión experta - ¿cuál es tu opinión?

¿Qué escenas funcionan bien?

¿Qué escenas necesitan cambios? (captura fotogramas específicos si es posible)

¿Algún problema de texto, temporización o visual?

¿Algo que falte o que deba eliminarse?"

ESPERA los comentarios del usuario.

Cuando el usuario proporcione comentarios:

Reconoce lo que les gustó (refuerza la dirección)
Enumera los cambios específicos que harás basándote en sus notas
Realiza los cambios - edita componentes de escena, ajusta la temporización, corrige el texto
Re-renderiza y presenta el vídeo actualizado
Vuelve a preguntar: "¿Mejor? ¿Algo más que ajustar?"

Repite este bucle hasta que el usuario esté satisfecho. Los vídeos típicos necesitan 1-3 rondas de refinamiento.

Patrones comunes de comentarios y cómo manejarlos:

"Demasiado rápido" → Aumentar duraciones de escena entre 30-50%, añadir pausas más dramáticas
"Demasiado texto" → Dividir escenas, reducir a 7 palabras por fotograma (estilo Jobs)
"No se siente premium" → Cambiar a dirección Minimal/Jobs, añadir espacio negativo
"La música no encaja" → Probar una pista diferente de Pixabay, ajustar curva de volumen
"Tono incorrecto" → Revisar dirección creativa, ajustar paleta de colores y velocidad de animación
"La escena X es confusa" → Simplificar a UNA idea, añadir jerarquía visual

Guías de Adaptación

Cuando el usuario ya tiene un proyecto Remotion

Omite el andamiaje de la Fase 1-2. Enfócate en revisar el código existente, sugerir mejoras o añadir nuevas escenas/composiciones.

Cuando el usuario quiere un vídeo rápido (sin deliberación)

Comprime la Fase 1 a: preguntar el tipo de vídeo + dirección creativa en una pregunta. Elige los 2 mejores expertos, genera un escenario breve. Pasa a construir rápidamente. Aún así preguntar por la música.

Cuando el usuario quiere solo el concepto (sin código)

Ejecuta la Fase 1-2 por completo. Genera el brief creativo y el escenario como documento. Omite la Fase 3.

Cuando el usuario quiere vídeos multivariantes

Usa el arquetipo de Marketing de Crecimiento. Diseña la matriz de variantes (qué cambia por variante). Construye un vídeo base, luego muestra cómo parametrizar el resto.

Referencias

Referencias locales a las que se hace referencia en el SKILL.md:

Esta habilidad fue desarrollada por BayramAnnakov. Para preguntas, actualizaciones o una variante para un agente de IA específico, consulta el repositorio.

Remotion Video Director

¿Qué es Remotion Video Director?

Preguntar en tu IA favorita

Documentación