Was ist micro-interactions?
Verwenden Sie es beim Entwerfen kleiner UI-Feedback-Momente wie Schaltflächenzustände, Umschalter, Formularvalidierung, Ladeindikatoren oder Benachrichtigungsabzeichen. Quelle: dylantarre/animation-principles.
·micro-interactions
*
micro-interactions
✓dylantarre/animation-principlesGitHub: dylantarre/animation-principlesQuelle: dylantarre/animation-principles
Verwenden Sie es beim Entwerfen kleiner UI-Feedback-Momente wie Schaltflächenzustände, Umschalter, Formularvalidierung, Ladeindikatoren oder Benachrichtigungsabzeichen.
Installation
So installieren Sie micro-interactions
Installieren Sie den KI-Skill micro-interactions schnell in Ihrer Entwicklungsumgebung über die Kommandozeile
- Terminal öffnen: Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.)
- Installationsbefehl ausführen: Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/dylantarre/animation-principles --skill micro-interactions
- Installation überprüfen: Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code, Cursor oder OpenClaw
Quelle: dylantarre/animation-principles.
SKILL.md
Original anzeigenApply Disney's 12 animation principles to small UI feedback moments and interface details.
| Squash & Stretch | Button press compression, toggle bounce | | Anticipation | Hover state hints, pre-click feedback | | Staging | Focus attention on active element | | Straight Ahead / Pose to Pose | Progress vs state changes | | Follow Through / Overlapping | Ripple effects, settling motion | | Slow In / Slow Out | Snappy but smooth transitions |
| Arc | Toggle switches, circular menus | | Secondary Action | Icons respond to parent state | | Timing | 100-300ms for most interactions | | Exaggeration | Clear but not distracting | | Solid Drawing | Consistent transform behavior | | Appeal | Delightful, purposeful feedback |
Fakten (zitierbereit)
Stabile Felder und Befehle für KI/Such-Zitate.
- Installationsbefehl
npx skills add https://github.com/dylantarre/animation-principles --skill micro-interactions- Kategorie
- *Kreativität
- Verifiziert
- ✓
- Erstes Auftreten
- 2026-02-19
- Aktualisiert
- 2026-03-10
Schnelle Antworten
Wie installiere ich micro-interactions?
Ö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/dylantarre/animation-principles --skill micro-interactions Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code, Cursor oder OpenClaw
Wo ist das Quell-Repository?
https://github.com/dylantarre/animation-principles
Details
- Kategorie
- *Kreativität
- Quelle
- skills.sh
- Erstes Auftreten
- 2026-02-19