À utiliser lors de la conception de petits moments de retour d'information sur l'interface utilisateur, tels que les états des boutons, les bascules, la validation de formulaire, les indicateurs de chargement ou les badges de notification.
Installez rapidement le skill IA micro-interactions dans votre environnement de développement via la ligne de commande
Source : dylantarre/animation-principles.
Apply 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 |
Champs et commandes stables pour les citations IA/recherche.
npx skills add https://github.com/dylantarre/animation-principles --skill micro-interactionsÀ utiliser lors de la conception de petits moments de retour d'information sur l'interface utilisateur, tels que les états des boutons, les bascules, la validation de formulaire, les indicateurs de chargement ou les badges de notification. Source : dylantarre/animation-principles.
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/dylantarre/animation-principles --skill micro-interactions Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code, Cursor ou OpenClaw
https://github.com/dylantarre/animation-principles