animation-vocabularypar Emil Kowalski

Animation Vocabulary Skill.

Un skill Claude Code et Codex pour le motion et la vidéo : glossaire à recherche inversée qui transforme une description vague de mouvement en son terme exact.

Mouvement et vidéo

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

emilkowalski/skills · skills/animation-vocabulary/SKILL.mdSKILL.md

--- name: animation-vocabulary description: Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or building … --- ## Quick Start ## Instructions ## Examples ## Glossary

Entête et titres de section lus depuis le fichier source le 14/09/2026 · 12 884 caractères au total

01 Ce qu'il fait

Ce que fait le skill animation-vocabulary 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

animation-vocabulary est un glossaire de recherche inversée pour nommer le mouvement web. Vous décrivez un effet de façon approximative — « le truc rebondissant quand un popover s'ouvre », « le défilement élastique façon iOS » — et il retourne le terme exact ainsi que la description propre au glossaire, sous la forme Stagger — Animer plusieurs éléments l'un après l'autre.

C'est destiné aux designers et développeurs qui ont besoin du bon mot pour prompter une IA ou un designer, pas pour concevoir ou construire l'animation. Le glossaire couvre Entrées & Sorties, Séquencement & Timing, Mouvement & Transformations, Easing, Animations à ressort, Défilement, Retour & Interaction, Performance et Principes à connaître, et il met en contraste des paires proches comme Clip-path et Mask.

Ce qu'il produit

Le terme correspondant plus la définition propre au glossaire, sur une ligne formatée
Une liste à puces d'alternatives proches avec une condition pour chacune
Une approximation explicitement signalée quand rien ne correspond

Voir l'exemple de prompt ↗

Fonctionnement

01
Faire correspondre la sensation, pas les mots-clés
L'utilisateur décrit à quoi le mouvement ressemble ou ce qu'il fait ressentir, et cette sensation est mise en correspondance avec le glossaire plutôt que comparée à des chaînes techniques.
02
Répondre dans le format fixe du skill
Une ligne : le terme en gras, un tiret cadratin, puis la description propre au glossaire. Aucun préambule autour de la réponse.
03
Classer la correspondance, puis lister les alternatives
Lorsque plusieurs termes conviennent, la meilleure correspondance vient en premier et un ou deux termes concurrents suivent, avec une ligne expliquant en quoi chacun diffère.
04
Donner le terme en premier, puis s'arrêter
Le terme vient en premier et le raisonnement est retenu, sauf si l'utilisateur en demande davantage.

02 Trouvez celui qui vous convient

Quand utiliser le skill animation-vocabulary

Utilisez le skill animation-vocabulary dans Claude Code ou Codex lorsque le travail concerne le mouvement et la vidéo de ce type. Les capacités et limites ci-dessous sont tirées du propre fichier du skill.

Bon choix

Vous pouvez visualiser précisément l'effet, mais le nom vous échappe, par exemple la popover qui se déploie depuis le bouton qui l'a déclenchée.
Vous avez besoin du vocabulaire pour briefer une IA ou un designer, plutôt que pour implémenter quoi que ce soit vous-même.
La demande arrive sous forme de question de nommage : comment appelle-t-on…
Vous ne pouvez décrire qu'une sensation physique, comme un overscroll qui résiste puis revient d'un coup.

Connaître les limites

Concevoir ou construire l'animation — le skill se limite à nommer l'effet.
Les termes qui sortent de ce glossaire : plutôt que de l'étendre, le skill signale le manque.

Quoi fournir

EntréeAucun élément technique n'est requis au départ ; le skill interprète ce qui est décrit, pas une liste de mots-clés.
EntréePrécisez de quel élément cela sort ou à quel élément cela s'attache, car des termes comme l'animation origin-aware se définissent par cette relation.

03 Dans le skill

Les règles de vocabulaire d'animation que le skill animation-vocabulary donne à Claude Code et Codex

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

