motion-tokens

motion-tokens

Catalogue généré le 2026-05-11

En une phrase

Génère un jeu de tokens d'animation (durées, easings, distances) versionnables en JSON + variables CSS, avec mapping prêt pour Motion (React) et GSAP.

Quand l'utiliser

• Au démarrage d'un projet quand on veut une grammaire d'animation cohérente
• Quand les animations existantes sont incohérentes (chaque dev choisit ses durées au pif)
• Pour unifier un design system qui couvre déjà couleurs/typo mais pas le mouvement
• Avant d'attaquer un site marketing avec plusieurs sections animées
• Pour préparer le terrain avant motion-system ou motion-framer-patterns

Comment l'invoquer

• Slash command : /motion-tokens
• Auto-invocation : ✅ Oui — dès qu'un design system ou theming motion est nécessaire

Description détaillée

Ce skill produit un fichier tokens.motion.json avec 5 à 7 durées de base (par exemple fast: 120ms, base: 200ms, slow: 320ms), 3 à 5 courbes d'easing nommées (standard, accelerate, decelerate) et un set de distances pour les translations.

Il génère ensuite trois sorties exploitables tout de suite : le JSON pour versionner dans Git, des variables CSS (--motion-duration-base, --motion-ease-standard) à poser dans :root, et un mapping côté JS pour Motion ou GSAP afin que tu puisses écrire transition={{ duration: motion.duration.base, ease: motion.ease.standard }} au lieu de coder des nombres en dur.

Il finit par poser des règles d'usage : quelle durée pour un hover, laquelle pour une ouverture de modal, quel easing pour quel type de mouvement. Pour Thymon : c'est la fondation à poser avant d'animer sérieusement quoi que ce soit. Une fois ces tokens en place, tu peux changer le ressenti motion de tout le site en modifiant un seul fichier.

Source

• Plugin : perso (standalone)
• Nom interne : motion-tokens
• Fichier : /home/thymon/.claude/skills/motion-tokens/SKILL.md