Skills

auto-animate

Installation
Summary

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
SKILL.md

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);

  useEffect(() => {
    if (typeof window !== "undefined" && parent) {
Related skills

More from jezweb/claude-skills

Installs
361
Repository
jezweb/claude-skills
GitHub Stars
776
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykPass