animate

skill:animate - Zero-Config UI Animations

Version: 1.0.0

Purpose

Add smooth, automatic animations to web applications using @formkit/auto-animate and complementary animation libraries. This skill handles list reordering, element insertion/removal, layout shifts, and page transitions across React, Vue, Solid, Svelte, and Preact with minimal configuration. Use when adding motion to UI components, animating list changes, or implementing page transitions.

File Structure

skills/animate/ ├── SKILL.md (this file) └── examples.md

Interface References

Context: Loaded via ContextProvider Interface
Memory: Accessed via MemoryStore Interface
Shared Patterns: Shared Loading Patterns
Schemas: Validated against context_metadata.schema.json and memory_entry.schema.json

Animation Focus Areas

Auto-Animate Integration: @formkit/auto-animate setup per framework — one line to animate any parent element
List Animations: Smooth add, remove, and reorder for dynamic lists (todo apps, kanban boards, data tables)
Layout Transitions: Animate height/width changes, accordion expand/collapse, tab switching
Page Transitions: Route-level transitions for SPAs (View Transitions API, framework-specific)
Micro-Interactions: Hover effects, button feedback, loading state transitions
Performance: GPU-accelerated transforms, will-change hints, reduced motion preferences
Accessibility: prefers-reduced-motion media query respect, no seizure-inducing flashes

Common Errors Prevented

Missing key props on animated list items
Animating height: auto directly (use max-height or grid technique)
Triggering layout thrashing with width/height animations (use transform instead)
Forgetting prefers-reduced-motion media query
Using display: none transitions (not animatable — use opacity + visibility)
Auto-animate on wrong parent element (must be direct parent of animated children)
Conflicting CSS transitions with auto-animate
Memory leaks from unregistered animation observers
Animating during SSR hydration mismatch
Z-index stacking issues during animations
Missing position: relative on animated containers
Overriding auto-animate's inline styles accidentally
Using setTimeout instead of onAnimationEnd for sequencing
Animating non-composited properties causing jank (margin, padding, top/left)
Not disabling animations during automated testing

MANDATORY WORKFLOW (MUST FOLLOW EXACTLY)

Step 1: Initial Analysis

YOU MUST:

Detect the frontend framework (React, Vue, Solid, Svelte, Preact, or vanilla JS)
Identify the animation scope:
List/collection animations
Layout transitions
Page/route transitions
Micro-interactions
Check existing animation libraries in the project (Framer Motion, GSAP, CSS transitions)
Determine if @formkit/auto-animate is appropriate vs. a more specific library
Ask clarifying questions if needed:
What elements need animation?
Performance constraints (mobile, low-end devices)?
Existing design system motion guidelines?

Step 2: Load Memory

Follow Standard Memory Loading with skill="animate" and domain="engineering" .

YOU MUST:

Use memoryStore.getSkillMemory("animate", "{project-name}") to load project-specific animation patterns
Use memoryStore.getByProject("{project-name}") for cross-skill context (design tokens, component library)
Review previously established animation conventions and duration standards

Step 3: Load Context

Follow Standard Context Loading for the engineering domain. Stay within the file budget declared in frontmatter.

Step 4: Implement Animations

YOU MUST:

Framework Detection & Setup:

React: useAutoAnimate hook from @formkit/auto-animate/react
Vue: v-auto-animate directive from @formkit/auto-animate/vue
Solid: createAutoAnimate from @formkit/auto-animate/solid
Svelte: Action-based integration
Preact: useAutoAnimate from @formkit/auto-animate/preact

Implementation Rules:

Apply auto-animate to the direct parent of elements that will be added/removed/reordered
Ensure all list items have stable, unique key props
Use transform and opacity for custom animations (GPU-composited properties)
Always include prefers-reduced-motion handling: @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
Set consistent animation durations following design system (default: 200-300ms for UI, 400-600ms for page)
Never animate height , width , top , left directly — use transforms or the grid technique

DO NOT introduce animations without reduced-motion handling

Step 5: Generate Output

Save implementation to /claudedocs/animate_{project}_{YYYY-MM-DD}.md
Follow naming conventions in ../OUTPUT_CONVENTIONS.md
Include installation commands, code changes, and testing instructions

Step 6: Update Memory

Follow Standard Memory Update for skill="animate" .

Store animation conventions, duration scales, library choices, and component-specific patterns.

Compliance Checklist

Before completing, verify:

Step 1: Framework detected and animation scope identified
Step 2: Standard Memory Loading pattern followed
Step 3: Standard Context Loading pattern followed
Step 4: Animations implemented with reduced-motion support
Step 5: Output saved with standard naming convention
Step 6: Standard Memory Update pattern followed

Safety Notice

Copy this and send it to your AI assistant to learn

Source Transparency

Related Skills

office

accessibility

jquery-4