Communitygithub.com

GuilhermeGongora/VideoEditor

Enrutador para todas las habilidades de Remotion

¿Qué es VideoEditor?

Este skill actúa como un enrutador central para habilidades de Remotion, dirigiendo al agente de IA a la documentación especializada correcta según la tarea solicitada. Su propósito es simplificar la creación y edición de videos mediante React, cubriendo desde la configuración inicial de proyectos hasta la edición avanzada, mapas, multimedia, interactividad, gráficos animados y subtítulos. El skill soporta plataformas como Claude Code, Cursor y otros agentes con navegador integrado, y se enfoca en abrir Studio como previsualización interactiva antes de renderizar. Al detectar comandos como 'crear video' o 'renderizar', carga los documentos de referencia adecuados (por ejemplo, remotion-create, remotion-render, remotion-captions) y recomienda buenas prácticas, como preservar cambios del usuario, usar Studio para previsualización y solo renderizar cuando se solicite explícitamente un archivo MP4.

Compatible con~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/GuilhermeGongora/VideoEditor/tree/HEAD/.claude/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 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 de 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 React

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

Mapas

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

Multimedia

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

Mejorar la interactividad

Estructurando bien el marcado de Remotion, podemos permitir a los usuarios cambiar cosas interactivamente en el Studio y escribir de vuelta al código. Si es relevante: Mejores prácticas de interactividad

Abrir la previsualización

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

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 en la aplicación

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 previsualización. Si el servidor ya está iniciado, imprimirá la URL. Si usas --no-open, abre la URL exacta impresa en el navegador de la aplicación y verifica que Studio cargue. Una vez que exista una composición, verifica que su previsualización de video cargue. Si no puedes abrirlo 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 soporta herramientas WebMCP. :::

Si no tienes 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 banderas CLI de 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 previsualización 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á del simple npx remotion render, consulta: Mejores prácticas de renderizado

Subtítulos

Cuando trabajes con subtítulos, carga Subtítulos de Remotion.

Crear un SaaS, automatización o aplicación

Usa el skill SaaS de Remotion para 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 documentación actual de Remotion, carga Documentos de Remotion.

Actualizar

Para actualizar Remotion, paquetes relacionados, paquetes compatibles de Mediabunny y Skills de Agente Remotion instalados, carga Actualización de Remotion.

Individual skills in this repo

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

Skills relacionados