Which frameworks are supported?

The skill provides guidance for React, Vue, Solid, Svelte, Preact, and Nuxt 3, including specific plugin registration patterns for each.

How does it handle accessibility?

It automatically respects 'prefers-reduced-motion' browser settings, ensuring that users with motion sensitivities are not presented with disruptive transitions.

Does this skill support React 19?

Yes, it includes specific patterns to prevent the double-initialization bugs common in React 19 StrictMode by using ref-based initialization guards.

Will this work with Next.js and Server-Side Rendering?

Yes, the skill provides SSR-safe dynamic import patterns that ensure AutoAnimate only initializes on the client, preventing 'window is not defined' errors.

Can I use this with Flexbox layouts?

Yes, the skill includes specialized fixes for Flexbox width-snapping and container-shaking issues by recommending explicit sizing over flex-grow during animations.

AutoAnimate Professional

Name: AutoAnimate Professional
Author: brendadeeznuts1111

bybrendadeeznuts1111

Design Tools

Implements zero-config animations across major frontend frameworks while automatically resolving common SSR, React 19, and layout-shifting errors.

About

This skill provides a comprehensive implementation guide for integrating @formkit/auto-animate into modern web applications, covering React, Vue, Solid, Svelte, and Preact. It specializes in preventing 15+ complex edge-case errors such as React 19 StrictMode double-initialization, SSR import failures in Next.js or Cloudflare Workers, and layout flickering in Flexbox containers. By applying pre-vetted code patterns and CSS workarounds, it ensures that drop-in animations remain accessible, performant, and stable across various browser environments and build configurations.

Key Features

Zero-config animations for React, Vue, Solid, Svelte, and Preact
Automatic support for prefers-reduced-motion accessibility standards
Advanced layout bug fixes for Flexbox, CSS transforms, and tables
Prevents 15+ documented errors including React 19 StrictMode bugs
SSR-safe dynamic import patterns for Next.js and Cloudflare Workers
0 GitHub stars

Use Cases

Animating dynamic lists, accordions, and toast notifications without manual CSS
Resolving 'Window is not defined' errors in SSR/Next.js animation implementations
Migrating React projects to Version 19 while maintaining animation stability

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add brendadeeznuts1111/tier-1380-omega auto-animate

For use in Claude.ai and ChatGPT

Download Skill

GitHub