106.9K+Télécharger
Aller au guide d’utilisation
UI Animationpar mblode

UI Animation Skill.

Créez, déboguez et mesurez des animations d’interface utiles.

  • Animation UI
  • Réduction des animations
Télécharger OpenDesignVoir le guide d'utilisation
Revue de la source · ui-animationSKILL.md
Tâche Créez, déboguez et mesurez des animations d’interface utiles. Résultats Une implémentation ou un examen ciblé du mouvement d’interface. Avant de commencer Fournissez code du composant ou enregistrement clair, fréquence de l’action et appareils cibles. Précisez examen, modification d’implémentation ou reconstruction mesurée.
Résumé éditorial · source examinée le 2026-11-02 · ce n’est pas un exemple généré

01 Fonctionnement

Créez, déboguez et mesurez des animations d’interface utiles

Examinez transitions, ressorts et gestes UI, ou ajustez le mouvement d’un enregistrement en vérifiant interruptions, fréquence d’images et réduction des animations.

Flux de travail fondé sur la sourcePas un benchmark d'exécution

La méthode de travail

ui-animation couvre création, examen et mesure du mouvement d’interface. Il part du but et de la fréquence de l’interaction, puis choisit timing et implémentation. Feedback, orientation et continuité guident la décision ; les actions fréquentes doivent rester immédiates.

Un second processus mesure le mouvement d’un enregistrement. Il extrait les images, suit un élément et ajuste des courbes de ressort ou d’accélération avant de produire des paramètres d’implémentation. Ouverture et fermeture sont traitées séparément ; un nouvel enregistrement est comparé à la référence pour vérifier que les phases reconstruites ont été conservées.

Livrables attendus

  • Une implémentation ou un examen ciblé du mouvement d’interface.
  • Une spécification mesurée de ressort ou de courbe issue d’un enregistrement.
  • Un document de transmission avec temps, phases des propriétés et observations de validation.
Voir l'exemple de brief

Du brief à la revue

  1. 01
    Définir pourquoi l’état doit bouger

    Identifiez les besoins de feedback, continuité ou orientation et la fréquence de l’action. Préservez l’exécution immédiate et le focus clavier.

  2. 02
    Choisir ou mesurer le mouvement

    Sélectionnez une recette de composant, ou extrayez les images d’un enregistrement à sa fréquence d’images réelle et ajustez le mouvement pertinent. Distinguez les phases d’ouverture et de fermeture.

  3. 03
    Tester l’interaction réelle

    Basculez rapidement, examinez au ralenti et testez tactile et réduction des animations. Pour une reconstruction, comparez un enregistrement de l’implémentation à l’original.

02 Cas d’usage

Quand l’utiliser

Fournissez code du composant ou enregistrement clair, fréquence de l’action et appareils cibles. Précisez examen, modification d’implémentation ou reconstruction mesurée.

Un bon choix

  • Une interaction semble incorrecteLa source oriente lenteur, sauts et déclenchements erronés vers des contrôles précis de timing ou d’implémentation.
  • Il faut reproduire un effet enregistréLes scripts de mesure vont au-delà d’un ressort estimé à l’œil.

Limites à vérifier

  • Il ne définit pas toute la direction visuellePalette, typographie et design produit général sont hors du périmètre principal.
  • La mesure nécessite des dépendancesLe processus scripté utilise FFmpeg et des packages Python pour suivi et ajustement de courbes.
  • Un ajustement ne prouve pas l’équivalenceImages perdues, fréquence variable et mouvement multiphase peuvent rendre une courbe unique trompeuse.

Éléments à fournir

  • Composant ou enregistrementFournissez le code à améliorer ou un clip clair de l’interaction de référence.
  • Comportement et fréquenceDécrivez action utilisateur, état résultant et fréquence de répétition.
  • Plateforme ciblePrécisez stack, appareils et exigences d’accessibilité.

03 Décisions importantes

Les décisions importantes

  1. L’utilité avant la décoration

    Le cadre de décision peut refuser une animation inutile autant qu’en recommander une.

  2. Gestion des interruptions

    Les bascules rapides révèlent des problèmes de redémarrage et de reciblage invisibles en lecture normale.

  3. Transmission mesurée

    Temps distincts par propriété et paramètres ajustés rendent la reconstruction plus précise.

04 Exemple de brief

Essayez un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Examinez la source et la configuration

Fournissez le code à améliorer ou un clip clair de l’interaction de référence.

Fichier source amont
https://github.com/mblode/agent-skills/blob/391508702523088f564fecfdd95ce76304efb117/skills/ui-animation/SKILL.md

Le lien ci-dessous ouvre les instructions d’origine. Vérifiez la configuration du dépôt avant utilisation ; ce n’est pas une commande d’installation.

Commencez par un livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d’exécuter le skill.

Exemple de brief
Utilise ui-animation pour diagnostiquer le tiroir dans mon enregistrement et composant React fournis. Mesure séparément ouverture et fermeture à la fréquence réelle. Détermine si le délai perçu vient de la courbe, d’une pause initiale ou d’un travail bloquant le thread principal. Garde le focus clavier immédiat et préserve le comportement existant. Propose la modification minimale, puis teste bascules rapides et réduction des animations. Si tu ajustes un ressort ou une courbe, rapporte les limites et compare l’enregistrement de l’interaction corrigée à la référence, sans affirmer une correspondance visuelle sur les seuls paramètres.

Examinez le résultat

Comparez le résultat réel à ces critères observables.

  • Testez reciblage rapide et lecture lente dans les deux sens.
  • Faites correspondre les fréquences d’images utilisées pour l’extraction et l’ajustement des courbes.
  • Réalisez la même tâche en mode réduit et au tactile.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec ses outils externes, ses identifiants et ses dépendances logicielles.

Télécharger OpenDesignLire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
mblode
Dépôt
mblode/agent-skills
Fichier du skill
SKILL.md
Licence
MIT
Version examinée
2026-11-02 · 391508702523
Résumé éditorial de la source
Créez, déboguez et mesurez des animations d’interface utiles.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Peut-il trouver où ajouter des animations ?

Oui. Sa découverte rapporte des occasions selon but et fréquence, y compris les suggestions rejetées. La découverte seule n’autorise pas l’implémentation.

Pourquoi mesurer ouverture et fermeture séparément ?

Leurs temps et caractères diffèrent souvent. La source avertit de ne pas ajuster un sens puis simplement l’inverser.

Une règle CSS de réduction couvre-t-elle tout ?

Pas nécessairement. La source précise que le mouvement piloté par JavaScript nécessite sa propre gestion et doit être testé dans l’interaction réelle.

OpenDesign

Gardez votre brief et votre travail de design au même endroit.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de design
Fichier source amont
https://github.com/mblode/agent-skills/blob/391508702523088f564fecfdd95ce76304efb117/skills/ui-animation/SKILL.md