⏳ This skill is pending AI review.
Scores will appear once the review pipeline completes.
motion-design
>
Choose how to use this skill
You do not need every option. Choose the path your AI client supports. The stable page stays the same; versioned files are immutable.
1. Native installer
This listing has no registered native installer command. Use the complete package or source fallback below, depending on what your client supports.
Do not guess an installer command or replace an existing version without reviewing the diff.
2. Complete package recommended
Download the ZIP when available. It includes SKILL.md plus the references, security notes and version metadata.
No complete ProSkills package is published for this listing yet.3. Prompt-only
Copy the prompt above when the agent can read the stable page or when you want to adopt the workflow without installing a skill.
Need only the instruction file?
Download SKILL.md only if your client requires a single file. The complete ZIP is safer for a full installation because it preserves the references and release context.
No path installs or executes anything by itself. Your agent still needs access to the project files. Before updating, compare the installed version and review the diff.
// RATINGS
Not yet listed on ClawHub or SkillsMP
// README
Motion Design Skill
Universal motion design principles for AI agents. Philosophy-first, implementation-agnostic.
Teaches agents to think like motion directors — choosing the right timing, easing, choreography, and emotional intent before writing a single line of animation code. Works with any animation system (CSS, Framer Motion, GSAP, Lottie, Spring, etc.).
Install
npx skills add LottieFiles/motion-design-skill
Supports 40+ agents including Claude Code, Cursor, Codex, GitHub Copilot, and more.
What's included
Core (SKILL.md) — Quick reference with the 8-step checklist, motion personality archetypes, duration/easing tables, property selection guide, common patterns, and quality rules.
Philosophy (director/) — Deep dives into the three pillars, Disney's 12 principles adapted for UI, emotion-to-motion mapping, choreography, narrative structure, and context adaptation.
Patterns (patterns/) — Ready-to-use recipes for entrance/exit animations, state feedback (success, error, loading, hover), ambient/continuous motion, and multi-element choreography.
Reference (reference/) — Lookup tables for timing and easing, property selection guide, quality checklist, and troubleshooting common animation problems.
When it activates
The skill activates when you're working on:
- UI animations (buttons, cards, modals, page transitions)
- Micro-interactions and feedback animations
- Loading, success, or error states
- Scroll-triggered or progress-based animations
- Establishing brand motion identity
- Multi-element choreography and sequencing
Example prompts
Add a playful entrance animation to these card components
Create a loading → success → error state transition for this form submit button
Choreograph the entrance sequence for this dashboard — hero chart first, then stats cards, then sidebar
Review my animation code and suggest improvements based on motion design principles
Skill structure
skills/motion-design/
├── SKILL.md # Main skill instructions (< 500 lines)
├── director/
│ ├── core-philosophy.md # Three Pillars deep dive
│ ├── decision-framework.md # Full decision pipeline
│ ├── disney-principles.md # 12 principles, UI-adapted
│ ├── motion-personality.md # 4 archetypes + brand identity
│ ├── emotion-mapping.md # Emotion → motion translation
│ ├── choreography.md # Multi-element coordination
│ ├── narrative-structure.md # Micro-story framework
│ └── context-adaptation.md # Platform, a11y, performance
├── patterns/
│ ├── entrance-exit.md # Entrance/exit recipes
│ ├── state-feedback.md # Success, error, loading, hover
│ ├── ambient-continuous.md # Looping, breathing, parallax
│ └── multi-element.md # Stagger + choreography recipes
└── reference/
├── timing-easing-tables.md # Duration + easing lookups
├── property-selection.md # Property communication guide
├── quality-checklist.md # Evaluation criteria
└── troubleshooting.md # Animation smells + fixes
License
MIT
// HOW IT'S BUILT
KEY FILES