Animation Principles
Apply motion-design rules so solo builders ship UI transitions that feel fast, purposeful, and on-brand instead of arbitrary CSS tweaks.
Overview
Animation Principles is an agent skill most often used in Build (also Ship launch polish) that applies classic motion-design rules to UI so interactions guide attention and communicate state changes.
Install
npx skills add https://github.com/owl-listener/designer-skills --skill animation-principlesWhat is this skill?
- Maps easing modes (ease-out, ease-in, ease-in-out, linear) to entering, exiting, and continuous UI motion
- Duration bands from 50–100ms micro interactions through 400–700ms complex choreography
- Five motion rules: purposeful, quick, natural physics, choreographed sequences, interruptible animations
- Covers entrance, exit, emphasis, transition, and loading patterns including skeleton shimmer
- Stagger related items by 30–50ms with a clear lead element and capped total sequence time
- Micro interaction duration band: 50–100ms
- Stagger offset: 30–50ms between related items
- Five named motion principles: purposeful, quick, natural, choreographed, interruptible
Adoption & trust: 608 installs on skills.sh; 1.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You ship functional UI but motion feels random, sluggish, or distracting because there is no shared easing, duration, or choreography system.
Who is it for?
Solo builders refining dashboards, marketing sites, or app shells who want agent-backed motion specs aligned with UX best practices.
Skip if: Teams that already enforce a design-system motion token file and only need one-off keyframe tweaks with no methodology gap.
When should I use this skill?
You need purposeful UI motion—easing, duration tiers, entrances, exits, emphasis, loading, or list stagger—while implementing or refining frontend interactions.
What do I get? / Deliverables
You get a repeatable motion vocabulary—typed durations, easing per enter/exit, stagger rules, and animation categories—your agent can apply across components and flows.
- Motion spec per interaction type (easing, duration, animation category)
- Stagger and sequence plan for multi-element entrances
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build because the skill governs how screens, modals, and components animate during product implementation. Frontend is where easing curves, durations, entrances, and stagger land in component code and design tokens.
Where it fits
Define motion for a clickable prototype so investors read hierarchy from staggered card entrances.
Specify ease-out modal open and ease-in close with 250ms duration for a settings panel.
Shorten choreography before release so onboarding feels snappy on mid-tier mobile hardware.
How it compares
Use instead of asking the agent for generic “smooth animations” without duration tiers, easing semantics, or stagger discipline.
Common Questions / FAQ
Who is animation-principles for?
Indie and solo product builders and designers pairing with Claude Code, Cursor, or Codex who implement UI in code and want principled motion guidance.
When should I use animation-principles?
During Build frontend work when adding modals, page transitions, or lists; during Ship launch polish when tightening perceived performance; and during Validate prototype demos when motion must sell the product feel.
Is animation-principles safe to install?
It is procedural design guidance with no shell or network requirements by default; review the Security Audits panel on this Prism page before trusting any third-party skill package.
SKILL.md
READMESKILL.md - Animation Principles
# 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