Teach Your Agent Motion Design With LottieFiles' Motion Design Skill

Agents write animations that technically move — everything eases the same way, every duration defaults to the same number, and nothing feels choreographed. The 2k-star LottieFiles/motion-design-skill repository, from the company behind Lottie, teaches agents to think like motion directors — choosing timing, easing, choreography, and emotional intent before writing a single line of animation code.

Why This Skill Matters

The skill is philosophy-first and implementation-agnostic: it works with any animation system the README names — CSS, Framer Motion, GSAP, Lottie, Spring, and more. Rather than shipping framework snippets, it packages judgment in four layers. The core SKILL.md is a quick reference: an 8-step checklist, motion personality archetypes, duration and easing tables, a property selection guide, common patterns, and quality rules. director/ goes deep with the three pillars, Disney's 12 principles adapted for UI, emotion-to-motion mapping, choreography, narrative structure, and context adaptation. patterns/ holds ready-to-use recipes for entrance/exit animations, state feedback, ambient motion, and multi-element choreography; reference/ carries the lookup tables, quality checklist, and troubleshooting guide.

Activation is scoped to UI motion work: UI animations (buttons, cards, modals, page transitions), micro-interactions and feedback animations, loading, success, or error states, scroll-triggered or progress-based animation, establishing brand motion identity, and multi-element choreography and sequencing.

Installation

One command, via the same skills CLI:

npx skills add LottieFiles/motion-design-skill

The README says it supports 40+ agents including Claude Code, Cursor, Codex, and GitHub Copilot.

Real Workflow: Choreograph a Dashboard Entrance

The README's example prompts double as a tour of what the skill does. The choreography case is the most distinctive — sequencing, not just one-off animation:

Choreograph the entrance sequence for this dashboard — hero chart first, then stats cards, then sidebar

The skill's multi-element.md pattern file is exactly for this: stagger and choreography recipes for coordinating several elements into one sequence. The same goes for state feedback, the highest-frequency UI animation work there is:

Create a loading → success → error state transition for this form submit button

That request lands in the state-feedback.md patterns file (success, error, loading, hover recipes). A third documented prompt covers review work on animation you already have: "Review my animation code and suggest improvements based on motion design principles" — the quality checklist and troubleshooting reference back the critique.

Tips

• The four motion personality archetypes (detailed in director/motion-personality.md) are the fastest lever: pick the personality first, and duration and easing choices fall out of it.
• The SKILL.md is under 500 lines, so the deep material in director/ loads only when the task calls for it.
• For a new brand or product, the motion personality file pairs with brand identity work; for accessibility-sensitive surfaces, context-adaptation.md covers platform, a11y, and performance constraints, and the reduced-motion rules in it are worth honoring from the first draft.
• When output feels wrong but you cannot name why, reference/troubleshooting.md lists animation smells and fixes — a faster loop than re-prompting from scratch.

When Not to Use This

The skill's own activation list draws the boundary: everything it documents is UI motion. It carries no recipes for game animation, video, or 3D work, and being implementation-agnostic it ships no framework components or keyframe libraries — the principles land in whatever animation system your project already uses, and you still write the code. If you want enforced design rules with measured gates rather than taught judgment, that is a different tool category than this skill claims to be.

See the leaderboard for more skills.