Principes de Design du Mouvement

Ce qu'il fait

Design Motion Principles est une compétence pratique de design de mouvement qui aide les agents soit à créer des animations d'interface utilisateur intentionnelles, soit à auditer le mouvement existant pour la qualité, l'accessibilité et la performance. Elle encode un flux de travail à deux modes (Création vs Audit), une porte de décision basée sur la fréquence, des directives de durée et des perspectives par designer qui aident à équilibrer la retenue, le polissage et la fantaisie lors de la proposition ou de l'évaluation d'animations.

Quand l'utiliser

Invoquez cette compétence lorsque vous devez implémenter, améliorer ou examiner le mouvement d'une interface utilisateur : transitions, animations d'entrée/sortie, micro-interactions, états de survol ou animations au niveau du système sur le web et le mobile. Utilisez le mode Création pour générer des suggestions d'implémentation (CSS, Framer Motion, patterns React) et le mode Audit pour produire des rapports systématiques et des checklists pour l'accessibilité (prefers-reduced-motion), la performance et la clarté de l'UX.

Ce qui est inclus

• Scripts : aucun (has_scripts=false)
• Références : incluses (has_references=true) — un livre de recettes du mouvement (motion cookbook), une checklist d'audit et des notes de référence de designer sont présents dans le dépôt et utilisés par les flux de travail.
• Instructions : détection du mode, une porte de fréquence, des recommandations de durée et de lissage (easing) selon le contexte, des exigences d'accessibilité (prefers-reduced-motion obligatoire) et un modèle de sortie pour les rapports d'audit.

Agents compatibles

Idéalement utilisé par des assistants capables d'écrire du code et conscients du design (Copilot/Codex, Cursor, Claude Code) pouvant produire des exemples CSS/JS, des rapports d'audit ou des suggestions d'implémentation. Elle guide à la fois la génération automatisée de code et les revues avec intervention humaine.