Skip to content
mcp/skillhub

Agent Skill

Motion Design skill

motion-designLottieFiles/motion-design-skillskills/motion-design/SKILL.md

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.

2.4kMIT

always on

81 tokname + description

once used

3,254 tokSKILL.md body

bundled files

1643 KB

repo stars

2.4kGitHub

Install the Motion Design skill

Skills CLI (Claude Code, Codex, Cursor and others)

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

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/LottieFiles/motion-design-skill.git /tmp/motion-design-skill
mkdir -p ~/.claude/skills
cp -R /tmp/motion-design-skill/skills/motion-design ~/.claude/skills/motion-design

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

WhenWhat loadsCost
Every sessionName and description81 tok
When the agent uses itThe SKILL.md instructions3,254 tok
Only if opened16 bundled files (43 KB)varies

Until it is used, motion-design costs about 17× less than the median MCP server we measured (1,363 tokens on every turn). Skills vs MCP study

Checks

Our checks found nothing to flag: it follows the Agent Skills specification's naming and size guidelines and doesn't pipe downloads into a shell.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

  • Motion Design Skill
  • When to Apply
  • Quick Reference: 8-Step Checklist
  • Three Pillars (CRITICAL)
  • Motion Personality
  • Property Selection
  • Duration Table
  • Easing Selection
  • Common Patterns
  • Button Press (Playful)
  • Card Entrance (Premium)
  • Success State (Playful)
  • Error Shake (Corporate)
  • Choreography Essentials
  • Emotion-to-Motion Map
  • Weight Classification
  • Quality Rules
  • CRITICAL — never break
  • HIGH — strongly follow
  • Troubleshooting Quick Reference
  • File Reference