Repolode
Submit
LottieFiles

LottieFiles/motion-design-skill

An agent skill that teaches AI coding agents motion design principles for UI animation, covering timing, easing, and choreography across any animation library.

View on GitHub
Stars
2,329
Forks
149
Open issues
1
Last commit
5 months ago

What is it?

Motion Design Skill is a set of instructions for AI agents that gives them a motion designer's way of thinking before any animation code is written. It covers choosing timing, easing, choreography, and the emotional intent behind a motion, rather than only producing code for a specific library.

The skill adapts Disney's 12 animation principles to user interfaces and includes an 8-step checklist, motion personality archetypes, and duration and easing reference tables. It also provides ready-to-use recipes for entrance and exit animations, state feedback such as loading, success, and error, ambient looping motion, and multi-element staggering.

It is designed to work with CSS, Framer Motion, GSAP, Lottie, and spring-based systems. It installs with npx skills add and supports more than 40 coding agents, including Claude Code, Cursor, Codex, and GitHub Copilot.

Key features

  • 01Covers timing, easing, choreography, and emotional intent before implementation
  • 02Adapts Disney's 12 animation principles to UI work
  • 03Includes recipes for entrance/exit, state feedback, ambient motion, and multi-element stagger
  • 04Provides duration and easing lookup tables and a quality checklist
  • 05Library-agnostic, usable with CSS, Framer Motion, GSAP, Lottie, and spring physics

Use cases

  • Adding entrance animations to card or list components in a web app
  • Designing loading, success, and error transitions for a form submit button
  • Choreographing the reveal order of dashboard widgets
  • Reviewing existing animation code against motion design principles

Quick start

  1. 1

    Install the skill for your agents

    npx skills add LottieFiles/motion-design-skill

Things to know

  • Supports 40+ agents via skills.sh, but the README does not document setup beyond the install command.

Topics

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

FAQ

What is motion-design-skill?
An agent skill that teaches AI coding agents motion design principles for UI animation, covering timing, easing, and choreography across any animation library. Motion Design Skill is a set of instructions for AI agents that gives them a motion designer's way of thinking before any animation code is written. It covers choosing timing, easing, choreography, and the emotional intent behind a motion, rather than only producing code for a specific library.
Is motion-design-skill free to use? What license does it have?
motion-design-skill is open source under the MIT license. Check the license terms before using it in commercial products.
Is motion-design-skill still maintained?
Updated within 6 months. The last commit to motion-design-skill was on May 18, 2026.
What can I use motion-design-skill for?
Adding entrance animations to card or list components in a web app Designing loading, success, and error transitions for a form submit button Choreographing the reveal order of dashboard widgets Reviewing existing animation code against motion design principles
How do I install motion-design-skill?
Install the skill for your agents: npx skills add LottieFiles/motion-design-skill
Where can I get motion-design-skill?
The source code and installation instructions are on GitHub: https://github.com/LottieFiles/motion-design-skill

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects