auto-animate

SKILL.md

Zero-config animations for React, Vue, Solid, Svelte, Preact with automatic error prevention and accessibility.

Prevents 15 documented issues including React 19 StrictMode bugs, SSR import errors, conditional parent rendering, flexbox layout conflicts, and drag-and-drop animation conflicts

Automatically respects prefers-reduced-motion for accessibility; requires unique, stable keys and parent elements always in DOM

SSR-safe via dynamic imports; critical for Next.js, Nuxt 3 (v0.8.2+), and Cloudflare Workers

Includes patterns for lists, accordions, toasts, tables, and forms with explicit guidance on CSS transforms, viewport visibility, and z-index handling

AutoAnimate - Error Prevention Guide

Package: @formkit/auto-animate@0.9.0 (current)
Frameworks: React, Vue, Solid, Svelte, Preact
Last Updated: 2026-01-21

SSR-Safe Pattern (Critical for Cloudflare Workers/Next.js)

// Use client-only import to prevent SSR errors
import { useState, useEffect } from "react";

export function useAutoAnimateSafe<T extends HTMLElement>() {
  const [parent, setParent] = useState<T | null>(null);