auto-animate
✓Configuración probada en producción para AutoAnimate (@formkit/auto-animate): una biblioteca de animación integrada sin configuración que agrega automáticamente transiciones suaves cuando se agregan, eliminan o mueven elementos DOM. Esta habilidad debería Se puede utilizar al crear UI que necesitan animaciones simples y automáticas para listas, acordeones, brindis o validación de formularios. mensajes sin la complejidad de las bibliotecas de animación completas. Úselo cuando: Agregar animaciones fluidas a listas dinámicas, crear interfaces de filtro/clasificación, crear componentes de acordeón, implementar notificaciones de brindis, animar mensajes de validación de formularios, necesitar transiciones simples sin código de animación, trabajar con Vite + React + Tailwind, implementar en Cloudflare Workers Static Assets o encontrar errores de SSR con bibliotecas de animación. Palabras clave: animación automática, @formkit/auto-animate, formkit, animación sin configuración, animaciones automáticas, animación directa, animaciones de lista, animación de acordeón, animación de brindis, animación de validación de formulario, animación ligera, animación de 2kb, prefiere movimiento reducido, animaciones accesibles, animación de reacción de vite, animación de trabajadores de Cloudflare, animación de seguridad ssr
Instalación
SKILL.md
Status: Production Ready ✅ Last Updated: 2025-11-07 Dependencies: None (works with any React setup) Latest Versions: @formkit/auto-animate@0.9.0
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)
Issue #2: Conditional Parent Rendering Error: Animations don't work when parent is conditional Source: https://github.com/formkit/auto-animate/issues/8 Why It Happens: Ref can't attach to non-existent element Prevention:
Configuración probada en producción para AutoAnimate (@formkit/auto-animate): una biblioteca de animación integrada sin configuración que agrega automáticamente transiciones suaves cuando se agregan, eliminan o mueven elementos DOM. Esta habilidad debería Se puede utilizar al crear UI que necesitan animaciones simples y automáticas para listas, acordeones, brindis o validación de formularios. mensajes sin la complejidad de las bibliotecas de animación completas. Úselo cuando: Agregar animaciones fluidas a listas dinámicas, crear interfaces de filtro/clasificación, crear componentes de acordeón, implementar notificaciones de brindis, animar mensajes de validación de formularios, necesitar transiciones simples sin código de animación, trabajar con Vite + React + Tailwind, implementar en Cloudflare Workers Static Assets o encontrar errores de SSR con bibliotecas de animación. Palabras clave: animación automática, @formkit/auto-animate, formkit, animación sin configuración, animaciones automáticas, animación directa, animaciones de lista, animación de acordeón, animación de brindis, animación de validación de formulario, animación ligera, animación de 2kb, prefiere movimiento reducido, animaciones accesibles, animación de reacción de vite, animación de trabajadores de Cloudflare, animación de seguridad ssr Fuente: jackspace/claudeskillz.
Datos (listos para citar)
Campos y comandos estables para citas de IA/búsqueda.
- Comando de instalación
npx skills add https://github.com/jackspace/claudeskillz --skill auto-animate- Fuente
- jackspace/claudeskillz
- Categoría
- </>Desarrollo
- Verificado
- ✓
- Primera vez visto
- 2026-02-01
- Actualizado
- 2026-02-18
Respuestas rápidas
¿Qué es auto-animate?
Configuración probada en producción para AutoAnimate (@formkit/auto-animate): una biblioteca de animación integrada sin configuración que agrega automáticamente transiciones suaves cuando se agregan, eliminan o mueven elementos DOM. Esta habilidad debería Se puede utilizar al crear UI que necesitan animaciones simples y automáticas para listas, acordeones, brindis o validación de formularios. mensajes sin la complejidad de las bibliotecas de animación completas. Úselo cuando: Agregar animaciones fluidas a listas dinámicas, crear interfaces de filtro/clasificación, crear componentes de acordeón, implementar notificaciones de brindis, animar mensajes de validación de formularios, necesitar transiciones simples sin código de animación, trabajar con Vite + React + Tailwind, implementar en Cloudflare Workers Static Assets o encontrar errores de SSR con bibliotecas de animación. Palabras clave: animación automática, @formkit/auto-animate, formkit, animación sin configuración, animaciones automáticas, animación directa, animaciones de lista, animación de acordeón, animación de brindis, animación de validación de formulario, animación ligera, animación de 2kb, prefiere movimiento reducido, animaciones accesibles, animación de reacción de vite, animación de trabajadores de Cloudflare, animación de seguridad ssr Fuente: jackspace/claudeskillz.
¿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/jackspace/claudeskillz --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/jackspace/claudeskillz
Detalles
- Categoría
- </>Desarrollo
- Fuente
- skills.sh
- Primera vez visto
- 2026-02-01