animate

Analyze user interfaces and implement animation plans with timing, easing, and reduced-motion fallbacks.

Updated Mar 22, 2026
One-click install
npx skills add https://github.com/Lin-0096/welove --skill animate-lin-0096
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: animate
Source: https://github.com/Lin-0096/welove/tree/main/.claude/skills/animate
Command: npx skills add https://github.com/Lin-0096/welove --skill animate-lin-0096

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review a feature and identify opportunities to enhance usability with purposeful animations, micro-interactions, and motion that make interfaces feel alive while preserving clarity.

Core Features & Use Cases

  • Analyze a feature to identify where motion improves feedback, transitions, and user guidance.
  • Create a cohesive animation plan across entrance, state changes, micro-interactions, and navigations that respects accessibility constraints.
  • Provide implementation guidance with recommended timing, easing, and user-with-motion budgets for different devices.

Quick Start

Describe the feature to animate and any motion preferences, and I will implement a cohesive animation plan across entrances, feedback, and transitions.

Frequently Asked Questions about animate

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I plan UI animations that improve usability without hurting performance?

To plan UI animations that improve usability, analyze the feature to identify where motion enhances feedback, state transitions, and navigation. Create a cohesive animation plan covering entrances and micro-interactions with recommended timing, easing, and device-specific motion budgets.

What are micro-interactions in UI design and when should I use them?

Micro-interactions in UI design are purposeful animations that provide immediate user feedback during state changes. Use them to make interfaces feel alive and guide user navigation, ensuring they preserve clarity and respect accessibility constraints like prefers-reduced-motion.

How do I implement accessible motion design for users who prefer reduced motion?

Implement accessible motion design by defining fallback behaviors for users who prefer reduced motion. The animation plan must respect prefers-reduced-motion constraints, providing alternative static state transitions or simplified micro-interactions that preserve usability without triggering animation.

Does this animation planning approach work for both entrance animations and state transitions?

Yes, this animation planning approach works for entrance animations, state transitions, micro-interactions, and navigation cues. It analyzes the specific feature scope to provide implementation guidance with recommended timing and easing across all these animation types.

What's the best way to define timing and easing for interface animations?

The best way to define timing and easing for interface animations is to follow a cohesive plan that balances user feedback with device performance budgets. This approach provides specific implementation guidance for timing and easing curves across entrances, state changes, and navigation.

Why do my interface animations feel inconsistent across different user actions?

Interface animations feel inconsistent when they lack a cohesive motion design plan. Analyze the feature to create a unified animation strategy covering entrances, feedback, and transitions, ensuring consistent timing, easing, and accessibility fallback behaviors across all interactions.