Design Engineering

Ce que cela fait

Cette compétence codifie des règles pratiques, des modèles et des garde-fous d'accessibilité pour le mouvement de l'UI et le peaufinage des composants. Elle fournit à l'agent des directives concrètes sur le moment d'ajouter une animation, les propriétés à animer (transform & opacity), les conventions d'assouplissement (easing) et de durée, ainsi que les considérations de performance et d'accessibilité (prefers-reduced-motion, propriétés optimisées pour le GPU). Utilisez-la pour évaluer ou concevoir des mouvements d'UI, rédiger des directives de composants ou auditer du code front-end pour détecter les anti-modèles d'animation.

Quand l'utiliser

Déclencher lors de la revue de composants UI, de la proposition de détails d'animation, de l'écriture de code CSS/Framer Motion ou de l'audit de la performance et de l'accessibilité du mouvement. Utile pour des tâches telles que : recommander des courbes d'assouplissement et des durées, corriger des animations saccadées, convertir la syntaxe courte Framer en transformations accélérées par GPU et appliquer la réduction du mouvement.

Ce qui est inclus

• Scripts : aucun (has_scripts=false)
• Références : aucune mentionnée dans le dépôt (has_references=false)
• Instructions : règles détaillées pour l'assouplissement, la durée, l'utilisation des transformations, les modèles de clip-path, les pièges de performance, l'accessibilité (mouvement réduit) et une liste de vérification de revue avec des corrections concrètes. La compétence inclut des exemples CSS/TSX et des règles pragmatiques telles que "ne jamais animer la hauteur/largeur" et "les animations de sortie doivent être plus rapides que celles d'entrée".

Agents compatibles

Idéal pour les agents axés sur le front-end et l'ingénierie (Cursor, Copilot, Claude Code) qui conçoivent ou révisent du code UI. Utile également pour les agents de design/UX lorsqu'ils doivent décider si le mouvement apporte de la clarté ou une distraction.