remotion-best-practices

Overview

What is the remotion-best-practices skill?

La skill remotion-best-practices es un conjunto curado de guías y reglas para crear videos con Remotion, el framework de creación de video basado en React. Reúne patrones específicos del dominio para animaciones, audio, subtítulos, uso de FFmpeg, recursos, escenas 3D y más en archivos de reglas enfocados dentro de rules/.

En lugar de tener que armar ejemplos desde cero, esta skill te da recomendaciones con opinión sobre cómo estructurar código de Remotion para que renderice de forma confiable, escale a proyectos complejos y siga siendo mantenible con el tiempo.

Who is this skill for?

Instala esta skill si:

• Creas videos de marketing, producto o redes sociales usando Remotion y React
• Necesitas generar videos de forma programática (por ejemplo, contenido basado en datos o plantillas)
• Trabajas con contenido muy centrado en audio como podcasts, audiograms o visualizadores de música
• Quieres patrones claros para subtítulos, captions y flujos de trabajo con SRT
• Estás añadiendo contenido 3D o Three.js a tus composiciones de Remotion

Es útil para frontend engineers, motion designers que programan y equipos que quieren estandarizar cómo escriben proyectos en Remotion.

What problems does it solve?

La skill Remotion best-practices te ayuda a resolver problemas prácticos que aparecen en proyectos reales de Remotion, como por ejemplo:

• Hacer que todas las animaciones se basen en frames para que los renders sean estables y deterministas
• Importar y referenciar correctamente imágenes, videos, audio y fuentes mediante la carpeta public/ y staticFile()
• Crear composiciones de video limpias con tiempos, transiciones y parámetros consistentes
• Gestionar el audio (capas, recortes, retrasos, volumen, velocidad, loops, SFX)
• Generar visualizaciones de audio (barras de espectro, formas de onda, efectos reactivos a los graves)
• Trabajar con captions y subtítulos, incluyendo importación de SRT y transcripción
• Usar FFmpeg para tareas como recortar, extraer frames o detectar silencios
• Integrar 3D usando Three.js y React Three Fiber a través de @remotion/three
• Calcular dinámicamente los metadatos de las composiciones (duración, dimensiones, props) antes de renderizar
• Validar la compatibilidad de los medios con Mediabunny antes de renderizar

Si estás construyendo algo que vaya más allá de un demo trivial de Remotion, estas reglas te dan patrones probados en escenarios reales de producción.

When is this skill a good fit?

Usa la skill remotion-best-practices cuando:

• Tu proyecto ya usa Remotion o estás evaluando Remotion para generación de video
• Quieres guías consistentes sobre animaciones, assets, audio, subtítulos y 3D
• Necesitas ejemplos a nivel de código y no solo documentación de alto nivel

No es un sustituto de la documentación principal de Remotion ni un tutorial completo para aprender React. Parte de que ya te sientes cómodo con los fundamentos de React y al menos has revisado la documentación de Remotion.

How to Use

1. Installation and setup

Install the skill into your agent environment

Usa el gestor de skills para añadir la skill Remotion best-practices desde el repositorio upstream:

npx skills add https://github.com/remotion-dev/skills --skill remotion

Esto pone el conocimiento de remotion-best-practices a disposición de tu agente para que pueda consultar los archivos de reglas cuando te ayude con tu proyecto de Remotion.

Review the core documentation files

Una vez instalada, abre primero estos archivos:

• SKILL.md – Descripción general, cuándo usarla y enlaces a los archivos de reglas clave
• rules/animations.md – Cómo controlar animaciones con useCurrentFrame() y useVideoConfig()
• rules/assets.md – Cómo importar correctamente imágenes, videos, audio y fuentes
• rules/audio.md – Trabajo con audio, recortes, retrasos y capas
• rules/audio-visualization.md – Datos de audio, formas de onda y visualizaciones de espectro
• rules/3d.md – Escenas 3D usando Three.js y React Three Fiber a través de @remotion/three

Estas reglas te dan la base para la mayoría de flujos de trabajo de edición de video en Remotion.

2. Core concepts and best practices

Drive all animations by frame

Consulta rules/animations.md para el principio central de animación en Remotion:

• Usa useCurrentFrame() para leer el frame actual
• Usa useVideoConfig() para obtener los fps
• Calcula los tiempos de animación en segundos y conviértelos a frames (seconds * fps)
• Usa helpers como interpolate() para mapear frames a posiciones, opacidad u otras propiedades
• Evita transiciones CSS, animaciones CSS y clases de animación de Tailwind; no se renderizan de forma confiable en Remotion

Este enfoque basado en frames garantiza resultados consistentes independientemente de la velocidad de reproducción o el entorno.

Manage assets via public/ and staticFile()

El archivo rules/assets.md define cómo tratar los medios:

