Motion design skill for Claude Code: which to install?

Ask Claude Code to "add some motion" and it reaches for an animation library first. A motion design skill fixes the order: it decides timing, easing, choreography and reduced-motion handling before any code. The motion-design skill from lottiefiles/motion-design-skill leads the catalog search for the term with 18,345 installs (skills.sh registry, 2026-10-15).

Key takeaways

• lottiefiles motion-design has 18,345 installs and its repo has 2,220 GitHub stars under MIT (skills.sh registry, GitHub API, 2026-10-15). It works with CSS, Framer Motion, GSAP, Lottie or springs.
• kylezantos design-motion-principles has 12,216 installs and 1,322 GitHub stars (2026-10-15). It runs in 2 modes, Create and Audit.
• owl-listener motion-system (1,745 installs) turns motion into duration and easing tokens with a global reduced-motion override.
• The lottiefiles and owl-listener skills both cap a staggered sequence at 500ms and use decelerating curves for entrances.
• For animation review by one designer's taste, review-animations from emilkowalski/skills is far larger at 239,251 installs. The guide to Emil Kowalski's Claude Code skills covers it.

What is a motion design skill for Claude Code?

A motion design skill is a SKILL.md that gives Claude Code rules for how UI should move, independent of the library that moves it. The lottiefiles skill says it "Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system". Library skills such as GSAP or Framer Motion tell Claude how to call an API. Motion design skills tell it which duration, curve and order to pass to that API. The library side is covered in best web animation skills for Claude Code, which also compares Framer Motion and GSAP.

What is the best motion design skill for Claude Code?

Start with lottiefiles motion-design: it has the most installs of any UI motion design skill, 18,345 (skills.sh registry, 2026-10-15), and the widest rule set. Install it with npx skills add lottiefiles/motion-design-skill --skill motion-design.

Its SKILL.md starts with an 8-step checklist and 4 motion personalities: Playful (150-300ms), Premium (350-600ms), Corporate (200-400ms) and Energetic (100-250ms). It asks you to pick one per project, with Corporate as the UI default.

Add kylezantos design-motion-principles (12,216 installs) when you need a reviewer. The same skill also ships inside the kylezantos design-engineer-auditor-package with 4,268 installs. The best skills for frontend design page ranks the wider field.

How do motion design skills set timing and easing?

They map each element type to a duration range and each direction to an easing family. The lottiefiles table runs from 80-120ms for tooltips to 400-600ms for page transitions, and it makes entrances 30-50% longer than exits. Its directional rule is short: entrance decelerates, exit accelerates, on-screen motion eases both ends. It also lists reference curves, such as Material Design 3 at cubic-bezier(0.2, 0, 0, 1).

The kylezantos skill adds a frequency gate before any duration. Rare actions may get expressive motion. Actions a user repeats hundreds of times a day get "No animation or instant transition", and keyboard-initiated actions never animate. Productivity UI stays under 300ms, with 180ms as the ideal.

How do these skills choreograph several elements at once?

They limit how many things move and for how long. The lottiefiles skill has a 1/3 rule twice: no motion crosses more than 1/3 of the screen without a keyframe change, and no more than 1/3 of the elements move at the same time. Its stagger budgets go from 20-40ms per item for lists to 100-200ms for hero sections, and the total "must stay under 500ms".

The owl-listener motion-system skill gives the same limit as a team rule: stagger related elements by 30-50ms, lead with the most important one, and keep the sequence under 500ms. It also wants 4-6 duration tokens, from duration-instant at 50ms to duration-deliberate at 600ms. If you already keep tokens for color and spacing, add motion tokens to the same export.

How do motion design skills handle reduced motion?

They treat prefers-reduced-motion as a requirement. The kylezantos skill says every animation in either mode "must handle prefers-reduced-motion. No exceptions." The owl-listener skill handles it at the :root level: remove slides, scales and rotations, keep opacity fades, keep spinners and progress, and override all duration tokens.

The lottiefiles reduced-motion rules live in its director/context-adaptation.md reference file: remove spatial movement, keep opacity, cut duration by 50% or more, and never auto-play loops. For a narrower skill, accessible-motion from dylantarre/animation-principles has 620 installs. The W3C guidance on animation from interactions is the standard behind the rule.

How do you audit existing motion with Claude Code?

Use the Audit mode in kylezantos design-motion-principles. Request words such as "audit", "review" or "is this motion good" switch it into Audit mode. That mode loads an audit checklist and an anti-checklist of AI-slop motion patterns, then writes an HTML report with looping demos. It weights 3 design perspectives by project type: Emil Kowalski leads for productivity tools and SaaS dashboards, Jakub Krehel for mobile and e-commerce. The skill notes these lenses are its own reading of public work, not endorsed by the designers.

A complete starter stack

1. motion-design from lottiefiles (18,345 installs) for timing, easing and choreography on new work.
2. design-motion-principles from kylezantos (12,216 installs) to audit motion before you ship.
3. motion-system from owl-listener/designer-skills (1,745 installs) when a team needs shared motion tokens.
4. One library skill from the animation design hub to write the code those rules describe.

Common pitfalls

• Two duration scales in one project. lottiefiles Corporate uses 200-400ms and owl-listener tokens start at 50ms. Pick one source for numbers and remove the other's table from your prompt.
• Linear easing on movement. lottiefiles lists it as a critical rule to never break, except for spinners and progress bars.
• Animating keyboard actions. The kylezantos frequency gate says never, so a command palette should open with no transition.
• Reduced motion added per component. owl-listener puts the override at the root so no component can miss it.

Set the motion rules first, then let a library skill write the code. The micro-interaction skills guide and the frontend design category list the skills that sit next to these.

Common questions