Repolode
Enviar
LottieFiles

LottieFiles/motion-design-skill

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.

Ver en GitHub
Estrellas
2,329
Forks
149
Issues abiertos
1
Último commit
hace 5 meses

¿Qué es?

Motion Design Skill es un conjunto de instrucciones que enseña a los agentes de IA a pensar como diseñadores de movimiento antes de escribir código de animación. Abarca cómo elegir el ritmo, el easing, la coreografía y la intención emocional de un movimiento, en lugar de limitarse a generar código para una biblioteca específica.

La skill adapta los 12 principios de animación de Disney a las interfaces de usuario e incluye una lista de verificación de 8 pasos, arquetipos de personalidad del movimiento y tablas de referencia de duración y easing. También ofrece recetas listas para usar para animaciones de entrada y salida, respuestas de estado como carga, éxito y error, movimiento ambiental en bucle y secuencias escalonadas de varios elementos.

Está diseñada para funcionar con CSS, Framer Motion, GSAP, Lottie y sistemas basados en spring. Se instala con npx skills add y es compatible con más de 40 agentes de programación, incluidos Claude Code, Cursor, Codex y GitHub Copilot.

Funciones clave

  • 01Abarca el ritmo, el easing, la coreografía y la intención emocional antes de la implementación
  • 02Adapta los 12 principios de animación de Disney al trabajo con interfaces de usuario
  • 03Incluye recetas para animaciones de entrada y salida, respuestas de estado, movimiento ambiental y secuencias escalonadas de varios elementos
  • 04Ofrece tablas de consulta de duración y easing, además de una lista de verificación de calidad
  • 05No depende de una biblioteca específica; se puede usar con CSS, Framer Motion, GSAP, Lottie y sistemas de física basados en spring

Casos de uso

  • Añadir animaciones de entrada a componentes de tarjetas o listas en una aplicación web
  • Diseñar transiciones de carga, éxito y error para el botón de envío de un formulario
  • Coreografiar el orden en que aparecen los widgets de un dashboard
  • Revisar código de animación existente según los principios del diseño de movimiento

Inicio rápido

  1. 1

    Instala la skill en tus agentes

    npx skills add LottieFiles/motion-design-skill

Antes de usarlo

  • Es compatible con más de 40 agentes mediante skills.sh, pero el README no documenta la configuración más allá del comando de instalación.

Temas

#agent-skills#animation#motion-design#ui#micro-interactions#easing#lottie

Preguntas frecuentes

¿Qué es motion-design-skill?
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. Motion Design Skill es un conjunto de instrucciones que enseña a los agentes de IA a pensar como diseñadores de movimiento antes de escribir código de animación. Abarca cómo elegir el ritmo, el easing, la coreografía y la intención emocional de un movimiento, en lugar de limitarse a generar código para una biblioteca específica.
¿motion-design-skill es gratuito? ¿Qué licencia tiene?
motion-design-skill es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿motion-design-skill sigue mantenido?
Actualizado en los últimos 6 meses. El último commit de motion-design-skill fue el 18 may 2026.
¿Para qué puedo usar motion-design-skill?
Añadir animaciones de entrada a componentes de tarjetas o listas en una aplicación web Diseñar transiciones de carga, éxito y error para el botón de envío de un formulario Coreografiar el orden en que aparecen los widgets de un dashboard Revisar código de animación existente según los principios del diseño de movimiento
¿Cómo se instala motion-design-skill?
Instala la skill en tus agentes: npx skills add LottieFiles/motion-design-skill
¿Dónde consigo motion-design-skill?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/LottieFiles/motion-design-skill

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados