podo/design-agent-skills

remotion

Catálogo provisional — paquete completo: remotion-dev/skills

Nota: El repositorio upstream reestructuró la habilidad única remotion en un paquete de sub-habilidades enfocadas: remotion-best-practices, remotion-create, remotion-render, remotion-captions, remotion-docs, remotion-interactivity, remotion-markup, remotion-saas, remotion-upgrade, más mediabunny. Instala el paquete para obtenerlas todas.

Árbol de decisión

1. ¿El paquete ya está instalado? Verifica: el directorio de habilidades de tu agente contiene las habilidades remotion-* con contenido más allá de este stub.

   • Sí → invoca la habilidad remotion-* correspondiente y continúa
   • No → ve al paso 2

2. ¿Qué agente estás usando?

   • Claude Code → npx skills add remotion-dev/skills — o envía ! npx skills add … como mensaje de chat (añade -g para global, omítelo para solo proyecto)
   • Cursor → npx skills add remotion-dev/skills
   • Otro → npx skills add remotion-dev/skills o consulta el README de GitHub

Comando de instalación

npx skills add remotion-dev/skills

Instala todas las sub-habilidades de Remotion. Para instalar solo una, añade su nombre, por ejemplo, npx skills add remotion-dev/skills --skill remotion-best-practices.

Invocar después de la instalación

• Nombres de habilidades: remotion-best-practices, remotion-create, remotion-render, remotion-captions, remotion-docs, remotion-interactivity, remotion-markup, remotion-saas, remotion-upgrade, mediabunny
• Frases de activación: "remotion", "video programático", "video React", "video animado", "renderizar video"

Qué hace

Paquete oficial de habilidades de Remotion para crear videos programáticos con React. Compón secuencias de video como componentes React, anima con física de resortes e interpolación, y renderiza a MP4, WebM o GIF. Las sub-habilidades cubren mejores prácticas, creación de nuevos proyectos (remotion-create), renderizado (remotion-render), subtítulos, interactividad, markup, integración SaaS y actualizaciones de versión. Ideal para demos de productos, visualizaciones basadas en datos y animaciones explicativas que requieren precisión controlada por código.

Cuándo NO usarlo

• Animaciones simples de CSS/JS sin exportación de video (usa gsap-skills o framer-motion-skills)
• Pipelines de video que no usen React (usa hyperframes para HTML a video)