Una skill de agente para Claude Code y Codex que convierte el movimiento generado por IA en animaciones web controladas por scroll, mouse, arrastre, toque u orientación del dispositivo.
2,6 mil197PythonMITActualizado hace 16 días
frankxai/awesome-motion-design-agent-skills
Lista seleccionada de recursos de motion design y cinco skills instalables para agentes, compatibles con GSAP, Motion, Remotion, Lottie y Rive.
- Estrellas
- 69
- Forks
- 20
- Issues abiertos
- 5
- Último commit
- hace 7 días
¿Qué es?
Esta lista reúne recursos de motion design pensados para agentes de programación con IA. Incluye bibliotecas de animación web como GSAP, Motion, Anime.js y React Three Fiber, herramientas de video como Remotion y runtimes para Lottie y Rive, además de paquetes de skills de terceros para agentes que trabajan con el mismo stack.
El repositorio también incluye cinco skills propias en formato SKILL.md. Abarcan la animación de interfaces de producto y la elección del stack, la coreografía cinematográfica de sitios web, el video determinista en React, el enrutamiento de medios generativos y el control de calidad de motion para revisar y capturar animaciones web. Las pautas también contemplan una alternativa para reducir el movimiento y la verificación en dispositivos reales.
Las skills se pueden instalar con npx skills add en muchos agentes, desde el marketplace de plugins de Claude Code o cargando archivos zip en Claude.ai. El proyecto se publica bajo la licencia CC0-1.0.
Funciones clave
- 01Lista seleccionada de recursos para GSAP, Motion, Remotion, Lottie y Rive
- 02Cinco skills en formato SKILL.md para animación de interfaces, coreografía de sitios web, video en React y control de calidad de motion
- 03Instalable con npx skills add, desde el marketplace de plugins de Claude Code o mediante la carga de archivos zip
- 04Incluye rúbricas de calidad de motion y especificaciones de motion para sitios web
- 05Enumera paquetes de skills de terceros para agentes con comandos de instalación
Casos de uso
- Orientar a un agente de programación al crear interfaces de producto animadas
- Generar videos mediante código React con Remotion
- Revisar la calidad de motion de las animaciones web antes de publicarlas
- Encontrar bibliotecas de animación y paquetes de skills mantenidos para un stack de motion
Inicio rápido
- 1
Instala las cinco skills en tu agente con un solo comando
npx skills add frankxai/awesome-motion-design-agent-skills - 2
Verifica las skills instaladas
npx skills list
Antes de usarlo
- Este repositorio es principalmente una lista seleccionada de enlaces, y muchos de sus elementos apuntan a proyectos de terceros que tendrás que revisar por separado.
- Al instalar skills, se ejecutan instrucciones dentro de tu agente, por lo que el README recomienda revisar los paquetes de terceros antes de usarlos.
Temas
Preguntas frecuentes
- ¿Qué es awesome-motion-design-agent-skills?
- Lista seleccionada de recursos de motion design y cinco skills instalables para agentes, compatibles con GSAP, Motion, Remotion, Lottie y Rive. Esta lista reúne recursos de motion design pensados para agentes de programación con IA. Incluye bibliotecas de animación web como GSAP, Motion, Anime.js y React Three Fiber, herramientas de video como Remotion y runtimes para Lottie y Rive, además de paquetes de skills de terceros para agentes que trabajan con el mismo stack.
- ¿awesome-motion-design-agent-skills es gratuito? ¿Qué licencia tiene?
- awesome-motion-design-agent-skills es open source bajo la licencia CC0-1.0. Revisa los términos de la licencia antes de usarlo en productos comerciales.
- ¿awesome-motion-design-agent-skills sigue mantenido?
- Mantenimiento activo. El último commit de awesome-motion-design-agent-skills fue el 14 oct 2026.
- ¿Para qué puedo usar awesome-motion-design-agent-skills?
- Orientar a un agente de programación al crear interfaces de producto animadas Generar videos mediante código React con Remotion Revisar la calidad de motion de las animaciones web antes de publicarlas Encontrar bibliotecas de animación y paquetes de skills mantenidos para un stack de motion
- ¿Cómo se instala awesome-motion-design-agent-skills?
- Instala las cinco skills en tu agente con un solo comando: npx skills add frankxai/awesome-motion-design-agent-skills Verifica las skills instaladas: npx skills list
- ¿Dónde consigo awesome-motion-design-agent-skills?
- El código fuente y las instrucciones de instalación están en GitHub: https://github.com/frankxai/awesome-motion-design-agent-skills
Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.
Proyectos relacionados
Conjunto de skills instalables que orientan a agentes de programación con IA sobre diseño de movimiento, After Effects, videos con Remotion, animación de logos y fondos animados.
14028HTMLMITActualizado hace 4 meses
Una skill para agentes de IA que les enseña principios de diseño de movimiento para animaciones de interfaz, incluidos el ritmo, el easing y la coreografía, en cualquier biblioteca de animación.
2,3 mil149MITActualizado hace 5 meses
Una skill para Claude Code y Codex que convierte páginas de producto en videos promocionales cinematográficos con código de Remotion, no con IA generativa.
12,5 mil1,1 milTypeScriptApache-2.0Actualizado hace 3 días
Conjunto de Agent Skills que enseñan a agentes de programación con IA, como Claude Code, Codex y Cursor, buenas prácticas para crear proyectos de video con Remotion.
5,4 mil592TypeScriptSin licenciaActualizado hace 5 días
Una skill de Claude Code para dirigir cortometrajes en 51 estilos, creados por completo con código y sin modelos de generación de video.
3,9 mil440JavaScriptMITActualizado ayer