design-motion-principlespar Kyle Zantos

Design Motion Principles Skill.

Un skill Claude Code et Codex pour le motion et la vidéo : mouvement d'interaction intentionnel, ou revue d'animation existante, d'après Kowalski, Krehel et Tompkins.

Mouvement et vidéo

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

kylezantos/design-motion-principles · skills/design-motion-principles/SKILL.mdSKILL.md

--- name: design-motion-principles description: Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Two modes — build interactive components with purposeful motion, or audit existing animations to catch AI-slop motion patterns (audit emits a branded HTML report with looping demos). Use when creating, adding, animating, or reviewing UI motion: transitions, hover states, micro-interactions, enter/exit … --- ## STEP 0: Detect Mode (DO THIS FIRST) ## The Three Designers ## Context-to-Perspective Mapping ## Core Principles (Both Modes) ## Reference Index ## Workflow Index

En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 6 794 caractères au total

01 Ce qu'il fait

Ce que fait le Skill design-motion-principles 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

Un skill de design d'interaction et de mouvement pour agents de code, fonctionnant selon deux modes. Create construit des composants interactifs avec un mouvement intentionnel ; Audit examine le mouvement existant et rapporte des constats par designer, y compris les motifs AI-slop, dans un rapport HTML de marque avec des démos en boucle.

Il organise ses conseils autour de trois angles — Emil Kowalski sur la retenue et la rapidité, Jakub Krehel sur le fini de production, Jhey Tompkins sur l'expérimentation ludique — pondérés selon le type de projet plutôt qu'appliqués de façon universelle. La couverture porte sur le mouvement des interfaces web et applicatives : HTML/CSS, React, Framer Motion, transitions iOS/Android et animations de design system. Le filtre de fréquence, les durées dépendantes du contexte et la gestion obligatoire de prefers-reduced-motion s'appliquent dans les deux modes.

Ce qu'il produit

Des composants interactifs construits avec un mouvement intentionnel en mode Create.
Un rapport d'évaluation par designer en mode Audit.
Un rapport HTML de marque contenant des démos en boucle des constats.
Un modèle de rapport d'audit rendu en HTML par défaut, avec un mode terminal disponible via une option.

Voir l'exemple de prompt ↗

Fonctionnement

01
Détecter le Mode à partir de la Demande
Une formulation orientée construction sélectionne Create ; audit, revue, évaluation, retour ou « ce mouvement est-il bon » sélectionne Audit.
02
Lire le Fichier de Workflow Correspondant
La détection du mode est l'étape 0 et conditionne tout le reste — le fichier de workflow de ce mode est suivi à la lettre.
03
Pondérer les Trois Designers selon le Contexte
Emil, Jakub et Jhey sont traités comme des perspectives contextuelles, jamais comme des règles universelles.
04
Appliquer les recommandations de fréquence et de durée
La fréquence de déclenchement de l'interaction vient d'abord, puis les cibles de durée issues de l'angle pertinent.
05
Produire l'artefact adapté au mode
Create renvoie des composants ; Audit renvoie un rapport par designer dont chaque constat obtient une carte de démonstration construite à partir d'un modèle de conteneur visuel.

02 Trouvez celui qui vous convient

Quand Utiliser le Skill design-motion-principles

Utilisez le skill design-motion-principles dans Claude Code ou Codex lorsque le travail concerne le mouvement et la vidéo de ce type. La portée et les limites ci-dessous sont tirées du fichier propre au skill.

Bon choix

Les outils de productivité comme Linear ou Raycast, où la sobriété et les règles de rapidité d'Emil prédominent et où Jhey n'est utilisé que pour l'onboarding.
Les applications pour enfants et les produits éducatifs, où le raffinement et le plaisir l'emportent sur les règles de rapidité liées à la productivité, Emil étant réservé aux interactions à haute fréquence dans les jeux.
Les portfolios créatifs, menés par Jakub pour le raffinement et Jhey pour l'invention, avec Emil limité aux interactions à haute fréquence.
Les applications mobiles, où Jakub mène, Emil soutient et Jhey apporte les éléments de plaisir.

Connaître les limites

Le travail de mouvement hors UI web et app — moteurs de jeu, Lottie, Rive ou vidéo — où le cadre de fréquence s'applique toujours, mais où les techniques propres à chaque designer peuvent ne pas se transposer.
Juger les durées selon un chiffre universel unique ; signaler ou plafonner les durées sans vérifier la pondération contextuelle est explicitement exclu.
Les interactions initiées au clavier sont entièrement exclues de l'animation, quel que soit le type de projet.

Quoi fournir

Le type de projetIl détermine la pondération primaire, secondaire et sélective, si bien qu'un tableau de bord SaaS oriente d'abord vers Emil plutôt que vers Jakub.
La fréquence de déclenchement de l'interactionLe filtre de fréquence est appliqué avant tout ajout ou toute approbation, si bien que la réponse change ce qui est même éligible à l'animation.
Le mouvement lui-même et sa stackTransitions, états de survol, micro-interactions et animations d'entrée/sortie, en React, Framer Motion, CSS ou HTML.

03 Dans le skill

Les règles que le skill design-motion-principles 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.

