·auto-animate
</>

auto-animate

jezweb/claude-skills

Animaciones de configuración cero para React, Vue, Solid, Svelte, Preact con @formkit/auto-animate (3,28 kb). Previene 15 errores documentados, incluidos errores de React 19 StrictMode, importaciones de SSR, padres condicionales, problemas de ventana gráfica, conflictos de arrastrar y soltar y errores de transformación de CSS. Úselo cuando: anime listas/acordeones/brindis, solucione errores de animación SSR, problemas de React 19 StrictMode o necesite transiciones directas accesibles con movimiento reducido de preferencia automática.

360Instalaciones·7Tendencia·@jezweb

Instalación

$npx skills add https://github.com/jezweb/claude-skills --skill auto-animate

SKILL.md

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

Why this matters: Prevents Issue #1 (SSR/Next.js import errors). AutoAnimate uses DOM APIs not available on server.

Issue #1: SSR/Next.js Import Errors Error: "Can't import the named export 'useEffect' from non EcmaScript module" Source: https://github.com/formkit/auto-animate/issues/55 Why It Happens: AutoAnimate uses DOM APIs not available on server Prevention: Use dynamic imports (see templates/vite-ssr-safe.tsx)

Animaciones de configuración cero para React, Vue, Solid, Svelte, Preact con @formkit/auto-animate (3,28 kb). Previene 15 errores documentados, incluidos errores de React 19 StrictMode, importaciones de SSR, padres condicionales, problemas de ventana gráfica, conflictos de arrastrar y soltar y errores de transformación de CSS. Úselo cuando: anime listas/acordeones/brindis, solucione errores de animación SSR, problemas de React 19 StrictMode o necesite transiciones directas accesibles con movimiento reducido de preferencia automática. Fuente: jezweb/claude-skills.

Ver original

Datos (listos para citar)

Campos y comandos estables para citas de IA/búsqueda.

Comando de instalación
npx skills add https://github.com/jezweb/claude-skills --skill auto-animate
Categoría
</>Desarrollo
Verificado
Primera vez visto
2026-02-01
Actualizado
2026-02-18

Respuestas rápidas

¿Qué es auto-animate?

Animaciones de configuración cero para React, Vue, Solid, Svelte, Preact con @formkit/auto-animate (3,28 kb). Previene 15 errores documentados, incluidos errores de React 19 StrictMode, importaciones de SSR, padres condicionales, problemas de ventana gráfica, conflictos de arrastrar y soltar y errores de transformación de CSS. Úselo cuando: anime listas/acordeones/brindis, solucione errores de animación SSR, problemas de React 19 StrictMode o necesite transiciones directas accesibles con movimiento reducido de preferencia automática. Fuente: jezweb/claude-skills.

¿Cómo instalo auto-animate?

Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/jezweb/claude-skills --skill auto-animate Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code o Cursor

¿Dónde está el repositorio de origen?

https://github.com/jezweb/claude-skills