PlugWiki

motion-design (LottieFiles): a skill that makes Claude choose timing, easing and choreography before it writes animation code

LottieFiles' skill makes Claude plan UI animation like a motion director, with set durations, easing and choreography, before it writes any animation code.

Installs
21.6K
on skills.sh
Stars
2.7K
on GitHub
Files
16
besides SKILL.md
Updated
May 2026
last repo commit

The skill gives Claude a checklist to run before any animation: the emotional target, one of four motion personalities (Playful, Premium, Corporate or Energetic), the main property to animate, duration, easing, the hero element, extra motion layers and two one-third rules. It then supplies duration tables, easing curves, common patterns such as button press, card entrance, success state and error shake, and stagger limits.

It triggers on UI animations, micro-interactions, loading, success and error states, page transitions, scroll effects and brand motion work. It is implementation-agnostic: the description names CSS, Framer Motion, GSAP, Lottie and Spring.

The skill holds 17 Markdown files and no scripts. SKILL.md carries the quick rules, and deeper files cover Disney's 12 principles adapted for UI, emotion mapping, choreography, accessibility and performance, and troubleshooting.

Good for

  • Front-end developers adding transitions, micro-interactions and loading states
  • Designers who want animation that matches a brand personality
  • Anyone reviewing animation code for timing and easing mistakes

Install motion-design

Claude Code

  1. 1

    Copy this prompt.

    Install the motion-design skill in Claude Code. Run this command:

npx skills add https://github.com/lottiefiles/motion-design-skill --skill motion-design

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system.

Sections in SKILL.md

  1. When to Apply
  2. Quick Reference: 8-Step Checklist
  3. Three Pillars (CRITICAL)
  4. Motion Personality
  5. Property Selection
  6. Duration Table
  7. Easing Selection
  8. Common Patterns
  9. Button Press (Playful)
  10. Card Entrance (Premium)
  11. Success State (Playful)
  12. Error Shake (Corporate)
  13. Choreography Essentials
  14. Emotion-to-Motion Map
  15. Weight Classification
  16. Quality Rules

Key facts

Author
LottieFiles
License
MIT
Repository
lottiefiles/motion-design-skill
Installs on skills.sh
21,596 as of 2026-11-02
GitHub stars
2,682 as of 2026-11-02
Last repo commit
2026-05-18
Files in the skill folder
17 files including SKILL.md (8 director guides, 4 pattern guides, 4 reference guides)
skills.sh audits
Gen Agent Trust Hub pass, Socket pass, Snyk pass
Version
1.0.0
Works in
Documented install via the skills CLI, which the README says supports 40+ agents including Claude Code, Cursor, Codex and GitHub Copilot

What it includes

  • Run before any animation

    Emotional target, personality, primary property, duration, easing family, hero element, secondary and ambient layers, and the one-third rules.

    8-step checklist

  • Emotional intent, visual narrative, motion craft

    Each animation must answer what the viewer should feel, the micro-story, and how to make it believable. Adds primary, secondary and ambient motion layers.

    Three pillars

  • Playful, Premium, Corporate or Energetic

    Pick one per project. Each sets a duration range, easing and overshoot. Default is Corporate for UI and Playful for illustrations.

    Motion personality

  • Timing by element type and curve by direction

    For example tooltips 80 to 120ms and page transitions 400 to 600ms. Entrances use decelerating easing and exits accelerating easing.

    Duration and easing tables

  • Button press, card entrance, success state, error shake

    Step-by-step recipes with timings. More in patterns/entrance-exit.md and patterns/state-feedback.md.

    Common patterns

  • 1/3 rules and stagger budgets

    No motion travels over a third of the screen without a keyframe change, and total stagger stays under 500ms.

    Choreography

  • Maps joy, calm, urgency and more to path, easing and duration

    Seven emotions with suggested curves and ranges.

    Emotion-to-motion map

  • Critical and high rules, plus a fix table

    For example never use linear easing for spatial movement, and add secondary motion when an animation feels flat.

    Quality rules and troubleshooting

  • director/, patterns/ and reference/ folders

    Disney principles, context adaptation, ambient and multi-element patterns, property selection, quality checklist.

    Deep-dive files

From the official docs

Questions

What does the motion-design skill do?

It makes Claude decide the emotion, personality, timing, easing and choreography of a UI animation before it writes code. It then gives duration tables, easing curves and ready recipes for common states.

How do I install it in Claude Code, the Claude app or Codex?

Use the install box above. The README documents npx skills add LottieFiles/motion-design-skill and says it supports 40+ agents, including Claude Code, Cursor, Codex and GitHub Copilot.

Which animation libraries does it work with?

The description says it works with CSS, Framer Motion, GSAP, Lottie, Spring or any animation system. The skill is about principles, not one library.

Does it generate Lottie files?

SKILL.md does not describe generating Lottie files. It sets motion rules for animation code and review.

Is it safe to install?

It is Markdown only, with no scripts, API keys or network calls named in SKILL.md. Claude reads the rules and applies them to your animation code.

What are some example prompts?

The README suggests prompts such as: add a playful entrance animation to these card components, create a loading to success to error transition for a form submit button, choreograph the entrance sequence for a dashboard, and review my animation code against motion design principles.

Information

updated Nov 2, 2026

Repository
lottiefiles/motion-design-skill
Folder
skills/motion-design

lottiefiles/motion-design-skillskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2
  1. SKILL.md · github.com
  2. motion-design-skill README · github.com

Updated Nov 2, 2026.