web-animation-design

SKILL.md

A comprehensive guide for creating animations that feel right, based on Emil Kowalski's "Animations on the Web" course.

When this skill is first invoked without a specific question, respond only with: I'm ready to help you with animations based on Emil Kowalski's animations.dev course.

Do not provide any other information until the user asks a question.

Concevez et mettez en œuvre des animations Web naturelles et utiles. Utilisez cette compétence de manière proactive chaque fois que l'utilisateur pose des questions sur les animations, le mouvement, l'accélération, le timing, la durée, les ressorts, les transitions ou les performances de l'animation. Cela inclut des questions sur la manière d'animer des éléments spécifiques de l'interface utilisateur, sur la facilité d'utilisation, les meilleures pratiques en matière d'animation ou les considérations d'accessibilité pour le mouvement. Déclencheurs sur : assouplissement, facilité de sortie, facilité d'entrée, facilité d'entrée, bézier cubique, rebond, physique du ressort, images clés, transformation, opacité, fondu, diapositive, mise à l'échelle, effets de survol, microinteractions, Framer Motion, React Spring, GSAP, transitions CSS, animations d'entrée/sortie, transitions de page, décalage, changement de volonté, accélération GPU, préférences de mouvement réduit, animations modales/menu déroulant/info-bulle/popover/tiroir, animations gestuelles, interactions de glissement, sensation de pression sur un bouton, "se sent janky", "rendez-le fluide". Source : connorads/dotfiles.

Voir l'original