Skip to main content
The animate skill analyzes features and strategically adds animations and micro-interactions that enhance understanding, provide feedback, and create delight.

​
When to Use

Use this skill when you need to:
  • Add visual feedback to user actions
  • Smooth jarring state transitions
  • Create delight through motion
  • Guide user attention
  • Improve perceived performance

​
Parameters

​
string
The feature or component to animate (optional)

​
How It Works

​
1. Context Gathering (Mandatory)

The skill requires understanding:
  • Target audience (critical)
  • Desired use-cases (critical)
  • Brand personality (playful vs serious, energetic vs calm)
  • Performance constraints
The skill will ask clarifying questions if this context cannot be inferred from the codebase. Do NOT proceed without answers - guessing leads to inappropriate or excessive animation.

​
2. Animation Assessment

Identifies opportunities where motion would improve the experience:
  • Missing feedback - Actions without visual acknowledgment
  • Jarring transitions - Instant state changes that feel abrupt
  • Unclear relationships - Spatial or hierarchical relationships that aren’t obvious
  • Lack of delight - Functional but joyless interactions
  • Missed guidance - Opportunities to direct attention

​
3. Animation Categories

  • Page load choreography with staggered reveals (100-150ms delays)
  • Hero section dramatic entrances
  • Scroll-triggered content reveals
  • Modal/drawer smooth entry
  • Button feedback: Hover scale (1.02-1.05), click press (0.95 → 1)
  • Form interactions: Input focus, validation animations
  • Toggle switches: Smooth slide + color transition (200-300ms)
  • Like/favorite: Scale + rotation effects
  • Show/hide with fade + slide
  • Expand/collapse with height transitions
  • Loading states and skeleton screens
  • Success/error state changes
  • Empty state subtle animations
  • Completed action celebrations
  • Easter eggs for discovery
  • Contextual animations (weather, time-of-day)

​
Technical Guidelines

​
Timing by Purpose

  • 100-150ms: Instant feedback (button press, toggle)
  • 200-300ms: State changes (hover, menu open)
  • 300-500ms: Layout changes (accordion, modal)
  • 500-800ms: Entrance animations (page load)

​
Recommended Easing Curves

AVOID: Bounce and elastic easing curves - they feel dated and tacky.

​
Performance Best Practices

  • GPU acceleration: Use transform and opacity, avoid layout properties
  • will-change: Add sparingly for known expensive animations
  • Monitor FPS: Ensure 60fps on target devices
  • Exit animations should be ~75% of enter duration

​
Accessibility

Always respect prefers-reduced-motion. This is mandatory for accessibility compliance.

​
Critical Don’ts

  • NEVER use bounce or elastic easing curves
  • NEVER animate layout properties (width, height, top, left) - use transform instead
  • NEVER use durations over 500ms for feedback
  • NEVER animate without purpose
  • NEVER ignore prefers-reduced-motion
  • NEVER animate everything
  • NEVER block interaction during animations unless intentional

​
Quality Verification

The skill verifies that animations:
  • Run smoothly at 60fps
  • Feel natural with organic easing
  • Have appropriate timing
  • Work with reduced motion settings
  • Don’t block user interactions
  • Add real value to the interface

​
Example Usage

Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility.