Agent skill · design visual · secondsky
auto-animate
AutoAnimate (@formkit/auto-animate) zero-config animations for React. Use for list transitions, accordions, toasts, or encountering SSR errors, animation libraries complexity.
Why this skill is useful
Provides specific implementation patterns and solutions for using AutoAnimate in React, which the AI wouldn't reliably generate on its own.
What it needs
Requires bun installed locally. About 6k tokens when loaded. Last updated 2026-08-06. 204 stars on the source repository.
What this skill does
AutoAnimate Status: Production Ready ✅ Last Updated: 2026-08-03 Dependencies: None (works with any React setup) Latest Versions: @formkit/auto-animate@0.10.0 --- Quick Start (2 Minutes) 1. Install AutoAnimate Why this matters: Only 3.28 KB gzipped (vs 22 KB for Motion) Zero dependencies Framework-agnostic (React, Vue, Svelte, vanilla JS) 2. Add to Your Component CRITICAL: ✅ Always use unique, stable keys for list items ✅ Parent element must always be rendered (not conditional) ✅ AutoAnimate respects prefers-reduced-motion automatically ✅ Works on add, remove, AND reorder operations 3. Use in Production (SSR-Safe) For Cloudflare Workers or Next.js: --- Known Issues Prevention This skill prevents 10+ documented issues: Issue #1: SSR/Next.js Import Errors Error: "Can't import the named export 'useEffect' from non EcmaScript module" Source: https://github.com/formkit/auto-animate/issues/55 Why It Happens: AutoAnimate uses DOM APIs not available on server Prevention: Use dynamic imports (see templates/vite-ssr-safe.tsx) Issue #2: Conditional Parent Rendering Error: Animations don't work when parent is conditional Source: https://github.com/formkit/auto-animate/issues/8 Why It Happens: Ref can't attach to non-existent element Prevention: Issue #3: Missing Unique Keys Error: Items don't animate correctly or flash Source: Official docs Why It Happens: React can't track which items changed Prevention: Always use unique, stable keys (key={item.id}) Issue #4: Flexbox Width Issues Error: Elements snap to width instead of animating smoothly Source: Official docs Why It Happens: flex-grow: 1 waits for surrounding content Prevention: Use explicit width instead of flex-grow for animated elements Issue #5: Table Row Display Issues Error: Table structure breaks when removing rows Source: https://github.com/formkit/auto-animate/issues/7 Why It Happens: Display: table-row conflicts with animations Prevention: Apply to <tbody> instead of individual rows, or use div-based layouts Issue # …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills secondsky/auto-animate