riaz37/remotion-ui

Agente RemotionUI

Utiliza este skill cuando ayudes a los usuarios a construir composiciones completas de Remotion con RemotionUI, no efectos aislados.

Reglas estrictas

• Usa la documentación de Remotion para los fundamentos del framework.
• Usa RemotionUI para componentes fuente prefabricados que se copian en el repositorio del usuario.
• Ejecuta npx remotion-ui@latest add <componente> antes de importar un componente.
• Importa desde rutas locales: @/compositions/..., @/remotion/scenes/..., @/remotion/primitives/...
• Nunca importes componentes de UI desde el paquete npm remotion-ui — este solo incluye una CLI, no una biblioteca de componentes. Los componentes son archivos fuente copiados y pegados, como shadcn/ui.

Reglas de animación en Remotion (obligatorias)

Los componentes de RemotionUI son archivos fuente de Remotion estándar. Todo el movimiento en tiempo de renderizado debe estar impulsado por las primitivas basadas en fotogramas de Remotion, no por APIs de temporización del navegador, porque la salida se renderiza fotograma a fotograma en el servidor, no se reproduce en vivo en un navegador:

• Anima con useCurrentFrame() para leer el fotograma actual, interpolate() para mapear rangos de fotogramas a rangos de valores, y spring() para movimiento físico que se asienta.
• Secuencia el tiempo con <Sequence from={...} durationInFrames={...}> — nunca setTimeout, setInterval, ni requestAnimationFrame.
• Nunca uses transiciones CSS, animaciones CSS (animation/@keyframes), ni clases de utilidad de animación de Tailwind (animate-*, transition-*) para nada que deba aparecer en el video renderizado. Estas se ejecutan en tiempo real en un navegador en vivo y no existen con precisión de fotograma durante el renderizado del lado del servidor de Remotion — se verán incorrectas o estarán completamente ausentes en la salida.
• Está bien usar Tailwind para clases estáticas de diseño/espaciado/color — la regla solo aplica a movimiento/temporización.
• Deriva todos los valores de opacidad/posición/escala/rotación a partir de interpolate(frame, [inputRange], [outputRange], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) o spring({ frame, fps, config }), luego aplícalos mediante style en línea (ej. style={{ opacity, transform: \translateY(${y}px)` }}`).
• Obtén fps de useVideoConfig(), no de una constante fija.

Flujo de trabajo

1. Comprende el objetivo del video (clip social, podcast, historia de datos, introducción de producto).
2. Elige una composición principal de https://remotionui.com/ai/components.json
3. Ejecuta npx remotion-ui doctor si la configuración parece dañada.
4. Instala: npx remotion-ui add <nombre>
5. Importa desde rutas fuente locales y compón en Root.tsx.
6. Personaliza el código fuente copiado para marca, temporización y diseño — siguiendo las reglas de animación anteriores.

Índices del agente

• Componentes: https://remotionui.com/ai/components.json
• Detalle por componente: https://remotionui.com/ai/components/.json
• Guía completa: https://remotionui.com/ai/remotionui-agent.md
• Registro: https://remotionui.com/r/index.json

CLI (amigable para el agente)

npx remotion-ui init --existing          # iniciar remotion-ui.json
npx remotion-ui doctor --json            # diagnosticar configuración
npx remotion-ui search -q caption --json
npx remotion-ui view social-clip --json
npx remotion-ui list --json
npx remotion-ui add social-clip caption-highlight

Proyectos Remotion existentes

cd tu-proyecto-remotion
npx remotion-ui init --existing
npx remotion-ui add social-clip
npm run dev

Valores predeterminados basados en composición

Objetivo	Composición principal
Clip social 9:16	social-clip
Reel de creador	creator-reel
Clip de podcast	podcast-clip
Explicador de datos	data-story
Lanzamiento de producto	intro