What is the animation-principles skill?
The animation-principles skill is a short SKILL.md in the interaction-design plugin of Owl-Listener's designer-skills repo. It applies easing, duration, motion principles and stagger rules to one specific UI animation, with ranges such as 150 to 250ms for tooltips and fades, and it tells the agent to support prefers-reduced-motion.
animation-principles is one skill inside the interaction-design plugin of the designer-skills collection, a pack of design skills written for AI agents. Its SKILL.md casts the agent as an expert in applying motion design principles to purposeful UI animation.
The description scopes it narrowly: use it when tuning how a single animation feels. For product-wide duration and easing tokens it points to motion-system, and for a full interaction spec it points to micro-interaction-spec.
What changes in your agent's output
- Entering elements decelerate with ease-out and exiting ones accelerate with ease-in. Linear is kept for continuous motion such as progress bars.
- Durations come from four bands: micro at 50 to 100ms, short at 150 to 250ms, medium at 250 to 400ms and long at 400 to 700ms.
- Related items stagger by 30 to 50ms each, led by the most important element, inside a 700ms total.
- Animations can be interrupted, and prefers-reduced-motion is supported.
The five motion principles
- Purposeful: every animation communicates something.
- Quick: faster is almost always better in UI.
- Natural: movement follows acceleration and deceleration.
- Choreographed: related elements move in a coordinated sequence.
- Interruptible: an animation can be cancelled mid-flight.
Who animation-principles is for
Best for
- Tuning one tooltip, modal, toggle or list reveal that feels too slow or too abrupt.
- Checking generated CSS or motion code against stated timing ranges.
- Designers who want numbers from the agent in place of adjectives like smooth.
Not for
- Product-wide motion tokens. Use motion-system from the same collection.
- Library code. The skill states principles and no API, so pair it with Framer Motion or GSAP with React when you need an implementation.
- A dedicated check of animations you already shipped. See review animations.
Use it with UiChemy
Motion rules matter once a design exists. UiChemy Composer, an AI visual editor inside Elementor or Gutenberg, writes real HTML, CSS and JS, and you can hold its transitions to the timing bands above. Click Get Started on uichemy.com.
How to install Animation Principles Skill: Easing, Duration and Stagger for UI Motion
/plugin marketplace add Owl-Listener/designer-skillsRegister the marketplace
In Claude Code, run
/plugin marketplace add Owl-Listener/designer-skills. The README says this only tells Claude where the skills live and installs nothing yet.Install the plugin that holds it
Run
/plugin install interaction-design@designer-skills. You can also type /plugin, open the Discover tab, tick the plugin with space and press enter.Gemini CLI route
Each plugin is also a Gemini CLI extension. Clone the repo, run
mkdir -p .gemini/extensions, then copy the repo's .gemini/extensions folder into your project's .gemini/extensions.Hand copy
The skill lives at interaction-design/skills/animation-principles in the repository. Copy that folder to wherever your agent loads skills. The README names no folders for other agents.
Check that it loaded
Ask the agent to tune the motion of one component, such as a tooltip fade. The answer should name an easing, pick a duration band and mention prefers-reduced-motion.
Key features
- Easing rulesEase-out for entering elements, ease-in for exiting ones, ease-in-out for moving between positions, and linear only for continuous animation.
- Duration bandsMicro 50 to 100ms for button states and toggles, short 150 to 250ms, medium 250 to 400ms for page transitions and modals, long 400 to 700ms.
- Five motion principlesPurposeful, quick, natural, choreographed and interruptible give the agent a short test to run against any animation it writes.
- Animation typesEntrance, exit, emphasis, transition and loading, with examples such as fade in, shake, shared element and skeleton shimmer.
- Stagger and sequenceStagger related items 30 to 50ms apart, lead with the most important element, keep a sequence under 700ms and use one direction for related moves.
- Reduced motionBest practices list support for prefers-reduced-motion, so the agent plans a calmer path for users who ask for it.
- Performance hintsTest on low-powered devices, keep animations under 400ms for a responsive feel and use will-change or transform for performance.
- Scoped hand-offsThe description sends product-wide tokens to motion-system and full interaction specs to micro-interaction-spec, so this skill stays small.
Frequently asked questions
What is the animation-principles skill?
It is a skill in the interaction-design plugin of Owl-Listener's designer-skills collection. It teaches an agent easing, duration, stagger and motion principles for UI animation, and its description limits it to tuning how one specific animation feels rather than setting product-wide motion systems.
How do I install the animation-principles skill?
Add the marketplace with /plugin marketplace add Owl-Listener/designer-skills, then run /plugin install interaction-design@designer-skills. The skill arrives with that plugin. Gemini CLI users copy the repo's .gemini/extensions folder into their project, following the README.
What durations does animation-principles recommend?
It gives four bands. Micro runs 50 to 100ms for button states and toggles. Short runs 150 to 250ms for tooltips, fades and small movements. Medium runs 250 to 400ms for page transitions and modals. Long runs 400 to 700ms for complex choreography.
Does animation-principles work with Claude Code, Cursor or other agents?
The README says the collection is for Claude Code and Gemini CLI. It does not mention Cursor or other agents. A tool that loads SKILL.md folders may still read it, but that is not confirmed in the repository, so test it on one component first.
What is the difference between animation-principles and motion-system?
Animation-principles tunes how one animation feels, using easing, timing and stagger. Motion-system, in the design-systems plugin, is named in the description for product-wide duration and easing tokens. Use the first for a single component and the second for the whole product.
Does animation-principles include code for an animation library?
No. The SKILL.md lists principles, ranges and best practices, and contains no library API. For code, pair it with an implementation guide such as GSAP performance or web motion design.
Does the skill cover motion accessibility?
Briefly. The best practices tell the agent to support prefers-reduced-motion, and the principles ask for interruptible animation. It gives no further accessibility rules, so run a separate accessibility check for vestibular and focus concerns.
What license does animation-principles use?
GitHub lists the designer-skills repository as MIT licensed. The skill folder itself holds only the SKILL.md, so the repository license is the one that applies. Check the repository before you redistribute the plugin inside another product.