auto-animate
✓Configuration testée en production pour AutoAnimate (@formkit/auto-animate) - une bibliothèque d'animation sans configuration et à intégrer qui ajoute automatiquement des transitions fluides lorsque des éléments DOM sont ajoutés, supprimés ou déplacés. Cette compétence devrait être utilisé lors de la création d'interfaces utilisateur nécessitant des animations simples et automatiques pour les listes, les accordéons, les toasts ou la validation de formulaires messages sans la complexité des bibliothèques d’animation complètes. À utiliser lorsque : Ajout d'animations fluides à des listes dynamiques, création d'interfaces de filtrage/tri, création de composants en accordéon, implémenter des notifications toast, animer des messages de validation de formulaire, nécessiter des transitions simples sans code d'animation, travailler avec Vite + React + Tailwind, déployer sur Cloudflare Workers Static Assets ou rencontrer des erreurs SSR avec bibliothèques d'animations. Mots-clés : auto-animate, @formkit/auto-animate, formkit, animation sans configuration, animations automatiques, animation drop-in, animations de liste, animation accordéon, animation toast, animation de validation de formulaire, animation légère, animation 2 Ko, préfère le mouvement réduit, les animations accessibles, l'animation de réaction rapide, l'animation des travailleurs cloudflare, l'animation sécurisée ssr
Installation
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:
Configuration testée en production pour AutoAnimate (@formkit/auto-animate) - une bibliothèque d'animation sans configuration et à intégrer qui ajoute automatiquement des transitions fluides lorsque des éléments DOM sont ajoutés, supprimés ou déplacés. Cette compétence devrait être utilisé lors de la création d'interfaces utilisateur nécessitant des animations simples et automatiques pour les listes, les accordéons, les toasts ou la validation de formulaires messages sans la complexité des bibliothèques d’animation complètes. À utiliser lorsque : Ajout d'animations fluides à des listes dynamiques, création d'interfaces de filtrage/tri, création de composants en accordéon, implémenter des notifications toast, animer des messages de validation de formulaire, nécessiter des transitions simples sans code d'animation, travailler avec Vite + React + Tailwind, déployer sur Cloudflare Workers Static Assets ou rencontrer des erreurs SSR avec bibliothèques d'animations. Mots-clés : auto-animate, @formkit/auto-animate, formkit, animation sans configuration, animations automatiques, animation drop-in, animations de liste, animation accordéon, animation toast, animation de validation de formulaire, animation légère, animation 2 Ko, préfère le mouvement réduit, les animations accessibles, l'animation de réaction rapide, l'animation des travailleurs cloudflare, l'animation sécurisée ssr Source : jackspace/claudeskillz.
Faits (prêts à citer)
Champs et commandes stables pour les citations IA/recherche.
- Commande d'installation
npx skills add https://github.com/jackspace/claudeskillz --skill auto-animate- Source
- jackspace/claudeskillz
- 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 ?
Configuration testée en production pour AutoAnimate (@formkit/auto-animate) - une bibliothèque d'animation sans configuration et à intégrer qui ajoute automatiquement des transitions fluides lorsque des éléments DOM sont ajoutés, supprimés ou déplacés. Cette compétence devrait être utilisé lors de la création d'interfaces utilisateur nécessitant des animations simples et automatiques pour les listes, les accordéons, les toasts ou la validation de formulaires messages sans la complexité des bibliothèques d’animation complètes. À utiliser lorsque : Ajout d'animations fluides à des listes dynamiques, création d'interfaces de filtrage/tri, création de composants en accordéon, implémenter des notifications toast, animer des messages de validation de formulaire, nécessiter des transitions simples sans code d'animation, travailler avec Vite + React + Tailwind, déployer sur Cloudflare Workers Static Assets ou rencontrer des erreurs SSR avec bibliothèques d'animations. Mots-clés : auto-animate, @formkit/auto-animate, formkit, animation sans configuration, animations automatiques, animation drop-in, animations de liste, animation accordéon, animation toast, animation de validation de formulaire, animation légère, animation 2 Ko, préfère le mouvement réduit, les animations accessibles, l'animation de réaction rapide, l'animation des travailleurs cloudflare, l'animation sécurisée ssr Source : jackspace/claudeskillz.
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/jackspace/claudeskillz --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/jackspace/claudeskillz
Détails
- Catégorie
- </>Développement
- Source
- skills.sh
- Première apparition
- 2026-02-01