• Coloca todos los medios estáticos (imágenes, fuentes, audio, video) en la carpeta public/
• Usa staticFile("my-file.ext") para referenciar assets dentro de public/
• Combina staticFile() con componentes de Remotion como <Img>, <Video>, <Audio>
• Usa URLs remotas directamente cuando el archivo esté alojado en la web

Este patrón evita rutas rotas, se encarga del encoding de URLs y funciona en distintos despliegues.

Build robust audio and sound design

El archivo rules/audio.md cubre flujos de trabajo específicos de audio:

• Importa audio con <Audio> de @remotion/media
• Recorta segmentos de audio con trimBefore y trimAfter (basados en frames)
• Retrasa audio o sincronízalo con las visuales usando wrappers <Sequence>
• Superpone varios componentes <Audio> para música, locución y efectos de sonido

Para visuales impulsados por audio, combínalo con rules/audio-visualization.md para:

• Instalar @remotion/media-utils
• Usar useWindowedAudioData() para leer muestras de audio en una ventana de tiempo
• Usar visualizeAudio() para producir datos de frecuencia para barras de espectro

Esto facilita la creación de audiograms, títulos reactivos al ritmo y visualizaciones de música.

Handle captions and subtitles

El SKILL.md principal te indica las reglas relacionadas con captions:

• rules/subtitles.md – Patrones de uso de subtítulos
• rules/display-captions.md – Renderizado de captions en pantalla
• rules/import-srt-captions.md – Importación de archivos de subtítulos SRT
• rules/transcribe-captions.md – Flujos de trabajo orientados a transcripción

Úsalas cuando necesites:

• Subtítulos quemados (burned-in) para contenido social
• Pistas de subtítulos por idioma
• Flujos de trabajo de subtitulación automatizados o semiautomatizados

Use FFmpeg for advanced video operations

La guía rules/ffmpeg.md explica cuándo usar FFmpeg junto con Remotion para operaciones como:

• Recortar o concatenar videos de origen
• Detectar silencios en audio
• Extraer frames o crear GIFs

Remotion se centra en el renderizado; FFmpeg se encarga del trabajo pesado sobre archivos de medios en bruto. Combinar ambos suele ser el enfoque más eficiente para pipelines de video en producción.

Bring in 3D with Three.js and React Three Fiber

Si quieres escenas 3D en tus videos de Remotion, revisa rules/3d.md:

• Instala el paquete @remotion/three con el comando recomendado npx remotion add @remotion/three (o el equivalente para tu gestor de paquetes)
• Envuelve el contenido 3D en <ThreeCanvas> y pasa width y height desde useVideoConfig()
• Configura una iluminación básica (por ejemplo, ambientLight y directionalLight)
• Controla todas las animaciones 3D usando useCurrentFrame() en lugar de useFrame() de @react-three/fiber

Esto garantiza que tu contenido 3D se renderice correctamente frame a frame sin parpadeos ni desincronización.

3. Dynamic compositions and metadata

Calculate duration and dimensions dynamically

El archivo rules/calculate-metadata.md muestra cómo usar calculateMetadata en una <Composition> para:

• Ajustar durationInFrames en función de datos externos (por ejemplo, la duración de un video de entrada)
• Hacer coincidir las dimensiones de la composición con un video de entrada u otros valores dinámicos
• Transformar props antes de que comience el renderizado

Combinado con helpers como rules/get-video-duration.md y rules/get-video-dimensions.md, esto te permite:

• Autoajustar el tamaño de tu composición al contenido subido
• Asegurar que intros y outros encajen exactamente con la duración del medio

Es especialmente útil para sistemas de video generados por usuarios o basados en plantillas.

4. Media validation and compatibility

Check if a video can be decoded

La guía rules/can-decode.md introduce Mediabunny para comprobaciones de compatibilidad:

• Instala Mediabunny con npx remotion add mediabunny
• Usa el helper canDecode() para comprobar si un video con origen por URL puede ser decodificado por el navegador
• Usa la variante canDecodeBlob() para fuentes subidas como Blob

Es útil cuando construyes flujos de subida de archivos y necesitas verificar los medios antes de iniciar un render costoso.

5. Additional focused rules

Además de los temas centrales, rules/ incluye guías especializadas que puedes consultar según las necesites:

• rules/compositions.md – Cómo estructurar y gestionar tus composiciones de Remotion
• rules/timing.md, rules/sequencing.md, rules/transitions.md, rules/text-animations.md – Control detallado del movimiento y el timing
• rules/fonts.md, rules/measuring-text.md, rules/measuring-dom-nodes.md – Precisión tipográfica y de maquetación
• rules/gifs.md, rules/images.md, rules/videos.md, rules/transparent-videos.md, rules/trimming.md, rules/extract-frames.md – Trabajo con distintos formatos y operaciones de medios
• rules/maps.md, rules/charts.md, rules/lottie.md, rules/light-leaks.md – Patrones visuales específicos de dominio
• rules/voiceover.md, rules/sfx.md – Flujos de trabajo de voz y efectos de sonido
• rules/tailwind.md – Uso de Tailwind de manera compatible con Remotion (excluyendo las clases de animación prohibidas)

