OfficialVideo y animacióngithub.com

remotion-mejores-practicas

Enrutador para todas las habilidades de Remotion

¿Qué es remotion-mejores-practicas?

Esta habilidad actúa como un enrutador central para todas las habilidades de Remotion, guiando a los agentes de IA hacia las guías de referencia apropiadas según la tarea del usuario. Abarca múltiples dominios: creación de nuevos videos y composiciones, configuración de proyectos, mejores prácticas de marcado en React, integración de mapas (Mapbox, MapLibre, etc.), manipulación de multimedia (recorte, metadatos), interactividad en el estudio y captions. También cubre el lanzamiento del estudio de vista previa, renderizado de videos, actualización de paquetes y construcción de aplicaciones SaaS con Remotion. Soporta clientes como Cursor y otros agentes con navegador integrado, proporcionando comandos específicos para cada caso. La habilidad preserva cambios inesperados del usuario y evita sobrescribirlos, garantizando un flujo de trabajo colaborativo y seguro. Es útil para desarrolladores que usan Remotion y buscan optimizar su productividad con asistencia contextual precisa.

Compatible con~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/remotion-dev/skills/tree/main/skills/remotion-best-practices

Installed? Explore more Video y animación skills: steipete/video-frames, steipete/summarize, openclaw/openclaw · View all 6 →

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Preservar cambios del usuario

Los usuarios pueden realizar ediciones en el código fuera de la conversación.

Si detectas un cambio sorprendente realizado mientras tanto, no lo sobrescribas; asume que fue intencional o pide confirmación.

Crear un video

Si el usuario pide hacer, crear o construir un nuevo video o composición, carga Crear un nuevo video en Remotion, ya exista o no un proyecto de Remotion.

Configuración de nuevo proyecto

Si no existe actualmente un proyecto de Remotion, carga Crear un nuevo proyecto de Remotion

Mejores prácticas de marcado en React

Si estás escribiendo marcado de Remotion en React, carga Mejores prácticas de marcado en Remotion

Mapas

Para mapas estáticos, rutas animadas y marcadores, explicaciones geográficas, Mapbox, MapLibre, MapTiler, GeoJSON, o sobrevuelos geográficos 3D, carga Mapas en Remotion.

Multimedia

Para lograr tareas multimedia en el navegador, como recortar, cortar videos u obtener metadatos de ellos, carga Multimedia en Remotion

Mejorar la interactividad

Estructurando bien el marcado de Remotion, podemos permitir que los usuarios cambien cosas de forma interactiva en el Studio y las escriban de vuelta al código. Si es relevante: Mejores prácticas de interactividad

Abrir la vista previa

Si el usuario pide "hacer" un video, "crear" un video, etc. No renderices el video por defecto a menos que sea muy explícito. En su lugar, quieren ver una vista previa interactiva. Tan pronto como el proyecto pueda ejecutarse, inicia el Studio y abre la vista previa en el navegador antes de construir o editar la composición. Mantenlo abierto mientras trabajas para que el usuario pueda ver el progreso y dirigir.

Si estás usando Cursor

Ejecuta Studio sin --no-open para que abra el navegador automáticamente:

npx remotion studio

Si estás usando otro agente cliente con un navegador integrado

Puedes usar el comando anterior para que Studio abra el navegador, o ejecutar:

npx remotion studio --no-open

Esto iniciará un proceso de larga duración e imprimirá la URL del servidor para la vista previa. Si el servidor ya está iniciado, imprimirá la URL. Si usas --no-open, abre la URL exacta impresa en el navegador integrado y verifica que Studio cargue. Una vez que exista una composición, verifica que su vista previa de video cargue. Si no puedes abrirla allí, ejecuta Studio sin --no-open. Puedes visitar una composición específica navegando a /[composition-id], por ejemplo http://localhost:3000/MapAnimation.

:::nota El Studio admite herramientas WebMCP. :::

Si no tienes un navegador integrado

Esto abrirá el Studio en el navegador o lo reenfocará si ya está abierto.

npx remotion studio

Más opciones

Para lanzar un proyecto en Remotion Studio, abrir su URL local exacta, o configurar banderas CLI del Studio, carga Remotion Studio.

Renderizar el video

Solo renderiza si el usuario es muy explícito al pedirlo. Por ejemplo: "Renderiza el video", "Exporta", "Dame el MP4".

La vista previa también tiene una interfaz de renderizado más intuitiva, así que considera usarla en lugar de la línea de comandos para renderizar.

npx remotion render

Para más opciones, consulta Renderizado.

Para renderizado avanzado más allá de un simple npx remotion render, consulta: Mejores prácticas de renderizado

Captions

Al trabajar con captions, carga Captions en Remotion.

Crear un SaaS, automatización o aplicación

Usa la habilidad SaaS de Remotion para obtener conocimiento sobre aplicaciones SaaS impulsadas por Remotion, como <Player>, renderizado en Lambda, Vercel, Cloudflare, mediante Express.js, renderizado del lado del cliente, o para encontrar la plantilla SaaS adecuada.

Consultar APIs y documentación de Remotion

Para encontrar y leer la documentación actual de Remotion, carga Documentación de Remotion.

Actualizar

Para actualizar Remotion, paquetes relacionados, paquetes compatibles de Mediabunny y las habilidades instaladas del agente Remotion, carga Actualización de Remotion.

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

Skills relacionados