auto-animate
✓Zero-config animations for React, Vue, Solid, Svelte, Preact with @formkit/auto-animate (3.28kb). Prevents 10+ documented errors: SSR/Next.js imports, conditional parents, missing keys, flexbox width, table display, Jest/esbuild config, CSS position conflicts, Vue/Nuxt registration, Angular ESM. Use when: animating lists/accordions/toasts/forms, troubleshooting SSR animation errors, need accessible animations (auto prefers-reduced-motion), or want drop-in transitions without Motion overhead.
Installation
SKILL.md
Package: @formkit/auto-animate@0.9.0 (Sept 2025) Frameworks: React, Vue, Solid, Svelte, Preact Last Updated: 2025-11-22
Why this matters: Prevents Issue #1 (SSR/Next.js import errors). AutoAnimate uses DOM APIs not available on server.
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)
Zero-config animations for React, Vue, Solid, Svelte, Preact with @formkit/auto-animate (3.28kb). Prevents 10+ documented errors: SSR/Next.js imports, conditional parents, missing keys, flexbox width, table display, Jest/esbuild config, CSS position conflicts, Vue/Nuxt registration, Angular ESM. Use when: animating lists/accordions/toasts/forms, troubleshooting SSR animation errors, need accessible animations (auto prefers-reduced-motion), or want drop-in transitions without Motion overhead. Source: ovachiever/droid-tings.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/ovachiever/droid-tings --skill auto-animate- Source
- ovachiever/droid-tings
- Category
- </>Dev Tools
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is auto-animate?
Zero-config animations for React, Vue, Solid, Svelte, Preact with @formkit/auto-animate (3.28kb). Prevents 10+ documented errors: SSR/Next.js imports, conditional parents, missing keys, flexbox width, table display, Jest/esbuild config, CSS position conflicts, Vue/Nuxt registration, Angular ESM. Use when: animating lists/accordions/toasts/forms, troubleshooting SSR animation errors, need accessible animations (auto prefers-reduced-motion), or want drop-in transitions without Motion overhead. Source: ovachiever/droid-tings.
How do I install auto-animate?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/ovachiever/droid-tings --skill auto-animate Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/ovachiever/droid-tings
Details
- Category
- </>Dev Tools
- Source
- skills.sh
- First Seen
- 2026-02-01