Motion Design

LottieFiles' Motion Design skill is pure guidance: 17 Markdown files that teach an agent to make motion decisions before it writes animation code. It is deliberately implementation-agnostic — the same instructions apply to CSS transitions, Motion, GSAP, Lottie, or a spring engine.

Nothing in the folder executes. There is no package, no script, no MCP server, and no library install.

Source and revision

What the skill actually contains

The main SKILL.md is a ~12.6 KB quick reference. It is backed by three folders that the agent opens only when a topic needs depth:

The reference tables are the part most agents will actually use. Examples:

• Durations by element: tooltip 80–120 ms, button press 120–180 ms, card 200–350 ms, modal 300–400 ms, page transition 400–600 ms.
• Directional easing: entrances decelerate (ease-out), exits accelerate (ease-in), on-screen movement uses both ends (ease-in-out).
• Distance scaling: 100 px is the base duration; 200 px is 1.3×, 400 px is 1.6×.
• Choreography: no motion travels more than one third of the screen without a keyframe change, and no more than one third of elements are in active motion at once.

The four "CRITICAL" quality rules in SKILL.md are the clearest statement of the skill's taste:

1. Never use linear easing for spatial movement (spinners and progress bars excepted).
2. Never change an important state with opacity alone — pair it with position or scale.
3. Never cross a third of the screen without an intermediate keyframe.
4. Always build three layers: primary action, secondary detail, ambient life.

How it steers an agent

The skill uses the standard progressive-disclosure contract: only its name and description sit in context until a request matches animation work. Then the agent loads the checklist and can follow links into director/, patterns/, and reference/.

That matters for two reasons:

• It costs almost nothing when idle.
• It gives the agent a decision order — emotional target, personality, property, duration, easing, staging, layers, distance — instead of letting it jump straight to a spring config.

The skill does not generate code, run a browser, or verify the result. It supplies vocabulary and constraints that the agent applies to whatever animation system the project already uses.

Illustrative example: a premium modal

This is a constructed example built from the upstream tables, not output from a test run.

The skill's decision path for a settings modal would be:

1. Emotional target: calm and controlled, not playful.
2. Personality: Premium — 350–600 ms, cubic-bezier(0.4, 0, 0.2, 1), no overshoot.
3. Primary property: position plus opacity; secondary: backdrop and shadow; ambient: none (the page behind is dimmed).
4. Duration: 350 ms in, shorter out (entrances are specified 30–50% longer than exits).
5. Check: one accent, three layers, no full-screen travel without a keyframe.

/* Constructed example: follows the Premium row of the duration/easing tables */
.modal {
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition:
    opacity 350ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.modal[data-open="true"] {
  opacity: 1;
  transform: none;
}

The tables are heuristics, not measurements. The value of the skill is consistency: every modal in the project gets the same curve and the same duration band instead of a new guess each time.

LottieFiles Motion Design is not Motion AI Kit

These two entries are easy to confuse because both are "motion skills." They solve different problems.

Use Motion Design when the problem is what the motion should feel like. Use Motion AI Kit when the problem is how to implement it in Motion and you want the agent to query current API docs.

Install

npx skills add LottieFiles/motion-design-skill

Removal

There is no uninstaller and nothing to undo outside the skill folder:

1. Delete the installed motion-design folder.
2. Restart the agent so it stops advertising the skill.
3. If you used the skills CLI, check whether it recorded the install in its own manifest; this repository does not ship one.

No configuration files, MCP entries, or global packages are touched by this skill.

Prerequisites and footprint

Permissions and dependencies

There are none to grant. The repository contains no package.json, no scripts, no hooks, and no MCP server configuration at the inspected revision. The skill cannot read files, run commands, or make network calls on its own; it is instructions the host agent may choose to follow.

Licensing and attribution

MIT, Copyright 2025 LottieFiles. If you redistribute the folder, keep the LICENSE file and the copyright notice. The skill is published by LottieFiles, but its guidance is library-neutral; installing it does not install Lottie or require Lottie files.

Limits

• Heuristics, not measurements. Durations and curves are craft defaults. They are not benchmarked against user performance data.
• No verification loop. The skill cannot check that the rendered animation matches the intent. You still need to watch it, ideally at 0.25× speed.
• No platform code. It tells the agent what to aim for, not how to write it in your framework. Implementation quality depends on the host agent and your codebase.
• Assumes a UI context. The duration tables are tuned for interface motion. Cinematic or game motion needs different budgets.
• Accessibility is guidance, not enforcement. context-adaptation.md covers reduced motion and platform expectations, but the skill does not test compliance.
• Maintenance signal is modest. The last commit at inspection was 2026-05-18, and the skill version is still 1.0.0. Check the repository before relying on it long-term.
• Vendor origin. LottieFiles maintains it, but nothing in the text requires LottieFiles products.

Verify it yourself

1. Read SKILL.md and confirm the four critical rules and the duration table are the ones you want your agent applying.
2. Check the folder for executable content. At this revision there should be none — only Markdown, LICENSE, README.md, and .gitignore.
3. Install into a scratch project and ask the agent for a modal entrance. Compare its answer with the Premium row of the table. If it invents a 700 ms bounce, the skill is not being loaded.
4. Ask for an error shake and check it stays in the 300–400 ms band with two or three oscillations and no overshoot.
5. Re-check the pinned commit before copying the text into your own repository; the upstream can change without notice.

Review transparency

This is an original guide with short attributed references. It does not reproduce the full skill text.

Related

• Motion AI Kit — the Motion-specific implementation counterpart
• React Best Practices — performance rules for the code the motion runs in
• Web Performance Audit — measure the cost after the animation ships
• Taste-Skill — the same "opinionated constraints" approach applied to visual design
• How to Vet an Agent Skill — review any skill before installing it