auto-animate
✓Produktionsgetestetes Setup für AutoAnimate (@formkit/auto-animate) – eine Drop-in-Animationsbibliothek ohne Konfiguration das automatisch sanfte Übergänge hinzufügt, wenn DOM-Elemente hinzugefügt, entfernt oder verschoben werden. Diese Fähigkeit sollte kann beim Erstellen von Benutzeroberflächen verwendet werden, die einfache, automatische Animationen für Listen, Akkordeons, Toasts oder Formularvalidierung benötigen Nachrichten ohne die Komplexität vollständiger Animationsbibliotheken. Verwendung bei: Hinzufügen flüssiger Animationen zu dynamischen Listen, Erstellen von Filter-/Sortierschnittstellen, Erstellen von Akkordeonkomponenten, Implementieren von Toastbenachrichtigungen, Animieren von Formularvalidierungsnachrichten, Erfordernis einfacher Übergänge ohne Animationscode, Arbeiten mit Vite + React + Tailwind, Bereitstellen in Cloudflare Workers Static Assets oder Auftreten von SSR-Fehlern bei Animationsbibliotheken. Schlüsselwörter: automatisch animieren, @formkit/auto-animate, Formkit, Zero-Config-Animation, automatische Animationen, Drop-in-Animation, Listenanimationen, Akkordeonanimation, Toastanimation, Formularvalidierungsanimation, leichte Animation, 2-KB-Animation, Bevorzugt-reduzierte Bewegung, zugängliche Animationen, Vite-React-Animation, Cloudflare-Worker-Animation, SSR-sichere Animation
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:
Produktionsgetestetes Setup für AutoAnimate (@formkit/auto-animate) – eine Drop-in-Animationsbibliothek ohne Konfiguration das automatisch sanfte Übergänge hinzufügt, wenn DOM-Elemente hinzugefügt, entfernt oder verschoben werden. Diese Fähigkeit sollte kann beim Erstellen von Benutzeroberflächen verwendet werden, die einfache, automatische Animationen für Listen, Akkordeons, Toasts oder Formularvalidierung benötigen Nachrichten ohne die Komplexität vollständiger Animationsbibliotheken. Verwendung bei: Hinzufügen flüssiger Animationen zu dynamischen Listen, Erstellen von Filter-/Sortierschnittstellen, Erstellen von Akkordeonkomponenten, Implementieren von Toastbenachrichtigungen, Animieren von Formularvalidierungsnachrichten, Erfordernis einfacher Übergänge ohne Animationscode, Arbeiten mit Vite + React + Tailwind, Bereitstellen in Cloudflare Workers Static Assets oder Auftreten von SSR-Fehlern bei Animationsbibliotheken. Schlüsselwörter: automatisch animieren, @formkit/auto-animate, Formkit, Zero-Config-Animation, automatische Animationen, Drop-in-Animation, Listenanimationen, Akkordeonanimation, Toastanimation, Formularvalidierungsanimation, leichte Animation, 2-KB-Animation, Bevorzugt-reduzierte Bewegung, zugängliche Animationen, Vite-React-Animation, Cloudflare-Worker-Animation, SSR-sichere Animation Quelle: jackspace/claudeskillz.
Fakten (zitierbereit)
Stabile Felder und Befehle für KI/Such-Zitate.
- Installationsbefehl
npx skills add https://github.com/jackspace/claudeskillz --skill auto-animate- Quelle
- jackspace/claudeskillz
- Kategorie
- </>Entwicklung
- Verifiziert
- ✓
- Erstes Auftreten
- 2026-02-01
- Aktualisiert
- 2026-02-18
Schnelle Antworten
Was ist auto-animate?
Produktionsgetestetes Setup für AutoAnimate (@formkit/auto-animate) – eine Drop-in-Animationsbibliothek ohne Konfiguration das automatisch sanfte Übergänge hinzufügt, wenn DOM-Elemente hinzugefügt, entfernt oder verschoben werden. Diese Fähigkeit sollte kann beim Erstellen von Benutzeroberflächen verwendet werden, die einfache, automatische Animationen für Listen, Akkordeons, Toasts oder Formularvalidierung benötigen Nachrichten ohne die Komplexität vollständiger Animationsbibliotheken. Verwendung bei: Hinzufügen flüssiger Animationen zu dynamischen Listen, Erstellen von Filter-/Sortierschnittstellen, Erstellen von Akkordeonkomponenten, Implementieren von Toastbenachrichtigungen, Animieren von Formularvalidierungsnachrichten, Erfordernis einfacher Übergänge ohne Animationscode, Arbeiten mit Vite + React + Tailwind, Bereitstellen in Cloudflare Workers Static Assets oder Auftreten von SSR-Fehlern bei Animationsbibliotheken. Schlüsselwörter: automatisch animieren, @formkit/auto-animate, Formkit, Zero-Config-Animation, automatische Animationen, Drop-in-Animation, Listenanimationen, Akkordeonanimation, Toastanimation, Formularvalidierungsanimation, leichte Animation, 2-KB-Animation, Bevorzugt-reduzierte Bewegung, zugängliche Animationen, Vite-React-Animation, Cloudflare-Worker-Animation, SSR-sichere Animation Quelle: jackspace/claudeskillz.
Wie installiere ich auto-animate?
Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/jackspace/claudeskillz --skill auto-animate Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code oder Cursor
Wo ist das Quell-Repository?
https://github.com/jackspace/claudeskillz
Details
- Kategorie
- </>Entwicklung
- Quelle
- skills.sh
- Erstes Auftreten
- 2026-02-01