auto-animate
✓Animations sans configuration pour React, Vue, Solid, Svelte, Preact avec @formkit/auto-animate (3,28 Ko). Empêche plus de 10 erreurs documentées : importations SSR/Next.js, parents conditionnels, clés manquantes, largeur de la flexbox, affichage du tableau, configuration Jest/esbuild, conflits de position CSS, enregistrement Vue/Nuxt, Angular ESM. À utiliser lorsque : animation de listes/accordéons/toasts/formulaires, dépannage des erreurs d'animation SSR, besoin animations accessibles (préférences automatiques de mouvement réduit) ou souhaitez des transitions instantanées sans surcharge de mouvement.
Installation
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)
Animations sans configuration pour React, Vue, Solid, Svelte, Preact avec @formkit/auto-animate (3,28 Ko). Empêche plus de 10 erreurs documentées : importations SSR/Next.js, parents conditionnels, clés manquantes, largeur de la flexbox, affichage du tableau, configuration Jest/esbuild, conflits de position CSS, enregistrement Vue/Nuxt, Angular ESM. À utiliser lorsque : animation de listes/accordéons/toasts/formulaires, dépannage des erreurs d'animation SSR, besoin animations accessibles (préférences automatiques de mouvement réduit) ou souhaitez des transitions instantanées sans surcharge de mouvement. Source : ovachiever/droid-tings.
Faits (prêts à citer)
Champs et commandes stables pour les citations IA/recherche.
- Commande d'installation
npx skills add https://github.com/ovachiever/droid-tings --skill auto-animate- Source
- ovachiever/droid-tings
- Catégorie
- </>Développement
- Vérifié
- ✓
- Première apparition
- 2026-02-01
- Mis à jour
- 2026-02-18
Réponses rapides
Qu'est-ce que auto-animate ?
Animations sans configuration pour React, Vue, Solid, Svelte, Preact avec @formkit/auto-animate (3,28 Ko). Empêche plus de 10 erreurs documentées : importations SSR/Next.js, parents conditionnels, clés manquantes, largeur de la flexbox, affichage du tableau, configuration Jest/esbuild, conflits de position CSS, enregistrement Vue/Nuxt, Angular ESM. À utiliser lorsque : animation de listes/accordéons/toasts/formulaires, dépannage des erreurs d'animation SSR, besoin animations accessibles (préférences automatiques de mouvement réduit) ou souhaitez des transitions instantanées sans surcharge de mouvement. Source : ovachiever/droid-tings.
Comment installer auto-animate ?
Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/ovachiever/droid-tings --skill auto-animate Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code ou Cursor
Où se trouve le dépôt source ?
https://github.com/ovachiever/droid-tings
Détails
- Catégorie
- </>Développement
- Source
- skills.sh
- Première apparition
- 2026-02-01