LottieFiles motion-design-skill: Motion Principles as an Agent Skill
Universal motion design principles for AI agents — timing, easing, choreography, and Disney animation principles adapted for UI
At a glance
- What is it?
- LottieFiles/motion-design-skill packages timing, easing and choreography rules as a prompt-time skill for AI coding agents. It ships no runtime, so its value depends entirely on whether your agent reads it before writing animation code.
- Who is it for?
- Adopt it if your team already uses a skills-aware agent such as Claude Code, Cursor or Codex and you want animation decisions to be consistent across contributors instead of reinvented per component. Skip it if you need a runtime library, a linter or automated enforcement: this repository contains no code that executes, and the README does not document any way to verify that an agent actually followed the guidance.
- Can I use it commercially?
- Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
- Is it still maintained?
- Yes. The repository last received commits 136 days ago.
- What is it written in?
- GitHub does not report a main language for this repository.
Answers come from the project's GitHub data, last synced on October 1, 2026, and from our analysis. They are not legal advice.
Editorial analysis
What LottieFiles/motion-design-skill solves, and who it is actually for
Most animation code written by AI agents is technically valid and emotionally wrong. A modal fades in over 200ms with a linear curve, a success state snaps into place with no anticipation, and a dashboard loads every element at once because the agent treated each component in isolation. The repository frames the gap as one of intent: the README says the skill teaches agents to think like motion directors, choosing timing, easing, choreography and emotional intent before writing a single line of animation code.
The audience is narrow and specific. It is for teams whose agents already produce UI code and whose reviewers keep sending animation changes back. It is also for solo developers who can tell that a transition feels off but cannot name the reason, since the reference tables give a vocabulary for that. It is not for someone looking for a component library. The repository is philosophy-first and implementation-agnostic by design, and the README states it works with any animation system, naming CSS, Framer Motion, GSAP, Lottie and Spring as examples. The project itself is MIT licensed, and the top-level repository layout is just .gitignore, LICENSE, README.md and a skills directory.
How the skill is structured: SKILL.md, director, patterns and reference
The mechanism is documentation the agent loads, not a library it imports. According to the README, the repository is organised into four layers. SKILL.md is the core file, described as a quick reference containing the 8-step checklist, motion personality archetypes, duration and easing tables, a property selection guide, common patterns and quality rules, and the README states it stays under 500 lines.
The director directory holds the longer essays: core-philosophy.md covers what the README calls the Three Pillars, decision-framework.md holds the full decision pipeline, and separate files cover Disney's 12 principles adapted for UI, four motion personality archetypes, emotion-to-motion mapping, choreography, narrative structure and context adaptation across platform, accessibility and performance. The patterns directory is the practical layer, with entrance-exit.md, state-feedback.md, ambient-continuous.md and multi-element.md. The reference directory is lookup material: timing-easing-tables.md, property-selection.md, quality-checklist.md and troubleshooting.md.
The split matters because it maps to how an agent spends context. A short SKILL.md can sit in the working window for every task, while the deeper files are only pulled in when the task is genuinely about choreography or brand motion identity. The README lists the activation triggers: UI animations such as buttons, cards, modals and page transitions, micro-interactions and feedback, loading, success and error states, scroll-triggered or progress-based animation, brand motion identity, and multi-element sequencing.
Installing motion-design-skill and running a first prompt
The README gives one install command, run through npx, and states it supports more than 40 agents including Claude Code, Cursor, Codex and GitHub Copilot. Run it from your project directory:
npx skills add LottieFiles/motion-design-skillAfter the command completes, your agent should expose the skill. The README does not document the exact confirmation output for each of the 40+ agents, so check your agent's own skill list rather than assuming. The repository has no releases, so there is no version to pin; the command pulls whatever is on the main branch at the time you run it.
The first real use is a prompt, not an API call. The README gives these examples verbatim:
Add a playful entrance animation to these card componentsChoreograph the entrance sequence for this dashboard — hero chart first, then stats cards, then sidebarWhat you should see is animation code whose durations, easing curves and ordering follow the tables in reference/timing-easing-tables.md instead of the agent's defaults. If the output looks identical to what you got before installing, the skill is not being loaded, and the README offers no diagnostic for that case. The README also lists a review prompt, asking the agent to suggest improvements to existing animation code based on motion design principles, which is the cheapest way to confirm the skill is active on work you have already reviewed.
The activation boundary: when the skill stays silent
The README lists what triggers the skill, and the inverse list is just as important. If your task is a static layout, a data-fetching refactor or a colour-token migration, the skill contributes nothing, which is the intended behaviour of a scoped skill but also means it will not make your agent better at anything outside motion.
The sharper limitation is verification. There is no linter, no test, no runtime hook in the repository layout. Nothing checks that a generated animation uses the duration from the table rather than 300ms chosen at random. An agent can load the skill, produce a transition that ignores every rule in it, and nothing in the repository will flag that. For a team that needs guaranteed conformance, for example a design system where every transition must come from an approved token set, this is the wrong tool. The right tool there is a lint rule or a token layer that fails a build.
The second boundary is that guidance is not enforcement across agents either. The README claims support for more than 40 agents, but the depth of that support is not described. Whether Cursor and Codex consume the director files the same way Claude Code does is not documented, so behaviour may vary by host.
How it differs from a motion library such as Framer Motion or GSAP
The obvious comparison is with the libraries the README names as compatible: CSS, Framer Motion, GSAP, Lottie and Spring. The difference is categorical. Framer Motion and GSAP execute animation in the browser and expose APIs such as variants, timelines and springs; they answer how to animate. This repository answers what to animate, for how long, in what order, and why. It has no runtime, no bundle, and no effect on shipped bytes. You can use it with any of those libraries or with none.
That also means it does not replace them. If your problem is that a drag interaction needs physics, the skill will not solve it; a spring library will. The skill's contribution is upstream of the code, in the choices the agent makes before reaching for the library. The comparison that matters is therefore not against Framer Motion but against doing nothing: an agent with no motion guidance defaults to whatever patterns dominate its training data, which the README's troubleshooting file implicitly treats as a source of animation smells. Installing the skill is an attempt to shift those defaults toward a stated set of rules, and the honest test is whether your diffs get shorter or your review comments get fewer.
Maintenance, licence and the cost of upgrading
The repository is not archived, and the last push was on 2026-05-18. That is roughly four months before the current date, so it is recent enough to suggest the project is not abandoned, but there are no releases and no changelog in the repository, which means there is no versioned upgrade path.
Upgrade cost is therefore close to zero and also uncontrolled. Running npx skills add again pulls the current main branch, and because the content is prose rather than code, a change cannot break your build. It can change your agent's output. A revised easing table or a rewritten choreography file will silently shift the animations your agent generates, and with no releases there is no diff to review before you take it. Teams that need reproducibility should vendor a copy of the skills directory into their own repository rather than re-running the install command.
The licence is MIT, stated in the README and in the LICENSE file at the repository root. That permits commercial use and modification with attribution and without warranty. The README does not discuss attribution requirements for generated output, and nothing here constitutes legal advice; if you redistribute the skill files inside a product, read the LICENSE file itself.
Editorial conclusion
Adopt it if your team already uses a skills-aware agent such as Claude Code, Cursor or Codex and you want animation decisions to be consistent across contributors instead of reinvented per component. Skip it if you need a runtime library, a linter or automated enforcement: this repository contains no code that executes, and the README does not document any way to verify that an agent actually followed the guidance. Before rolling it out, install it with npx skills add LottieFiles/motion-design-skill, confirm your agent lists the skill, and run one real prompt such as "Choreograph the entrance sequence for this dashboard" to see whether the output changes.
Frequently asked questions
What skills does a motion designer need?
This repository answers that for AI agents rather than people: SKILL.md carries an 8-step checklist, motion personality archetypes, duration and easing tables, a property selection guide and quality rules, with deeper material on Disney's 12 principles adapted for UI, choreography and emotion-to-motion mapping.
Is motion design a good career?
The repository does not address careers. It is a set of motion design principles packaged for AI coding agents, covering timing, easing, choreography and Disney's animation principles adapted for UI.
Will motion designers be replaced by AI?
The repository takes no position on that, but its framing is telling: the README says the skill teaches agents to think like motion directors, choosing timing, easing, choreography and emotional intent before writing animation code. The judgment it encodes comes from motion design practice.
What does a motion designer do?
The skill's contents describe the work in agent terms: choosing timing, easing, choreography and emotional intent, coordinating multi-element sequences, and adapting motion to platform, accessibility and performance constraints.
Official sources
Add this badge to your README
If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.
[](https://hysenlabs.com/projects/lottiefiles-motion-design-skill)