motion-system

motion-system

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

En une phrase

ConcevoirConçoit un motion system cohérentcomplet pour un projet : principes directeurs, tokens (principes,durations/easings/distances), tokens,6 patterns)patterns réutilisables (enter, hover, focus, modal, list, page) et le livrer sous forme de règles +reduced-motion snippets réutilisables.intégrées.

Quand l'utiliser

• VoirSur un projet ambitieux où le motion fait partie de l'identité (portfolio, marketing premium, app produit)

Quand motion-tokens ne suffit plus et qu'il faut formaliser les patterns Pour aligner une équipe sur "quelle animation pour quel usage" avant de commencer à coder Avant de générer la descriptiondoc ci-dessusd'un etdesign lasystem sectionpour «avoir Pourun allerchapitre plusmotion loinsolide ».Sur une refonte de site où le mouvement est un levier de différenciation

Comment l'invoquer

• Slash command : /motion-system (si exposé dans ton CLI)

Phrases déclencheurs : voir la description complète ci-dessous Auto-invocation : sur✅ demandeOui explicite— pour

Pour aller plus loin

Motion System

Objectif

Produireproduire une grammaire motion cohérente:cohérente d'un projet

Description détaillée

Un motion system, c'est l'équivalent du design system mais pour le mouvement. Au lieu d'avoir 47 animations différentes choisies au feeling, on a un vocabulaire restreint et cohérent qui se réutilise partout — ce qui rend le site mémorable et facile à maintenir.

Ce skill produit le motion system en 4 temps. D'abord les intentions : pour quoi anime-t-on ? Hiérarchie (un élément attire l'œil), causalité (un clic ici déclenche un changement là), feedback (l'app me dit qu'elle a compris), émotion (un détail délicieux). Ensuite les tokens : 5-7 durations et 3-5 easings nommés sémantiquement, plus des distances standard. Puis 6 patterns prêts à l'emploi : enter (apparition à l'arrivée d'un élément), hover (réaction au survol), focus (signal clavier), modal (ouverture/fermeture), list (animations en série sur une liste), page (transition d'écran). Enfin les règles reduced-motion, déclinées pattern par pattern (pas juste un kill switch global).

À la sortie, tu as 6-10 lignes de principes directeurs, les tokens +en patterns + règles reduced-motion.

Procédure

Intentions (hiérarchie, causalité, feedback, émotion) Tokens (durations/eases/distances) Patterns (enter/hover/focus/modal/list/page) Règles reduced-motion

Outputs attendus

Principes (6–10 lignes) TokensJSON + CSS varsvariables, les 6 patterns avec snippets Matricefonctionnels, et une matrice normal vs reduce pour

Hints

chacun.

Conseil Préférerintégré transform/opacity;: préférer transform et opacity (gratuits pour le GPU), éviter layout/paintwidth/height/top/left siqui possible.forcent du layout. Pour Thymon : c'est le skill "boss" du motion. Une fois ce système posé, tous les autres skills motion (framer-patterns, gsap, view-transitions) viennent s'y appuyer naturellement.

Source

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