Frontend & UI

animation-vocabulary

Transforme une description floue de mouvement en son terme technique exact.

De quoi il s’agit

Un glossaire à recherche inversée. L’utilisateur décrit vaguement un effet de mouvement et le skill renvoie le terme précis, cité mot pour mot, avec des variantes proches quand plusieurs conviennent.

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 t
Depuis le SKILL.md en amont

Pourquoi ça compte pour le design

  • Donne au designer le mot juste pour prompter un agent.
  • Désambiguïse les paires proches comme clip-path et mask, pop in et bounce.
  • Refuse d’inventer des termes : la nomenclature reste fiable.

Ce que ça couvre

  • Entrances and exits
  • Sequencing and timing
  • Transitions between states
  • Scroll
  • Spring animations
  • Polish and effects

Comment l’installer

animation-vocabulary

  1. Clonez le dépôt.

    git clone https://github.com/emilkowalski/skills
  2. Pointez Codex sur le fichier du skill.

    skills/animation-vocabulary/SKILL.md
  3. Décrivez ensuite l’interface voulue. Codex suit le skill.

Comment le faire tourner avec Codex

  1. Décrivez ce que vous avez vu, par exemple « le scroll élastique d’iOS ».

  2. Il renvoie le terme en gras plus une définition de glossaire en une ligne.

  3. Demandez des variantes quand deux termes pourraient convenir.

Chaque plugin présenté ici est gratuit, open source, et renvoie à sa vraie source amont.

En savoir plus sur la liste codex-design ↗

Prochaine étape

Designez avec Open Design, sans la config

Installez ce plugin vous-même, ou faites tourner toute une couche design sélectionnée autour de Codex avec Open Design. Apportez votre clé, gardez la main sur ce que vous produisez.