Motion Design Skill
A motion design skill for agents: timing, easing, choreography and Disney animation principles applied to UI
Low risk
We rate an entry low when it mostly gives the agent instructions and reference material.
Why this level
- The skill consists only of instructions and reference tables
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/motion-design-skillDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Run in a terminal in the project folder
npx skills add lottiefiles/motion-design-skill --skill motion-design -a claude-code -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit f9a8a04
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lottiefiles/motion-design-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/motion-design/
git -C "$tmp" checkout f9a8a041b85185ee4881b3471d3415e939aac772
mkdir -p .claude/skills
cp -R "$tmp/skills/motion-design" .claude/skills/motion-designCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add lottiefiles/motion-design-skill --skill motion-design -a cursor -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit f9a8a04
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lottiefiles/motion-design-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/motion-design/
git -C "$tmp" checkout f9a8a041b85185ee4881b3471d3415e939aac772
mkdir -p .agents/skills
cp -R "$tmp/skills/motion-design" .agents/skills/motion-designCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add lottiefiles/motion-design-skill --skill motion-design -a github-copilot -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit f9a8a04
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lottiefiles/motion-design-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/motion-design/
git -C "$tmp" checkout f9a8a041b85185ee4881b3471d3415e939aac772
mkdir -p .github/skills
cp -R "$tmp/skills/motion-design" .github/skills/motion-designCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add lottiefiles/motion-design-skill --skill motion-design -a codex -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit f9a8a04
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lottiefiles/motion-design-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/motion-design/
git -C "$tmp" checkout f9a8a041b85185ee4881b3471d3415e939aac772
mkdir -p .agents/skills
cp -R "$tmp/skills/motion-design" .agents/skills/motion-designCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add lottiefiles/motion-design-skill --skill motion-design -a gemini-cli -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit f9a8a04
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lottiefiles/motion-design-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/motion-design/
git -C "$tmp" checkout f9a8a041b85185ee4881b3471d3415e939aac772
mkdir -p .agents/skills
cp -R "$tmp/skills/motion-design" .agents/skills/motion-designCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lottiefiles/motion-design-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/motion-design/
git -C "$tmp" checkout f9a8a041b85185ee4881b3471d3415e939aac772
mkdir -p .devin/skills
cp -R "$tmp/skills/motion-design" .devin/skills/motion-designCommands for macOS and Linux, on Windows run them in Git Bash.
Formerly Windsurf.
Run in a terminal in the project folder
npx skills add lottiefiles/motion-design-skill --skill motion-design -a cline -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit f9a8a04
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lottiefiles/motion-design-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/motion-design/
git -C "$tmp" checkout f9a8a041b85185ee4881b3471d3415e939aac772
mkdir -p .cline/skills
cp -R "$tmp/skills/motion-design" .cline/skills/motion-designCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add lottiefiles/motion-design-skill --skill motion-design -a roo -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit f9a8a04
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lottiefiles/motion-design-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/motion-design/
git -C "$tmp" checkout f9a8a041b85185ee4881b3471d3415e939aac772
mkdir -p .roo/skills
cp -R "$tmp/skills/motion-design" .roo/skills/motion-designCommands for macOS and Linux, on Windows run them in Git Bash.
A fork of Roo Code, same .roo folders.
Run in a terminal in the project folder
npx skills add lottiefiles/motion-design-skill --skill motion-design -a opencode -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit f9a8a04
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lottiefiles/motion-design-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/motion-design/
git -C "$tmp" checkout f9a8a041b85185ee4881b3471d3415e939aac772
mkdir -p .agents/skills
cp -R "$tmp/skills/motion-design" .agents/skills/motion-designCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lottiefiles/motion-design-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/motion-design/
git -C "$tmp" checkout f9a8a041b85185ee4881b3471d3415e939aac772
mkdir -p .agents/skills
cp -R "$tmp/skills/motion-design" .agents/skills/motion-designCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lottiefiles/motion-design-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/motion-design/
git -C "$tmp" checkout f9a8a041b85185ee4881b3471d3415e939aac772
mkdir -p .agents/skills
cp -R "$tmp/skills/motion-design" .agents/skills/motion-designCommands for macOS and Linux, on Windows run them in Git Bash.
Install the skill with npx skills add LottieFiles/motion-design-skill, then use it when working on interface animations.
Other ways from the author
npx skills add LottieFiles/motion-design-skillInstalls via the skills.sh manager, which supports Claude Code, Cursor, Codex, GitHub Copilot and other agents.
This is third-party code. Review the repository files before installing.
What it does
The skill gives the agent a technology-agnostic decision framework for UI animation. Before writing code the agent runs an eight-step checklist: it sets the emotional target, picks a motion personality, the primary property, duration and easing family. It ships tables of durations and curves, a property-selection guide, and ready recipes for entrance and exit, state feedback, ambient motion and multi-element choreography. Separate files cover the three pillars of motion, Disney's twelve principles adapted for UI, and adaptation for platform, accessibility and performance. It works with CSS, Framer Motion, GSAP, Lottie, Spring and other animation systems.
Who it is for. For frontend developers and interface designers who want reasoned animation decisions instead of arbitrary values.
Good fit when
- You need entrance, feedback or state-transition animations
- You need to pick a duration and easing curve to match the interface tone
- You need coherent choreography for several elements appearing together
Not a fit when
- You want a ready animation library rather than principles and guidance
- The task has nothing to do with interface motion
Example request
Add a clean entrance animation to these cards and pick a duration and easing that fit a calm, premium toneLimitations
The skill provides principles and reference tables, not finished code for your stack. The agent writes the final animation, and the result depends on the chosen library and project. The material is in English.
How to disable. Remove the skill via the skills.sh manager or delete the motion-design folder from the agent's skills directory.
Security check
- The skill consists only of instructions and reference tables
README in short
The README describes the skill as a technology-agnostic set of motion design principles for agents. At its core is SKILL.md with an eight-step checklist, motion personality archetypes, duration and easing tables and a property-selection guide. The director folder covers philosophy, Disney principles and choreography, the patterns folder holds recipes for entrance, feedback and ambient motion, and the reference folder collects lookup tables and troubleshooting. Installation is a single command via the skills.sh manager, with support for Claude Code, Cursor, Codex, GitHub Copilot and other agents. MIT licensed.
SKILL.md
--- name: motion-design description: > 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. license: MIT metadata: author: LottieFiles version: "1.0.0" --- # Motion Design Skill ## When to Apply Use this skill when: - Creating UI animations (buttons, cards, modals, page transitions) - Designing micro-interactions and feedback animations - Building loading, success, or error states - Animating illustrations or decorative elements - Planning scroll-triggered or progress-based animations - Establishing brand motion identity - Choreographing multi-element sequences **Decision tree:** 1. Does it serve a functional purpose (feedback, guidance)? -> Timing rules for responsiveness 2. Does it express brand personality? -> Motion Personality archetypes 3. Does it tell a story or guide attention? -> Disney principles + choreography 4. Is this a complex multi-element scene? -> 1/3 Rule + stagger patterns ## Quick Reference: 8-Step Checklist Before creating any animation: 1. Emotional target? - joy, calm, urgency, elegance 2. Motion Personality? - Playful, Premium, Corporate, Energetic 3. Primary property? - position, scale, rotation, opacity 4. Duration? - see duration table below 5. Easing family? - entrance=decelerate, exit=accelerate 6. Hero element? - apply staging principles 7. Secondary + ambient layers? - add richness 8. 1/3 rules? - motion distance, simultaneous elements
FAQ
Which animation libraries does it work with?
The skill is technology-agnostic. The principles apply to CSS, Framer Motion, GSAP, Lottie, Spring and other systems.
Is it a set of ready animations?
No. It is principles, checklists and reference tables the agent uses to choose parameters and write the animation itself.
Related
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys