Motion Design (LottieFiles)
Universal motion design skill—timing, easing, choreography, and Disney principles adapted for UI—implementation-agnostic across CSS, Framer Motion, GSAP, Lottie, and springs.
Overview
LottieFiles’ Motion Design Skill teaches agents to think like motion directors before writing animation code. It covers an 8-step checklist, motion personality archetypes, duration/easing tables, choreography patterns, and Disney’s 12 principles adapted for UI. Listed on Claude Marketplaces design/UI category and widely installed via `npx skills add`. Philosophy-first and stack-agnostic—pair with figma-implement-motion when the source of truth is a Figma motion file.
Work with LimeDock
Using this skill? LimeDock can wire it into a durable automation you own.
Skills show what's possible. LimeDock builds and runs the owned marketing, sales, and ops automations around them.
We sell owned automations for SaaS teams — live workflows that plug into Slack, CRM, and your internal platform — not just a skill list.
Link
Installation guide
npx skills add LottieFiles/motion-design-skillWorks with Claude Code, Cursor, Codex, Copilot, and other skills.sh-compatible hosts.
How to use it
Ask for entrances, state feedback, loading/success/error, scroll choreography, or brand motion identity. The skill should pick personality, timing, and easing before emitting CSS/Framer/GSAP/Lottie code. Request reviews of existing animation code against its quality rules.
Example prompts
- “Add a playful entrance animation to these cards using Motion Design principles.”
- “Choreograph dashboard entrance: chart first, then stats, then sidebar.”
- “Create loading → success → error transitions for this submit button.”
- “Review our Framer Motion code and fix easing/duration issues.”
Use cases and examples
- Playful card entrance choreography
- Form submit loading → success → error motion
- Dashboard staggered reveal sequences
- Brand motion identity guidelines
- Animation code review against motion principles
Prerequisites
- Agent Skills–compatible host
- A UI codebase with an animation approach (or willingness to choose one)
- Respect prefers-reduced-motion in production
Tips
- Decide personality (playful/calm/premium) before picking libraries.
- Prefer one strong choreographed moment over scattered micro-bounces.
- Always honor reduced-motion preferences.
- Pair with figma-implement-motion when designers authored motion in Figma.