Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/pbakaus/impeccable/llms.txt

Use this file to discover all available pages before exploring further.

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

​
target
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

/* Use these - natural deceleration */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);    /* Smooth, refined */
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);   /* Slightly snappier */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* Confident, decisive */
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.
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

​
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

# Animate a specific component
/animate target="checkout button"

# Animate entire feature
/animate target="dashboard page"

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

Build docs developers (and LLMs) love

Get started for freeTalk to us