83.3K+Télécharger
Aller au guide d’utilisation
emil-design-engpar Emil Kowalski

Emil Design Eng Skill.

Un skill Claude Code et Codex pour la recherche UX : la philosophie d'Emil Kowalski sur le polissage UI, le design de composants et les décisions d'animation.

  • UX et recherche
Télécharger OpenDesignVoir le guide d'utilisation
emilkowalski/skills · skills/emil-design-eng/SKILL.mdSKILL.md
--- name: emil-design-eng description: This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great. --- ## Initial Response ## Core Philosophy ## Review Format (Required) ## The Animation Decision Framework ## Spring Animations ## Component Building Principles
Préambule et titres de section lus depuis le fichier source le 2026-09-14 · 27 130 caractères au total

01 Ce qu'il fait

Ce que fait le skill emil-design-eng 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

Ce skill donne aux agents de code le jugement d'ingénierie de design d'Emil Kowalski pour le travail d'interface : comment décider si quelque chose doit s'animer, quel easing et quelle durée utiliser, et comment construire des composants qui semblent réactifs. Il fixe des valeurs par défaut strictes — animations d'UI inférieures à 300ms, courbes cubic-bezier personnalisées plutôt que les easings CSS intégrés, jamais ease-in, jamais d'entrées scale(0), popovers qui s'agrandissent depuis leur déclencheur.

Il couvre aussi les springs, les techniques de clip-path, la gestion du drag et des gestes, les règles de performance GPU, la réduction du mouvement, et un tableau markdown Before/After obligatoire pour les revues de code. Il s'adresse aux designers et développeurs qui veulent des décisions d'interface guidées par le goût plutôt que des conseils d'animation génériques.

Ce qu'il produit

  • Un tableau markdown de revue avec les colonnes Before, After et Why, une ligne par problème détecté
  • Variables CSS prêtes à copier contenant les courbes d'easing personnalisées recommandées
  • Objets de configuration de spring, soit de style Apple, soit des paramètres physiques traditionnels
  • Une liste de corrections priorisée tirée des catégories de la Review Checklist
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Conditionner l'Animation à la Fréquence

    Avant d'écrire le moindre code d'animation, déterminez la fréquence à laquelle les utilisateurs rencontreront l'interaction.

  2. 02
    Nommer l'Objectif

    Chaque animation doit répondre à la question de savoir pourquoi elle s'anime, à partir de la liste valide : cohérence spatiale, indication d'état, explication, retour, ou prévention de changements brusques.

  3. 03
    Choisir une Courbe Personnalisée

    Choisissez l'easing selon que l'élément entre, sort, se déplace, ou change seulement de couleur, puis remplacez les courbes intégrées par des cubic-beziers personnalisées plus marquées.

  4. 04
    Définir la durée

    Adaptez la durée au type d'élément selon le tableau — pression de bouton 100-160 ms, menus déroulants 150-250 ms, modales 200-500 ms — et restez sous le plafond de 300 ms pour l'UI.

  5. 05
    Appliquer les réglages par défaut des composants

    Les boutons passent à l'échelle 0,97 au :active, les entrées démarrent à 0,95 avec l'opacité plutôt qu'un scale(0), et les popovers s'échelonnent depuis leur déclencheur tandis que les modales restent centrées.

  6. 06
    Utilisez les springs là où ils apportent une réelle valeur

    Les springs conviennent au drag avec momentum, aux gestes pouvant être interrompus, et aux interactions délibérément décoratives.

02 Trouvez celui qui vous convient

Quand utiliser le skill emil-design-eng

Utilisez le skill emil-design-eng dans Claude Code ou Codex lorsque le travail concerne une recherche UX de ce type. La portée et les limites ci-dessous sont tirées du propre fichier du skill.

Bon choix

  • Passer en revue du code d'UI existant et obtenir un tableau de correctifs concrets plutôt qu'un retour vague
  • Construire des composants où de petits détails s'accumulent pour créer une interface qui semble juste
  • Travail de drag et de swipe où le renvoi doit répondre à la vélocité du geste, pas seulement à la distance tirée
  • Interfaces sensibles à la performance où l'animation en JS perd des frames pendant que le thread principal est occupé

Connaître les limites

  • Des springs rebondissants partout : le rebond est évité dans la plupart des contextes d'UI et réservé au drag-to-dismiss et aux interactions ludiques
  • Un mouvement décoratif sur des visuels de données fonctionnels, où l'absence d'animation serait préférable
  • Toute personne cherchant une formule pour la combinaison opacité plus hauteur ; le fichier indique que cela relève de l'essai-erreur
  • Traiter la réduction de mouvement comme une absence totale d'animation, ce que le fichier rejette explicitement

Quoi fournir

  • L'animation que vous êtes sur le point d'écrireLe framework attend que les quatre questions soient répondues dans l'ordre avant qu'aucun code d'animation existe : faut-il animer, pourquoi, quel easing, à quelle vitesse.
  • La fréquence à laquelle les utilisateurs la verrontLa fréquence est la première question et conditionne toute la décision, de l'absence totale d'animation à la permission d'ajouter du délice.
  • Votre cible de support navigateurLes animations d'entrée utilisent @starting-style là où le support le permet, sinon elles se replient sur le pattern de l'attribut data-mounted.

03 Dans le skill

