How does it handle the React 19 StrictMode bug?

It implements a useRef-based initialization guard that prevents the double-call bug caused by React 19's StrictMode, ensuring animations trigger correctly.

Can I use this for complex table animations?

The skill provides specific workarounds for table row display issues, recommending application to the tbody element to prevent layout breakage.

Does this skill support Next.js and SSR environments?

Yes, it includes a specific SSR-safe pattern using dynamic imports to prevent server-side DOM errors in environments like Next.js and Cloudflare Workers.

Which JavaScript frameworks are compatible with this skill?

The skill provides guidance for React, Vue, Svelte, Solid, Preact, and standard JavaScript implementations.

Is accessibility handled automatically?

Yes, the skill enforces the use of prefers-reduced-motion settings, ensuring that animations are automatically disabled for users who have requested reduced motion.

AutoAnimate UI Transitions

Name: AutoAnimate UI Transitions
Author: evolv3ai

byevolv3ai

0•

设计工具

Implements zero-config, accessible animations for modern web frameworks while preventing common SSR and layout-shifting errors.

This skill provides specialized implementation patterns and troubleshooting guides for @formkit/auto-animate, allowing developers to add seamless transitions to React, Vue, Svelte, and Solid projects with minimal configuration. It focuses on resolving 15 critical documented issues, such as React 19 StrictMode double-initialization bugs, SSR-specific import errors in Next.js or Cloudflare Workers, and layout breakages in Flexbox or Table structures. By enforcing best practices like unique keys and client-only dynamic imports, this skill ensures that developers can deliver high-quality, accessible animations for lists, accordions, and toasts without common technical pitfalls.

主要功能

01Fixes 15 documented errors including SSR imports and React 19 StrictMode bugs.

02Advanced troubleshooting for Flexbox, Table-row, and Drag-and-Drop animation conflicts.

03Automatic support for accessibility and prefers-reduced-motion settings.

040 GitHub stars

05Provides SSR-safe patterns optimized for Next.js and Cloudflare Workers.

06Zero-config animation implementation for React, Vue, Svelte, and Solid.

使用场景

01Adding smooth, automatic transitions to dynamic lists, accordions, and toast notifications.

02Implementing performance-first animations that respect user accessibility preferences.

03Fixing animation flickers or layout shifts in React 19 and Next.js production environments.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add evolv3ai/claude-skills-archive auto-animate

For use in Claude.ai and ChatGPT

Download Skill