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

0•

设计工具

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

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.

主要功能

01Zero-config animations for React, Vue, Solid, Svelte, and Preact

02Automatic support for prefers-reduced-motion accessibility standards

03Advanced layout bug fixes for Flexbox, CSS transforms, and tables

04Prevents 15+ documented errors including React 19 StrictMode bugs

05SSR-safe dynamic import patterns for Next.js and Cloudflare Workers

060 GitHub stars

使用场景

01Animating dynamic lists, accordions, and toast notifications without manual CSS

02Resolving 'Window is not defined' errors in SSR/Next.js animation implementations

03Migrating 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

主要功能

01Zero-config animations for React, Vue, Solid, Svelte, and Preact

02Automatic support for prefers-reduced-motion accessibility standards

03Advanced layout bug fixes for Flexbox, CSS transforms, and tables

04Prevents 15+ documented errors including React 19 StrictMode bugs

05SSR-safe dynamic import patterns for Next.js and Cloudflare Workers

060 GitHub stars

使用场景

01Animating dynamic lists, accordions, and toast notifications without manual CSS

02Resolving 'Window is not defined' errors in SSR/Next.js animation implementations

03Migrating 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