Motion Design Skill
A motion design skill for agents: timing, easing, choreography and Disney animation principles applied to UI
- 2,980 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill consists only of instructions and reference tables
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/motion-design-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill consists only of instructions and reference tables
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.
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.
Discussion
No questions or reviews yet.
Related
SkillsDesign Motion Principles
design-motion-principles
A skill about interface smoothness and animation: builds interactive components with meaningful motion and reviews existing ones
Motion2Code includes a web-animation skill: the agent checks output against source frames and shows both versions side by side.
Emil Kowalski's skills for designers and engineers
Skills For Designers and Engineers
Animation and UI detail skills from Emil Kowalski: curves, durations, animation reviews and picking UI libraries
A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI
A skill that animates anything drawn in code: characters, water, smoke, icons and scenes in React Native and SwiftUI
A skill for Claude Code and Codex that turns AI video and frames into web animation driven by scroll, cursor, touch or device tilt
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.
README badge
Original 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