Citer le glossaire, ne pas paraphraser
Les descriptions sont traitées comme un texte de référence faisant autorité, la formulation est donc reprise à l'identique plutôt que reformulée pour l'utilisateur.
Mettre explicitement en contraste les termes concurrents
Des paires proches comme Clip-path face à Mask, Pop in face à Bounce, Shared element transition face à Layout animation doivent être mises côte à côte plutôt que choisies en silence.
Ne jamais inventer un terme
Si le terme exact est absent du glossaire, le dire clairement ; les mots déjà présents dans le glossaire peuvent être utilisés pour expliquer le concept, mais aucun nouveau nom ne peut être créé.
Lire l'intention
Le déclencheur est la description en langage courant de ce que l'utilisateur voit, pas une recherche par mot-clé ; la sensation intuitive est l'entrée à résoudre.
Rester concis
Une question de nommage doit obtenir un nom, pas une dissertation ; la longueur n'augmente que si l'utilisateur le demande.
Garder le glossaire synchronisé
Le glossaire intégré au skill est un instantané organisé de la page /vocabulary du projet, et les deux sont censés être mis à jour ensemble chaque fois que l'un des deux change.

04 Mettez-le en pratique

Installer animation-vocabulary 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 animation-vocabulary à 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/emilkowalski/skills --skill animation-vocabulary

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

Donner au skill une première tâche de motion et vidéo

Adaptez ce prompt avec votre propre contenu et contraintes, puis exécutez-le dans Claude Code ou Codex.

Example prompt

**Origin-aware animation** — An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS.

Source : SKILL.md § Examples (bloc de code).

Vérifiez le premier résultat

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

La réponse se lit comme une ligne de glossaire : terme en gras, tiret cadratin, la formulation propre du fichier, par exemple l'entrée rubber-banding.
Les variantes, lorsqu'elles existent, apparaissent sous forme de puces, chacune portant une condition d'une ligne indiquant quand ce terme s'applique.
Les termes concurrents sont distingués avant votre choix, plutôt que fusionnés en une seule réponse.

Dans OpenDesign, importez animation-vocabulary 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: Emil Kowalski
Repository: github.com/emilkowalski/skills Branche main
Fichier du skill: skills/animation-vocabulary/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit d23d7f8
License: MIT Depuis LICENSE.
Étoiles du dépôt: 37 516 Capture GitHub prise le 14/09/2026 pour l'ensemble du dépôt emilkowalski/skills, qui contient 9 skills dans ce catalogue. Il ne s'agit pas d'une note ou d'un compteur d'utilisation pour animation-vocabulary.
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

Démarrage rapideMontre la forme de réponse en une ligne : terme en gras, tiret cadratin, description du glossaire.
InstructionsSix règles numérotées : lire l'intention, citer mot pour mot, désambiguïser, approximer, rester dans le glossaire, rester concis.
ExemplesTrois recherches concrètes : une basée sur une sensation, une désambiguïsation et une sensation physique.
GlossaireDouze listes de termes regroupées, des entrées et sorties jusqu'aux principes à connaître.

Description du skill lui-même

« Glossaire de recherche inversée qui transforme une description vague d'une animation web ou d'un effet de mouvement en son terme exact (« le truc rebondissant quand un popover s'ouvre » → Pop in ; « le défilement élastique iOS » → Rubber-banding). Utiliser quand l'utilisateur demande « comment on appelle ça quand… », ou décrit un effet de mouvement sans connaître son nom et veut le bon mot pour prompter une IA ou un designer. Pour nommer un effet, pas pour le concevoir ou le construire. »

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

06 Avant d'installer

Questions sur le skill animation-vocabulary

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

Dois-je déjà connaître le terme pour utiliser ceci ?

Non. Vous décrivez l'effet comme vous le pouvez — l'exemple propre au fichier est simplement « le rubber-band scroll d'iOS » — et la réponse revient sous le terme Rubber-banding, accompagné de la description du glossaire.

Que se passe-t-il si mon effet n'est pas dans le glossaire ?

Il nomme le terme le plus proche et indique clairement qu'il ne s'agit que d'une approximation, ou reformule l'effet avec des mots du glossaire, par exemple « c'est un stagger d'entrées en scale-in ». Il n'inventera pas un terme absent de la liste.

Va-t-il concevoir ou réaliser l'animation pour moi ?

Non. Le skill se limite à nommer l'effet ; concevoir ou le réaliser est explicitement hors périmètre. Vous prenez le terme retourné et l'utilisez pour briefer qui ou quoi que ce soit qui réalisera le mouvement.

Animation Vocabulary

Exécutez animation-vocabulary sur une vraie tâche Motion and Video.

Téléchargez OpenDesign, importez animation-vocabulary 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