Animationsmuster und Best Practices für Next.js/React-Anwendungen. Verwenden Sie diese Fähigkeit, wenn Sie Animationen, Übergänge, Hover-Effekte, Seitenübergänge, Modalitäten oder andere Bewegungen in React-Komponenten implementieren. Basierend auf Emil Kowalskis Kurs „Animationen im Web“.
Installieren Sie den KI-Skill animate schnell in Ihrer Entwicklungsumgebung über die Kommandozeile
Quelle: delphi-ai/animate-skill.
This skill provides comprehensive guidance for implementing smooth, performant, and accessible animations in Next.js and React applications. It covers CSS animations, Framer Motion, easing principles, and accessibility considerations.
| Element entering | ease-out | 200-300ms | | Element moving on screen | ease-in-out | 200-300ms | | Element exiting | ease-in | 150-200ms | | Hover effects | ease | 150ms | | Opacity only | linear | varies |
Complete working examples from the course are in the examples/ directory:
Animationsmuster und Best Practices für Next.js/React-Anwendungen. Verwenden Sie diese Fähigkeit, wenn Sie Animationen, Übergänge, Hover-Effekte, Seitenübergänge, Modalitäten oder andere Bewegungen in React-Komponenten implementieren. Basierend auf Emil Kowalskis Kurs „Animationen im Web“. Quelle: delphi-ai/animate-skill.
Stabile Felder und Befehle für KI/Such-Zitate.
npx skills add https://github.com/delphi-ai/animate-skill --skill animateAnimationsmuster und Best Practices für Next.js/React-Anwendungen. Verwenden Sie diese Fähigkeit, wenn Sie Animationen, Übergänge, Hover-Effekte, Seitenübergänge, Modalitäten oder andere Bewegungen in React-Komponenten implementieren. Basierend auf Emil Kowalskis Kurs „Animationen im Web“. Quelle: delphi-ai/animate-skill.
Ö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/delphi-ai/animate-skill --skill animate Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code, Cursor oder OpenClaw
https://github.com/delphi-ai/animate-skill