Remotion Video Director
Una habilidad interactiva que guía a los usuarios desde "necesito un video" hasta un MP4 renderizado con música, a través de deliberación experta, diseño de escenarios y patrones Remotion probados en batalla.
Cuándo Usar
Activa esta habilidad cuando el usuario:
- Quiere crear un video usando Remotion
- Necesita una demo de producto, video de lanzamiento, plantilla de contenido recurrente, video de marketing o introducción narrativa
- Dice "necesito un video", "haz un video para...", "crea un video Remotion", "video como código"
- Quiere ayuda para pensar qué video hacer o cómo estructurarlo
- Tiene un proyecto Remotion y quiere una revisión experta
Relación con la Habilidad Oficial de Remotion
El paquete oficial remotion-dev/skills enseña a Claude la API de Remotion (37 archivos de reglas que cubren animaciones, audio, subtítulos, transiciones, etc.). Esta habilidad maneja la capa creativa y estratégica que está por encima:
- Habilidad oficial: "¿Cómo uso
interpolate()?" (referencia técnica) - Video Director: "¿Qué video debería hacer y cómo debería fluir?" (proceso creativo)
Si la habilidad oficial de Remotion está instalada, aprovéchala para detalles específicos de la API. Si no, los archivos references/remotion-patterns.md y references/component-library.md en esta habilidad proporcionan suficiente conocimiento de Remotion para construir videos 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, luego reunir perspectivas expertas.
CRÍTICO: Esta fase es INTERACTIVA. Haz preguntas una a la vez y ESPERA las respuestas. NO arrojes 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 video? 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 específicamente verá 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 saber? 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, presentaciones |
| Data-Rich/Bloomberg | Fondo azul marino oscuro, gráficos animados, denso pero organizado | Resúmenes de reuniones, informes, paneles de control |
| Cálido/Narrativo | Tonos cálidos, citas personales, acentos serif | Introducciones 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 para desarrolladores, ingeniería |
| Personalizado | El usuario describe o proporciona capturas/videos de referencia | Cualquier cosa específica |
"¿Qué estilo de dirección se adapta a tu video? O comparte capturas de pantalla de videos que hayas visto y te hayan gustado."
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 tiempo).
Paso 3 - Entrada de Referencia (Opcional)
"¿Tienes algún video de referencia, capturas de pantalla o estilos visuales que te gustaría que emule? (Omitir si no hay)"
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 al brief creativo.
ESPERA la respuesta o la confirmación de omitir.
Paso 4 - Ensamblaje del Panel de Expertos
Según 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 expertas - para cada experto, genera 2-3 oraciones:
- Una recomendación específica
- Un riesgo a tener en cuenta
Mantén esto conciso. Preséntalo como una breve mesa redonda. Destaca 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 oración]
**Audiencia**: [quién, qué les importa]
**Mensaje Central**: [la ÚNICA cosa que los espectadores deben recordar]
**Acción Deseada**: [qué deben 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/animada/dramática/escasa] de Pixabay
- Voz en off: [sí/no]
- Estado de ánimo musical: [descripción que coincide 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: [principal, 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, elementos visuales
- Componentes: Qué componentes reutilizables usar (de
references/component-library.md) - Animación: Animaciones de entrada/salida, tiempo en fotogramas
- Transiciones: Fundido cruzado 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 UNA idea que se conecte con el mensaje central. Si una escena es tangencial al mensaje central, CÓRTALA. Pocas escenas enfocadas siempre son mejores que muchas dispersas.
Presupuesto de Fotogramas: Planifica toda la línea de tiempo:
const TIMING = {
scene1: { start: 0, dur: 6 }, // Gancho
scene2: { start: 6, dur: 10 }, // ...
// El total debe coincidir con durationInFrames / fps de la composición
};
Paso 7 - Arquitectura de Datos
Si el video está basado en datos (informe recurrente, marketing multivariante):
- Diseña el objeto de configuración que cambia entre renderizaciones
- Identifica qué se mantiene constante (plantilla visual) vs. qué varía (contenido)
- Muestra al usuario la forma de la configuración y confírmala
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 inicie 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 los archivos manualmente y pasa todos los argumentos explícitamente a los comandos CLI.
Paso 9 - Andamio del Proyecto
Crea la estructura del proyecto Remotion manualmente (NO uses asistentes de andamio - ver el encabezado de la Fase 3):
<proyecto>/
├── src/
│ ├── Root.tsx
│ ├── Video.tsx # o <NombreVideo>.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 de construcción críticas (de references/remotion-patterns.md):
- Toda animación mediante
useCurrentFrame()+interpolate()/spring()- NUNCA transiciones CSS - Siempre sujeta la interpolación:
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" } useCurrentFrame()es relativo al<Sequence>más cercano, no a la línea de tiempo global- Fundido cruzado entre cada escena (envolvente de 8-12 fotogramas; excepción: estilo Terminal/Hacker donde los cortes bruscos encajan)
- 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: mezcla fuente de encabezado + fuente de cuerpo + fuente mono (no Inter en todas partes)
- Contraste extremo de tamaño: titulares 72-96pt, cuerpo 20-24pt
- Centra preguntas/titulares importantes verticalmente
- Máximo 15-20 palabras por diapositiva de cuerpo, 7 palabras para diapositivas de titulares (estilo Jobs)
- Mantén 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 completa de audio.
"¿Quieres añadir música de fondo? Recomiendo buscar en pixabay.com/music/ una pista libre de regalías 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:
- Descarga/guarda en
public/music.mp3 - Añade el componente
<Audio>con curva de volumen de fundido de entrada/salida - Baja el volumen de la música durante las escenas con muchos datos (0.30 -> 0.15)
- Si la pista es más larga que el video, usa
startFrompara reproducir la sección final
Si el usuario quiere voz en off:
- Genera un guion de narración a partir del contenido de la escena (~3 palabras/segundo)
- El usuario graba o usa ElevenLabs
- Integra 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: renderiza con la bandera --muted.
Paso 12 - Renderizar y Previsualizar
CRÍTICO: Siempre pasa el archivo de punto de entrada para evitar indicaciones interactivas. Nunca ejecutes npx remotion render sin adornos - 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 especifica punto de entrada + ID de composición
npx remotion render src/Root.tsx <IDComposición> out/<nombre>.mp4 --codec=h264 --crf=18
# Si no hay audio:
npx remotion render src/Root.tsx <IDComposición> out/<nombre>.mp4 --codec=h264 --crf=18 --muted
Abre el video para que el usuario lo revise.
Fase 4: Revisión
Objetivo: Refinar el video 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 video, ejecuta el protocolo de revisión de references/expert-definitions.md.
Genera una tarjeta de puntuación (ver references/expert-definitions.md para la plantilla completa):
| Dimensión | Prioridad | Puntaje |
|------------------------|-----------|---------|
| Claridad del gancho (primeros 3-5s) | Crítica | ?/5 |
| Mensaje central comunicado | 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 Director de Fotografía sobre la composición visual y el Director Musical sobre el audio (si se añadió música). Sintetiza en:
- Fortalezas - lo que funciona bien
- Mejoras - cambios específicos y procesables
- Veredicto - enviar tal cual, necesita una pasada más, o necesita una 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 video se siente bien.
"Ahora que has visto el video 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, tiempo o visual?
- ¿Algo que falta o que debería cortarse?"
ESPERA los comentarios del usuario.
Cuando el usuario proporciona comentarios:
- Reconoce lo que le gustó (refuerza la dirección)
- Enumera los cambios específicos que harás según sus notas
- Haz los cambios - edita componentes de escena, ajusta el tiempo, corrige texto
- Vuelve a renderizar y presenta el video actualizado
- Pregunta de nuevo: "¿Mejor? ¿Algo más que ajustar?"
Repite este ciclo hasta que el usuario esté satisfecho. Los videos típicos necesitan 1-3 rondas de refinamiento.
Patrones de comentarios comunes y cómo manejarlos:
- "Demasiado rápido" → Aumenta la duración de las escenas en un 30-50%, añade más pausas dramáticas
- "Demasiado texto" → Divide escenas, reduce a 7 palabras por fotograma (estilo Jobs)
- "No se siente premium" → Cambia a la dirección Minimal/Jobs, añade espacio negativo
- "La música no encaja" → Prueba una pista diferente de Pixabay, ajusta la curva de volumen
- "Tono incorrecto" → Revisa la dirección creativa, ajusta la paleta de colores y la velocidad de animación
- "La escena X es confusa" → Simplifica a UNA idea, añade jerarquía visual
Directrices de Adaptación
Cuando el usuario ya tiene un proyecto Remotion
Omite el andamio de las Fases 1-2. Concéntrate en revisar el código existente, sugerir mejoras o añadir nuevas escenas/composiciones.
Cuando el usuario quiere un video rápido (sin deliberación)
Comprime la Fase 1: pregunta el tipo de video + dirección creativa en una sola pregunta. Elige los 2 mejores expertos, genera un escenario breve. Pasa rápidamente a la construcción. Aún pregunta por la música.
Cuando el usuario quiere solo el concepto (sin código)
Ejecuta las Fases 1-2 completamente. Produce el brief creativo y el escenario como documento. Omite la Fase 3.
Cuando el usuario quiere videos multivariantes
Usa el arquetipo de Growth Marketing. Diseña la matriz de variantes (qué cambia por variante). Construye un video base, luego muestra cómo parametrizar las variantes.