Animation principles

Skill Infrasity-Labs/dev-gtm-claude-skills/product-designers/animation-principles

Apply animation principles to UI motion for purposeful, polished interactions.From its SKILL.md

Install

npx -y skills add Infrasity-Labs/dev-gtm-claude-skills --skill animation-principles

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

1.7 KB, 379 tokens by cl100k_base, as published. Nobody here has run it

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

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 1 of the 12 instructions most css styling skills give in 379 tokens

Counted across 512 of the 512 authors here whose files we hold, read 2026-09-06

Animate only transform and opacityin 32 of 512, across 30 files
Respect prefers-reduced-motionin 21 of 512
Support reduced motion preferenceshere, and in 16 of 512, across 6 files
Use Tailwind CSS for stylingin 14 of 512, across 13 files
Specify AnimatePresence mode explicitlyin 12 of 512, across 2 files
Set initial states explicitlyin 12 of 512, across 2 files
Use semantic HTML elementsin 11 of 512, across 10 files
Use oklch for color valuesin 11 of 512, across 10 files
Honor prefers-reduced-motion in animationsin 10 of 512
Provide a reduced-motion fallback for animationsin 10 of 512, across 9 files
Use property names in camelCasein 9 of 512, across 4 files
Ensure UI animations stay under 300msin 9 of 512, across 6 files

Said here and by no other author read

Test animations on low powered devices
Stagger related items by 30 to 50ms
Limit total sequence duration under 700ms

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.