Règles que le Skill emil-design-eng 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.

  1. Ne jamais utiliser ease-in

    ease-in retarde le mouvement initial, exactement le moment que l'utilisateur observe le plus attentivement, si bien qu'une dropdown en ease-in de 300 ms paraît plus lente qu'en ease-out à la même durée.

  2. Ne jamais entrer depuis scale(0)

    Rien dans le monde réel ne disparaît et ne réapparaît complètement. Les entrées démarrent à scale(0,9) ou plus, combinées à l'opacité, et l'échelle de pression reste subtile entre 0,95 et 0,98.

  3. Les modales conservent une origine centrée

    Les popovers doivent définir transform-origin sur leur déclencheur, en utilisant var(--transform-origin) de Base UI, mais les modales font l'exception explicite car elles ne sont pas ancrées à un déclencheur.

  4. Les revues utilisent une véritable table

    Une revue de l'UI doit produire une véritable table markdown avec les colonnes Before, After et Why, une ligne par problème. Une liste avec Before: et After: sur des lignes séparées est un format incorrect.

  5. Verrouiller le hover derrière une media query

    Les animations de hover se placent à l'intérieur de @media (hover: hover) and (pointer: fine), car les appareils tactiles déclenchent le hover au tap et produisent de faux positifs.

  6. Garder le stagger court et non-bloquant

    Les délais de stagger s'étalent entre 30 et 80ms entre les éléments, des délais plus longs donnent une impression de lenteur à l'interface, et le stagger est décoratif, il ne doit donc jamais bloquer l'interaction pendant qu'il joue.

04 Mettez-le en pratique

Installer emil-design-eng 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 emil-design-eng à 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/emilkowalski/skills --skill emil-design-eng

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

Donnez au Skill une Première Tâche de Recherche UX

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

Starter prompt
Review the code for [the dropdown and the popover] in [component file]. The dropdown opens with ease-in over 300ms, the popover scales from center, and the entering panel animates from scale(0). Use the Before/After format and tell me what to change and why.

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 :

  • Reprendre le travail le lendemain avec un regard neuf, car les imperfections sont plus faciles à repérer après une nuit de recul
  • Ralentir temporairement la durée à 2-5x la normale, ou utiliser l'inspecteur d'animation du navigateur, pour détecter les problèmes de timing
  • Passer l'animation image par image dans Chrome DevTools pour voir les problèmes de coordination invisibles à vitesse normale
  • Tester les drawers et les gestes de swipe sur des appareils physiques, en connectant un téléphone par USB au serveur de développement local
  • Au ralenti, vérifier que les propriétés animées restent synchronisées et que l'origine et l'easing semblent corrects

Dans OpenDesign emil-design-eng est intégré : Plugins → Skills, sélectionnez-le dans la barre supérieure.

Télécharger OpenDesignLire 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
Emil Kowalski
Repository
github.com/emilkowalski/skills Branche main
Fichier du skill
skills/emil-design-eng/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit d23d7f8
License
MIT Depuis LICENSE.
Étoiles du dépôt
37 516 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt emilkowalski/skills, qui contient 9 skills dans ce catalogue. Ce n'est pas une note ou un compteur d'utilisation pour emil-design-eng.
Vérifié par OpenDesign
14/09/2026 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Inclus dans OpenDesign main (vérifié le 28/08/2026) ; aucune exécution en direct n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. Philosophie de baseLe goût s'entraîne, les détails invisibles s'accumulent, et la beauté est un véritable facteur de différenciation.
  2. Format de revue (obligatoire)Impose une table markdown Before/After/Why et montre le format de liste interdit.
  3. Le cadre de décision pour l'animationQuatre questions ordonnées : fréquence, objectif, easing, durée, plus la performance perçue.
  4. Animations springQuand les springs conviennent, le suivi de la souris avec useSpring, et deux styles de configuration.
  5. Principes de construction des composantsRetour au clic, éviter scale(0), origine des popovers, délais des tooltips, transitions plutôt que keyframes, flou.
  6. Maîtrise des transforms CSSTranslations en pourcentage, mise à l'échelle des enfants, profondeur 3D, et ancrages transform-origin.
  7. clip-path pour l'animationRévélations en inset pour les overlays, onglets, hold-to-delete, révélations au scroll, curseurs de comparaison.
  8. Interactions de gestes et de dragRejet par vélocité, amortissement aux limites, capture de pointeur, protection multi-touch, friction.
  9. Règles de performanceN'animer que transform et opacity, éviter le recalcul des variables CSS, préférer CSS sous charge.
  10. AccessibilitéLe mouvement réduit conserve l'opacité et la couleur, supprime le mouvement ; le hover est verrouillé par media query.
  11. Les principes Sonner (construire des composants appréciés)Six principes issus de Sonner sur la DX, les valeurs par défaut, le nommage, les cas limites, les transitions, la documentation.
  12. Liste de vérification de revueTableau des problèmes courants et de leurs correctifs prescrits, de transition-all au manque de stagger.
Description du skill lui-même
Cette skill encode la philosophie d'Emil Kowalski sur le raffinement des interfaces, la conception des composants, les décisions d'animation et les détails invisibles qui donnent une sensation exceptionnelle aux logiciels.

Description du front-matter depuis SKILL.md. Le fichier complet fait environ 27 130 caractères. Lisez le fichier complet sur GitHub.

Emil Design Eng

Exécutez emil-design-eng sur une vraie tâche de recherche UX.

Le skill emil-design-eng est inclus dans OpenDesign. Téléchargez l'application, sélectionnez le skill dans Plugins → Skills, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesignParcourir tous les skills
Terminal
npx skills add https://github.com/emilkowalski/skills --skill emil-design-eng