Laisser la fréquence de déclenchement décider si cela s'anime
Les interactions fréquentes déclenchées des centaines de fois par jour n'obtiennent aucune animation ou une transition instantanée ; les interactions rares peuvent être expressives.
Gérer prefers-reduced-motion, toujours
L'exigence est formulée comme couvrant tout ce qui est généré en mode Create ou examiné en mode Audit, sans exception.
Demander une précision lorsque la requête est ambiguë
Une requête vague comme « regarde cette animation de modale » ne fait pas l'objet de suppositions — on demande à l'utilisateur de choisir entre Create et Audit.
Repondérer les designers selon le type de projet
Le tableau de correspondance modifie les angles primaire, secondaire et sélectif ; une landing page a Jakub en primaire, Jhey en secondaire, Emil uniquement pour les formulaires et la navigation.
Utiliser la visibilité comme test qualité
Une animation qui suscite un compliment à chaque interaction est jugée trop prononcée pour la production.
Charger les références que le mode impose
Le mode Create charge toujours le Motion Cookbook (recettes pour enter/exit, easing, springs, clip-path, @property, FLIP, scroll-driven) ; le mode Audit charge ses propres fichiers toujours actifs.

04 Mettez-le en pratique

Installer design-motion-principles 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 design-motion-principles à 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/kylezantos/design-motion-principles --skill design-motion-principles

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

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

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt

Audit the [command palette] open and close transition in our [React] app before it ships, and flag anything that reads as AI-slop motion. People use it hundreds of times a day, so tell me what should not animate at all and what should sit under 300ms. Then build the corrected version with Framer Motion and make sure it respects prefers-reduced-motion.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

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

Vérifiez que le poids de l'animation correspond à la fréquence réelle de déclenchement de l'interaction, et non à son aspect visuel.
Évaluez le soin de production apporté par rapport à la fourchette Jakub de 200-500ms plutôt qu'à une durée globale unique.
En mode Audit, suivez la liste de contrôle d'audit systématique plutôt que d'évaluer l'animation à l'œil.
Passez les constats par le filtre qualité anti-checklist qui nomme les catégories d'animation « AI-slop » et les anti-patterns.
Pour les animations complexes, vérifiez l'optimisation GPU, l'usage de will-change et le layout thrash.

Dans OpenDesign, importez design-motion-principles 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: Kyle Zantos
Repository: github.com/kylezantos/design-motion-principles Branche main
Fichier du skill: skills/design-motion-principles/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 4a9ca87
License: MIT D'après LICENSE.
Étoiles du dépôt: 1 048 Instantané GitHub pris le 2026-09-14 pour l'ensemble du dépôt kylezantos/design-motion-principles. Il ne s'agit pas d'une note ou d'un compteur d'utilisation pour design-motion-principles.
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

ÉTAPE 0 : Détecter le mode (À FAIRE EN PREMIER)Associe le libellé de la demande à Create ou Audit et pose la question en cas d'ambiguïté.
Les trois designersQui sont Emil, Jakub et Jhey, la question à laquelle chacun répond, et la clause d'hommage.
Correspondance contexte-perspectiveSept types de projets associés à une pondération primaire, secondaire et sélective des designers.
Principes fondamentaux (les deux modes)Filtre de fréquence, recommandations de durée, la règle d'or et l'accessibilité non négociable.
Index des référencesChaque fichier de référence associé aux conditions dans lesquelles le charger.
Index des workflowsLes deux fichiers de workflow : construire des composants, ou revoir l'animation et faire un rapport.

Description du skill lui-même

Expert en motion et interaction design basé sur les techniques d'Emil Kowalski, Jakub Krehel et Jhey Tompkins. Deux modes : créer des composants interactifs avec du mouvement réfléchi, ou auditer les animations existantes pour détecter les patterns de mouvement générés par IA (l'audit génère un rapport HTML branded avec des démos en boucle). À utiliser lors de la création, l'ajout, l'animation ou la révision du mouvement UI : transitions, états hover, micro-interactions, animations d'entrée/sortie, ou tout travail de motion design en React, Framer Motion, CSS ou HTML. Fournit des perspectives par designer avec pondération contextuelle.

Description du front-matter de SKILL.md. Le fichier complet fait environ 6 794 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill design-motion-principles

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

Ai-je besoin de React, ou fonctionne-t-il avec du CSS et du HTML simples ?

Les deux sont couverts. Le skill traite les animations d'interface web et applicative en HTML/CSS, React, Framer Motion ou Motion, les transitions iOS/Android et les animations de design system.

Comment décide-t-il s'il doit construire quelque chose ou l'évaluer ?

Il analyse la demande à la recherche de signaux Create ou Audit, et pose la question en cas d'ambiguïté. Si AskUserQuestion n'est pas disponible, il se rabat sur une question en texte brut proposant les deux modes.

Une application pour enfants aura-t-elle la même animation rapide et sobre qu'un tableau de bord ?

Non. La pondération dépend du contexte : une application pour enfants privilégie Jakub et Jhey pour le soin et le plaisir plutôt que les règles de rapidité axées productivité d'Emil — le plaisir est alors considéré comme l'objectif.

Les trois designers sont-ils à l'origine de ce skill ?

Non. Les prismes distillent leurs cours, articles, conférences et projets open source publiés publiquement, et le cadre de pondération est l'interprétation propre du skill, nommée en hommage.

Design Motion Principles

Exécuter design-motion-principles sur une tâche réelle de mouvement et vidéo.

Téléchargez OpenDesign, importez design-motion-principles 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