À utiliser lorsque des éléments se transforment sur place : interrupteurs à bascule, accordéons en expansion, animations de cases à cocher, états de boutons ou toute transformation sans entrée/sortie.
Installez rapidement le skill IA state-changes dans votre environnement de développement via la ligne de commande
Source : dylantarre/animation-principles.
Squash & Stretch: Elements compress before expanding. A toggle switch squashes 5% before sliding.
Anticipation: Wind up before the change. Slight reverse movement (2-3px) before expanding.
Staging: Keep transformations centered on user focus. Don't let state changes distract from the interaction point.
À utiliser lorsque des éléments se transforment sur place : interrupteurs à bascule, accordéons en expansion, animations de cases à cocher, états de boutons ou toute transformation sans entrée/sortie. Source : dylantarre/animation-principles.
Champs et commandes stables pour les citations IA/recherche.
npx skills add https://github.com/dylantarre/animation-principles --skill state-changesÀ utiliser lorsque des éléments se transforment sur place : interrupteurs à bascule, accordéons en expansion, animations de cases à cocher, états de boutons ou toute transformation sans entrée/sortie. 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 state-changes 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