# 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`