thedixitjain/the-mega-skill-library

Remotion Video Builder

Es posible que tu conocimiento de Remotion esté desactualizado. Cuando el comportamiento exacto de la API sea importante, prefiere el servidor MCP oficial remotion-documentation o la documentación en remotion.dev.

Comienza aquí

• Si el proyecto aún no existe, créalo con npx create-video@latest y prefiere la plantilla en blanco.
• Mantén cada paquete remotion y @remotion/* exactamente en la misma versión y evita los rangos con caret.
• Estructura de entrada estándar:
  • src/index.ts llama a registerRoot()
  • src/Root.tsx registra todos los videos con <Composition> o <Still>

Orden de construcción

1. Primero modela el contrato de entrada:
   • esquema de props de nivel superior
   • datos de la línea de tiempo o eventos
   • perfil de renderizado
2. Define props compartidos con zod y pasa el esquema a cada <Composition>.
3. Usa calculateMetadata para derivar durationInFrames, width, height, props transformados y defaultOutName.
4. Construye la estructura de escenas con <Series> para el orden narrativo y <Sequence> para superposiciones, entradas, ventanas de metraje y llamadas.
5. En proyectos de Remotion v4.x, establece explícitamente premountFor en elementos <Sequence> que necesiten cargar activos antes de aparecer.
6. Agrega datos de muestra y scripts de renderizado antes de pulir la animación.

Valores predeterminados y reglas

• Usa por defecto fps={30} y 1920x1080 para orientación horizontal a menos que el briefing indique lo contrario.
• Usa AbsoluteFill para las capas.
• Usa staticFile() para todo lo que provenga de public/.
• Usa useCurrentFrame() y useVideoConfig() para la lógica basada en fotogramas.
• Prefiere movimiento sutil:
  • spring() con alto amortiguamiento
  • interpolate() con sujeción
• No uses Math.random(). Usa random(seed) de remotion.
• Mantén la animación de texto simple y legible.
• Mantén las salidas horizontal y vertical con la misma lógica de negocio a menos que el briefing realmente requiera divergencia.

Lista de verificación para video parametrizado

• Un único esquema z.object() compartido de nivel superior
• defaultProps que coincidan con la forma de las props del componente
• calculateMetadata que devuelva duración o dimensiones dinámicas cuando lo requieran las entradas
• Datos de muestra en JSON o TypeScript para vista previa local
• Scripts de renderizado para cada salida objetivo

Estrategia de metraje

Soporta al menos estos modos cuando el metraje es opcional:

• none
• placeholder
• real

La línea de tiempo y las superposiciones aún deben renderizarse cuando no haya metraje real.

Video de lanzamiento de Millrace

Si la solicitud es sobre Millrace o el pipeline de video de lanzamiento, lee references/millrace-launch-video.md antes de implementar.

Referencias

• references/remotion-core.md
• references/millrace-launch-video.md

---

Fuente: hashgraph-online/awesome-codex-plugins → plugins/tim-osterhus/codex-remotion-plugin/skills/remotion-video-builder/SKILL.md