Puedes consultarlas de forma selectiva según las funcionalidades que requiera tu proyecto.

6. Workflow tips for using this skill

With an AI agent

Si utilizas un asistente de IA que tenga instalada esta skill:

• Pídele que abra un archivo de reglas específico (por ejemplo, rules/audio.md) cuando necesites ejemplos en mayor profundidad
• Deja que genere fragmentos de código que cumplan las reglas (sin transiciones CSS, todas las animaciones vía useCurrentFrame(), uso correcto de staticFile(), etc.)
• Usa la skill como checklist al revisar o refactorizar tu código de Remotion

In a team setting

Para equipos, estandariza el uso de esta skill:

• Compartiendo enlaces a los archivos rules/*.md relevantes en tu documentación interna
• Adoptando patrones de la skill en tus guías de estilo de código
• Usándola como referencia al incorporar desarrolladores a proyectos con Remotion

FAQ

Is this skill the same as the Remotion framework?

No. Remotion es el framework base para crear videos con React. La skill remotion-best-practices es una colección de buenas prácticas y archivos de reglas que se sitúan por encima de Remotion para guiar cómo estructuras el código, gestionas los medios y evitas errores habituales.

Do I need to know React to benefit from this skill?

Sí. El ecosistema de Remotion se basa en React, y los ejemplos de los archivos de reglas asumen que entiendes componentes, props y hooks. La skill se centra en aspectos específicos de Remotion, no en enseñar React desde cero.

How do I install the Remotion best-practices skill?

Instálala en tu agente o entorno de skills con:

npx skills add https://github.com/remotion-dev/skills --skill remotion

Después abre SKILL.md y la carpeta rules/ para explorar los temas disponibles.

Can I use this skill without a Remotion project yet?

Puedes leer el contenido y los ejemplos sin tener aún un proyecto, pero es mucho más útil cuando ya cuentas con un workspace de Remotion. Muchas reglas hacen referencia a paquetes como @remotion/media, @remotion/media-utils, @remotion/three o Mediabunny que querrás instalar directamente en tu proyecto.

Does this skill cover 3D content with Three.js?

Sí. El archivo rules/3d.md está dedicado al contenido 3D en Remotion usando Three.js y React Three Fiber a través de @remotion/three. Explica cómo instalar el paquete, envolver el contenido en <ThreeCanvas> y controlar las animaciones con useCurrentFrame().

Where do I find guidance on audio visualizations and audiograms?

Usa rules/audio-visualization.md. Muestra cómo instalar @remotion/media-utils, obtener datos de audio con useWindowedAudioData() y transformarlos con visualizeAudio() para crear barras de espectro y formas de onda para audiograms.

What if I need to work with captions and subtitles?

Empieza por SKILL.md, que apunta a:

• rules/subtitles.md para patrones generales de subtítulos
• rules/display-captions.md para el renderizado en pantalla
• rules/import-srt-captions.md para la importación de archivos SRT
• rules/transcribe-captions.md para flujos de trabajo de transcripción

Estas guías cubren la mayoría de necesidades de subtitulación en videos basados en Remotion.

When should I use FFmpeg instead of pure Remotion code?

Usa FFmpeg cuando necesites operaciones sobre archivos de medios en bruto, como recortes precisos, concatenación, detección de silencios o extracción de frames. Remotion destaca en componer y renderizar escenas en React. rules/ffmpeg.md explica cómo y cuándo integrar FFmpeg junto con tu pipeline de Remotion.

Can this skill help me avoid performance and rendering issues?

Sí. Muchas de las reglas existen específicamente para evitar problemas comunes, como:

• Escenas 3D que parpadean cuando se usa useFrame() en lugar de useCurrentFrame()
• Animaciones que no se renderizan porque dependen de transiciones CSS
• Rutas de assets rotas y URLs mal codificadas
• Medios que fallan durante el render porque no se pueden decodificar

Seguir los patrones de rules/animations.md, rules/assets.md, rules/3d.md y rules/can-decode.md te ayudará a construir proyectos de Remotion más robustos.

How do I explore all available rule files?

Después de la instalación, abre el directorio rules/ en tu entorno. Archivos clave incluyen:

• rules/3d.md
• rules/animations.md
• rules/assets.md
• rules/audio-visualization.md
• rules/audio.md
• rules/ffmpeg.md
• rules/compositions.md
• rules/timing.md
• rules/subtitles.md
• rules/voiceover.md

Usa la pestaña de archivos o tu editor para explorar el resto y acceder a temas más especializados como charts, maps, GIFs y Tailwind.