Communitygithub.com

hiwurun/remotion-saas-boilerplate

Enrutador para todas las habilidades de Remotion

¿Qué es remotion-saas-boilerplate?

Esta habilidad actúa como un enrutador inteligente para todas las habilidades de Remotion, dirigiendo al agente a la documentación y referencia correcta según la tarea solicitada por el usuario. Es útil porque centraliza el acceso a los distintos submódulos de Remotion (creación de videos, proyectos, mapas, multimedia, interactividad, renderizado, subtítulos, SaaS, actualización y documentación API), evitando confusiones y garantizando que se utilicen las mejores prácticas específicas para cada caso. Funciona en plataformas como Claude Code, Cursor y Codex, y su lógica se basa en la detección de palabras clave en las solicitudes del usuario para cargar el archivo REFERENCE.md correspondiente. Por ejemplo, si el usuario pide "crear un video", carga la referencia de creación; si menciona "mapas animados", carga la referencia de mapas. Además, incluye pautas para preservar cambios del usuario, iniciar el Studio correctamente según el cliente de agente utilizado, y recomienda renderizar solo cuando el usuario lo solicite explícitamente.

Compatible con~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/hiwurun/remotion-saas-boilerplate/tree/HEAD/.agents/skills/remotion-best-practices

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 modificaciones en el código fuera de la conversación.

Si detecta un cambio sorprendente realizado mientras tanto, no lo sobrescriba, asuma que fue intencional o solicite confirmación.

Crear un video

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

Configuración de un nuevo proyecto

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

Mejores prácticas de marcado React

Si está escribiendo marcado React de Remotion, cargue Mejores prácticas de marcado de Remotion

Mapas

Para mapas estáticos, rutas animadas y marcadores, explicadores geográficos, Mapbox, MapLibre, MapTiler, GeoJSON o sobrevuelos geográficos 3D, cargue Mapas de Remotion.

Multimedia

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

Mejorar la interactividad

Al estructurar bien el marcado de Remotion, podemos permitir que los usuarios cambien cosas de forma interactiva en el Studio y 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 renderice el video por defecto a menos que sea muy explícito. En su lugar, quiere ver una vista previa interactiva. Tan pronto como el proyecto pueda ejecutarse, inicie Studio y abra la vista previa en el navegador antes de construir o editar la composición. Manténgalo abierto mientras trabaja para que el usuario pueda ver el progreso y dirigir.

Si está usando Cursor

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

npx remotion studio

Si está usando otro agente cliente con un navegador en la aplicación

Puede usar el comando anterior para que Studio abra el navegador, o ejecute:

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 usa --no-open, abra la URL exacta impresa en el navegador de la aplicación y verifique que Studio cargue. Una vez que exista una composición, verifique que su vista previa de video cargue. Si no puede abrirla allí, ejecute Studio sin --no-open. Puede visitar una composición específica navegando a /[composition-id], por ejemplo http://localhost:3000/MapAnimation.

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

Si no tiene un navegador en la aplicación

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 las banderas de la CLI de Studio, cargue Remotion Studio.

Renderizar el video

Solo renderice si el usuario es muy explícito al solicitarlo.
Por ejemplo: "Renderiza el video", "Exportar", "Dame el MP4".

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

npx remotion render

Para más opciones, consulte Renderizado.

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

Subtítulos

Al trabajar con subtítulos, cargue Subtítulos de Remotion.

Crear un SaaS, automatización o aplicación

Use la habilidad Remotion SaaS para obtener conocimiento sobre aplicaciones SaaS impulsadas por Remotion, como <Player>, renderizado en Lambda, Vercel, Cloudflare, a través de 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, cargue Documentos de Remotion.

Actualizar

Para actualizar Remotion, paquetes relacionados, paquetes compatibles de Mediabunny y las habilidades de Remotion Agent instaladas, cargue Actualización de Remotion.

Individual skills in this repo

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

Skills relacionados