mcpField
M
motion-design-skill

motion-design-skill

github.com/podoDesign & UI29170 installsUpdated 1d ago
Repository

About motion-design-skill

motion-design-skill is a LottieFiles skill that gives AI coding agents implementation-independent guidance on motion design, including timing, easing, choreography, and classic animation principles adapted to UI.

Key features

  1. 01Timing curves and easing guidance
  2. 02Animation sequencing principles
  3. 03Disney principles adapted for UI
  4. 04Advice independent of animation toolchain

Use cases

  1. 01Choosing easing for a UI animation
  2. 02Planning sequences of compound animations
  3. 03Assessing when and how to animate

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill motion-design-skill

After installing, type/motion-design-skillin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

motion-design-skill

Catalogue stub — full package: lottiefiles/motion-design-skill

Decision tree

  1. Is the package already installed? Check: your agent's skills directory contains motion-design-skill with content beyond this stub.

    • Yes → invoke motion-design-skill and proceed
    • No → go to step 2

  2. Which agent are you on?

    • Claude Code → npx skills add LottieFiles/motion-design-skill — or send ! npx skills add … as a chat message (add -g for global, omit for project-only)
    • Cursor → npx skills add LottieFiles/motion-design-skill
    • Other → npx skills add LottieFiles/motion-design-skill or see GitHub README

Install command

npx skills add LottieFiles/motion-design-skill

Invoke after install

  • Skill name: motion-design-skill
  • Trigger phrases: "motion design", "animation principles", "LottieFiles", "Disney principles UI", "timing curves"

What it does

Official LottieFiles motion design principles skill. Covers timing curves, easing functions, animation choreography, and Disney's 12 classic animation principles adapted for UI contexts. Helps agents reason about when to animate, how to choose easing, how to sequence compound animations, and how to balance energy and weight in motion. Implementation-agnostic — the guidance applies equally to CSS transitions, GSAP, Framer Motion, Lottie, or any other animation toolchain. Supports 40+ AI coding agents.

When NOT to use

  • GLSL/shader-level animation (use shader-dev)
  • Specific framework implementation (use gsap-skills or framer-motion-skills)

Comments

Markdown supported