Skip to main content
affpapa.org
RU EN
skill CX Codex

animation-principles · owl-listener — Claude Code skill for UI motion

A skill that tunes one specific UI animation: picks easing, duration and the order in which related elements move.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add Owl-Listener/designer-skills --skill animation-principles -a claude-code
Open on GitHub

What animation-principles does

This skill fixes a single animation rather than a whole motion system. It walks through the principles: easing for entering, exiting and moving elements, duration by the scale of the change, and the sequence for related elements. Entering elements take ease-out, exiting ones ease-in, and linear is reserved for progress bars. Durations come in bands: 50–100 ms for button states and toggles, 150–250 ms for tooltips and small shifts, 250–400 ms for modals and page transitions, 400–700 ms for complex choreography.

Grouped elements get their own rhythm. Stagger neighbours by 30–50 ms, lead with the most important one, and keep the whole sequence under 700 ms. Related movements should share a direction. Animations are meant to be interruptible, since they can be cancelled mid-flight.

The skill advises supporting prefers-reduced-motion and testing on a low-powered device. For performance it points to will-change or transform. Product-wide duration and easing tokens are a different job — that is motion-system from design-systems, and a full interaction spec belongs to micro-interaction-spec. Reach for this one when a particular transition stutters or feels sluggish.

What it helps with

  • pick an easing curve for an element entering or leaving
  • keep a transition duration inside a sensible band
  • sequence a list of cards as they appear
  • make an animation cancellable mid-flight
  • support prefers-reduced-motion in a transition

Example prompts for the agent

  • tune the modal entrance: easing, duration and element order
  • this page transition feels sluggish — review it against the animation principles
  • stagger the card list as it appears and check prefers-reduced-motion

How to install animation-principles

1Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill animation-principles -a claude-code

2Manually: put the files in place

~/.claude/skills/animation-principles/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/animation-principles/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about animation-principles

How do I install animation-principles in Claude?

Run npx skills add Owl-Listener/designer-skills --skill animation-principles -a claude-code. The skill lands at ~/.claude/skills/animation-principles/SKILL.md.

What does animation-principles do?

It applies animation principles — easing, duration, staging, follow-through — to one specific UI motion. Use it when tuning how an animation feels.

How is animation-principles different from motion-system?

animation-principles handles a single animation. For product-wide duration and easing tokens use motion-system from design-systems, and for a full interaction spec use micro-interaction-spec.

Source text

SKILL.md · MIT 
---
name: animation-principles
description: Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use `motion-system` (design-systems); for a full interaction spec use `micro-interaction-spec`.
---
# Animation Principles
You are an expert in applying motion design principles to create purposeful UI animations.
## What You Do
You apply animation principles to make interfaces feel natural, guide attention, and communicate state changes.
## Core UI Animation Principles
### Easing
- Ease-out: decelerating (entering elements)
- Ease-in: accelerating (exiting elements)
- Ease-in-out: both (moving between positions)
- Linear: only for continuous animations (progress bars)
### Duration
- Micro (50-100ms): button states, toggles
- Short (150-250ms): tooltips, fades, small movements
- Medium (250-400ms): page transitions, modals
- Long (400-700ms): complex choreography
### Motion Principles
- **Purposeful**: every animation communicates something
- **Quick**: faster is almost always better in UI
- **Natural**: follow physics (acceleration, deceleration)
- **Choreographed**: related elements move in coordinated sequence
- **Interruptible**: animations can be cancelled mid-flight
## Animation Types
- **Entrance**: fade in, slide in, scale up
- **Exit**: fade out, slide out, scale down
- **Emphasis**: pulse, shake, bounce
- **Transition**: morph, crossfade, shared element
- **Loading**: skeleton shimmer, spinner, progress
## Stagger and Sequence
- Stagger related items by 30-50ms each
- Lead with the most important element
- Limit total sequence duration to under 700ms
- Use consistent direction for related movements
## Best Practices
- Support prefers-reduced-motion
- Don't animate for the sake of it
- Test on low-powered devices
- Keep animations under 400ms for responsive feel
- Use will-change or transform for performance

© Owl-Listener · MIT · Owl-Listener/designer-skills

Similar skills

Everything for Design →

animation-principles by other authors comes first.

animation-principles iart-ai Calculates timing, cubic-bezier curves, and stagger offsets for UI transitions. Solves stiff or robotic movement with physics-based motion rules. CX Codex +1 3,000installs Animation Principles - Absolute Beginner dylantarre Walks through the 12 principles of animation in plain words. Useful when you are touching motion in a UI or a game for the first time. CX Codex +1 486installs Animation Principles - Novice dylantarre A skill that walks through the 12 animation principles with a hands-on exercise for each. Useful once you know the theory and want to actually use it. CX Codex +1 488installs 12-principles-of-animation raphael-salaja Audits web animation code against Disney motion principles. Flags timing, physics, and easing flaws with precise file and line findings. CX Codex +1 2,200installs review-animations emilkowalski Reviews UI animation and motion code against Emil Kowalski's design standards. Flags slow easings, non-GPU properties, and unnecessary transitions. CX Codex +1 256,500installs improve-animations emilkowalski Surveys motion and animation code across your project, then generates self-contained fix plans. It spots janky keyframes and poor easing without altering source files. CX Codex +1 224,200installs motion-and-storytelling dembrandt A skill for designing transitions, scroll animations and onboarding motion. It hands you timings, easing curves and stagger patterns when animation has a job to do. CX Codex +1 894installs

From the same set109

loading-states Designs waiting states with skeletons, progress indicators, progressive loading and optimistic updates. Use it when content or actions take time to complete. CX Codex +1 2,200installs design-critique The skill runs a team design critique: session framing, feedback rules, and action items with owners. Built for sessions with people in the room. CX Codex +1 2,200installs state-machine Models UI component behavior as explicit states, events, and transitions. Useful when a component has multiple interacting states that must remain predictable. CX Codex +1 2,200installs design-token-audit Finds where a product bypasses its design tokens: hard-coded values, duplicate names, missing scale steps. CX Codex +1 2,200installs wireframe-spec Defines wireframe layout specifications, content priorities, and interaction notes. Useful when structuring an interface before moving into visual UI design. CX Codex +1 2,300installs micro-interaction-spec Specifies one micro-interaction end to end: trigger, rules, feedback, loops and modes. Useful when a single interaction goes to engineering. CX Codex +1 2,300installs accessibility-test-plan Plans accessibility testing sessions with assistive technology and real users. Useful when preparing user flows for WCAG compliance. CX Codex +1 2,100installs interview-script Creates a structured user interview guide with open questions and facilitator notes. Use it before qualitative research interviews. CX Codex +1 2,100installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor