auto-animate
✓Animaciones de configuración cero para React, Vue, Solid, Svelte, Preact con @formkit/auto-animate (3,28 kb). Previene más de 10 errores documentados: importaciones de SSR/Next.js, padres condicionales, claves faltantes, ancho de flexbox, visualización de tablas, configuración de Jest/esbuild, conflictos de posición de CSS, registro de Vue/Nuxt, Angular ESM. Úselo cuando: animando listas/acordeones/brindis/formularios, solucionando errores de animación SSR, necesidad animaciones accesibles (automático prefiere movimiento reducido) o desea transiciones directas sin sobrecarga de movimiento.
Instalación
SKILL.md
Package: @formkit/auto-animate@0.9.0 (Sept 2025) Frameworks: React, Vue, Solid, Svelte, Preact Last Updated: 2025-11-22
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 más de 10 errores documentados: importaciones de SSR/Next.js, padres condicionales, claves faltantes, ancho de flexbox, visualización de tablas, configuración de Jest/esbuild, conflictos de posición de CSS, registro de Vue/Nuxt, Angular ESM. Úselo cuando: animando listas/acordeones/brindis/formularios, solucionando errores de animación SSR, necesidad animaciones accesibles (automático prefiere movimiento reducido) o desea transiciones directas sin sobrecarga de movimiento. Fuente: ovachiever/droid-tings.
Datos (listos para citar)
Campos y comandos estables para citas de IA/búsqueda.
- Comando de instalación
npx skills add https://github.com/ovachiever/droid-tings --skill auto-animate- Fuente
- ovachiever/droid-tings
- 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 más de 10 errores documentados: importaciones de SSR/Next.js, padres condicionales, claves faltantes, ancho de flexbox, visualización de tablas, configuración de Jest/esbuild, conflictos de posición de CSS, registro de Vue/Nuxt, Angular ESM. Úselo cuando: animando listas/acordeones/brindis/formularios, solucionando errores de animación SSR, necesidad animaciones accesibles (automático prefiere movimiento reducido) o desea transiciones directas sin sobrecarga de movimiento. Fuente: ovachiever/droid-tings.
¿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/ovachiever/droid-tings --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/ovachiever/droid-tings
Detalles
- Categoría
- </>Desarrollo
- Fuente
- skills.sh
- Primera vez visto
- 2026-02-01