interaction-designpar Seth Hobson

Interaction Design Skill.

Un skill Claude Code et Codex pour la recherche UX : micro-interactions, mouvement, transitions et patterns de retour utilisateur.

UX et recherche

Télécharger OpenDesign Voir le guide d'utilisation

wshobson/agents · plugins/ui-design/skills/interaction-design/SKILL.mdSKILL.md

--- name: interaction-design description: Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences. --- ## When to Use This Skill ## Core Principles ## Quick Start: Button Microinteraction ## Interaction Patterns ## CSS Animation Patterns ## Accessibility Considerations

En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 7 572 caractères au total

01 Ce qu'il fait

Ce que fait le skill interaction-design dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Ce skill conçoit et met en œuvre des microinteractions, du motion design, des transitions et des schémas de retour utilisateur pour améliorer l'utilisabilité et ravir les utilisateurs. Il fournit des indications précises de timing : 100-150 ms pour les micro-retours comme les survols et les clics, 200-300 ms pour les petites transitions telles que les commutateurs et les menus déroulants, 300-500 ms pour les transitions moyennes incluant les modales et les changements de page, et plus de 500 ms pour les animations chorégraphiées complexes.

Le skill couvre les états de chargement avec des écrans squelettes et des indicateurs de progression, les interactions gestuelles comme le glisser pour fermer, les transitions de page, et les schémas de retour comme les effets d'ondulation. Il met l'accent sur un mouvement volontaire qui communique plutôt que décore, en utilisant quatre principes : le retour pour confirmer les actions, l'orientation pour montrer le déplacement des éléments, le focus pour diriger l'attention, et la continuité pour maintenir le contexte pendant les transitions.

Ce qu'il produit

Microinteractions de bouton avec animations de survol, de tap et de ressort
Écrans squelettes avec animation pulsante pour les états de chargement
Composants de commutation avec transitions d'état fluides basées sur un ressort
Transitions de page avec opacité et mouvement vertical grâce à AnimatePresence

Voir l'exemple de prompt ↗

Fonctionnement

01
Suivre les indications de timing selon l'échelle de l'interaction
Utilisez 100-150 ms pour les micro-retours comme les survols et les clics, 200-300 ms pour les petites transitions comme les commutateurs, 300-500 ms pour les transitions moyennes comme les modales, et plus de 500 ms pour les animations complexes.
02
Sélectionner les fonctions d'accélération appropriées
Utilisez ease-out (décélération) pour les éléments qui entrent, ease-in (accélération) pour les éléments qui sortent, ease-in-out pour se déplacer entre les états, et spring pour des effets de dépassement ludiques.
03
Respecter les préférences d'accessibilité
Vérifiez la media query prefers-reduced-motion et réduisez la durée des animations à 0,01 ms lorsque l'utilisateur a demandé une réduction des animations, afin qu'elles ne causent pas de gêne.

02 Trouvez celui qui vous convient

Quand utiliser le skill interaction-design

Utilisez le skill interaction-design dans Claude Code ou Codex lorsque le travail est une recherche UX de ce type. L'adéquation et les limites ci-dessous sont tirées du propre fichier du skill.

Bon choix

Ajouter des microinteractions pour renforcer le retour utilisateur sur les boutons, interrupteurs et éléments interactifs
Mettre en place des transitions fluides entre les pages et les composants, d'une vue ou d'un état à l'autre
Concevoir des états de chargement et des écrans squelettes qui préservent la mise en page pendant la récupération des données
Créer des interactions basées sur les gestes, comme le glisser pour fermer ou le glisser-déposer
Construire des systèmes de notifications et de toasts avec des animations d'entrée et de sortie

Connaître les limites

Animer les propriétés width, height, top ou left, ce qui provoque des saccades de performance
Utiliser à outrance will-change pour l'optimisation, ce qui peut nuire aux performances

03 Dans le skill

Règles que le skill interaction-design impose à Claude Code et Codex

3 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe à l'agent — la partie du fichier qui change le résultat.

Animer uniquement transform et opacity
Utilisez exclusivement les propriétés transform et opacity pour des animations fluides à 60 fps. N'animez jamais width, height, top ou left, car cela provoque des animations saccadées.
Le mouvement doit communiquer, pas décorer
Chaque animation doit avoir un objectif : confirmer qu'une action a eu lieu, montrer où les éléments se déplacent, diriger l'attention vers des changements ou maintenir le contexte.
Utiliser une échelle de timing cohérente
Appliquez les mêmes valeurs de timing et fonctions d'easing de manière cohérente sur l'ensemble de l'application pour créer une sensation homogène.

04 Mettez-le en pratique

Installer interaction-design dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter interaction-design à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

npx skills add https://github.com/wshobson/agents --skill interaction-design

Forme générique de la CLI skills pour plugins/ui-design/skills/interaction-design/SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au Skill une Première Tâche de Recherche UX

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt

Add microinteractions to the [component name] in [file path]. Implement hover and tap feedback on the submit button, add a skeleton screen for the loading state, and create a smooth toggle animation for the [setting name] switch. Make sure all animations respect prefers-reduced-motion and run at 60fps.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Vérifiez que les utilisateurs peuvent interrompre et annuler les animations longues

Dans OpenDesign importez interaction-design depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branche main
Fichier du skill: plugins/ui-design/skills/interaction-design/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 4236bb9
License: MIT D'après LICENSE.
Étoiles du dépôt: 39 635 Capture GitHub prise le 14/09/2026 pour l'ensemble du dépôt wshobson/agents, qui contient 18 skills dans ce catalogue. Ce n'est pas une note ni un décompte d'utilisation pour interaction-design.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Quand utiliser ce skillRépertorie huit scénarios, notamment les microinteractions, les transitions, les états de chargement, les gestes, les notifications, le glisser-déposer, les animations de défilement et les états au survol
Principes fondamentauxDéfinit le mouvement intentionnel à travers quatre principes et fournit des recommandations de timing et des fonctions d'easing selon les types d'interaction
Démarrage rapide : microinteraction sur boutonMontre un exemple complet de bouton Framer Motion avec animation au survol, au clic et à ressort
Modèles d'interactionFournit des exemples de code pour les états de chargement, les transitions d'état, les transitions de page, des modèles de retour comme le ripple, et des interactions gestuelles comme le glisser pour fermer
Modèles d'animation CSSPrésente des animations par images clés pour fadeIn, pulse et spin, ainsi que des transitions CSS pour les effets au survol
Considérations d'accessibilitéMontre comment détecter et respecter prefers-reduced-motion aussi bien en CSS qu'en JavaScript
Bonnes pratiquesListe sept règles, dont l'approche axée sur la performance, la prise en charge du mouvement réduit, un minutage cohérent, les animations à ressort, l'interruptibilité, l'amélioration progressive et les tests sur appareils
Problèmes courantsIdentifie cinq écueils, dont les animations saccadées, l'excès d'animation, les interactions bloquantes, les fuites de mémoire et une utilisation inadaptée de will-change

Description du skill lui-même

« Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences. »

Description du front-matter tirée de SKILL.md. Le fichier complet fait environ 7 572 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill interaction-design

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Quelle bibliothèque d'animation ce skill utilise-t-il ?

Le skill utilise principalement Framer Motion pour les composants React, illustré par des exemples comme AnimatePresence pour les transitions de page et les composants motion pour les gestes. Il couvre aussi les animations CSS pures avec keyframes et transitions, montrant que les deux approches fonctionnent ensemble.

Interaction Design

Exécuter interaction-design sur une vraie tâche de recherche UX.

Téléchargez OpenDesign, importez interaction-design depuis son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills