Communitygithub.com

mblode/ui-animation

Crée, révise et débogue les implémentations d'animation et de mouvement d'interface utilisateur.

Qu'est-ce que ui-animation ?

Ce skill est conçu pour les développeurs qui travaillent avec des animations UI, que ce soit pour la création, la révision ou le débogage. Il couvre un large éventail de concepts d'animation modernes : ressorts (springs), gestes, interactions de glissement, révélations par clip-path, courbes d'easing, minutage, recettes de transitions CSS, et révision d'animations. Il est particulièrement utile lorsqu'on travaille avec des bibliothèques comme framer-motion ou des animations CSS natives (transitions, keyframes). Les requêtes typiques incluent 'ajouter des animations à', 'rendre cela fluide', 'revoir mes animations', 'cela devrait-il être animé ?', 'ajouter un geste de balayage' ou 'ajouter une transition'. Pour la recréation de mouvements à partir d'une vidéo ou d'un enregistrement d'écran, il est recommandé d'utiliser le skill reverse-engineer-animation ; pour la direction visuelle et le style global, le skill ui-design ; et pour les effets de texte nommés (machine à écrire, révélation de ligne, constructions cinétiques), le skill animate-text.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mblode/agent-skills/tree/main/skills/ui-animation

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Que fait ui-animation ?

Crée, révise et débogue les implémentations d'animation et de mouvement d'interface utilisateur. Couvre les ressorts (springs), les gestes, les interactions de glissement, les révélations par clip-path, les courbes d'easing, la minutage, les recettes de transitions CSS et la révision d'animations. À utiliser lors de la conception, de l'implémentation ou de la révision de mouvements, de transitions CSS, de keyframes, de framer-motion, d'animations avec ressorts, ou lors de demandes telles que 'ajouter des animations à', 'rendre cela fluide', 'revoir mes animations', 'cela devrait-il être animé ?', 'ajouter un geste de balayage' ou 'ajouter une transition'. Pour recréer un mouvement à partir d'une vidéo ou d'un enregistrement d'écran, utilisez reverse-engineer-animation ; pour la direction visuelle et le style global, utilisez ui-design ; pour les spécifications d'effets de texte nommés (machine à écrire, révélation de ligne, constructions cinétiques), utilisez animate-text.

Skills associés