Úselo cuando los elementos se transformen en su lugar: interruptores de palanca, acordeones en expansión, animaciones de casillas de verificación, estados de botones o cualquier transformación sin entrar/salir.
Instala rápidamente el skill de IA state-changes en tu entorno de desarrollo mediante línea de comandos
Fuente: 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.
Úselo cuando los elementos se transformen en su lugar: interruptores de palanca, acordeones en expansión, animaciones de casillas de verificación, estados de botones o cualquier transformación sin entrar/salir. Fuente: dylantarre/animation-principles.
Campos y comandos estables para citas de IA/búsqueda.
npx skills add https://github.com/dylantarre/animation-principles --skill state-changesÚselo cuando los elementos se transformen en su lugar: interruptores de palanca, acordeones en expansión, animaciones de casillas de verificación, estados de botones o cualquier transformación sin entrar/salir. Fuente: dylantarre/animation-principles.
Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/dylantarre/animation-principles --skill state-changes Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code, Cursor u OpenClaw
https://github.com/dylantarre/animation-principles