Skills Emilkowalski

skills/skills/animate

Construire une animation de zéro, en prenant les décisions dans l'ordre qui détermine si elle semble juste — faut-il l'animer, dans quel but, quel outil, quelles propriétés, quelle courbe et durée, comment elle interrompt, comment elle sort. Écrit l'implémentation. À utiliser lorsqu'on demande d'animer quelque chose, d'ajouter du mouvement, de rendre un composant vivant, ou de construire une transition. Pour critiquer une animation existante, utiliser review-animations ; pour auditer une base de code entière, utiliser improve-animations.

skills/skills/animation-vocabulary

Glossaire de recherche inversée qui transforme une description vague d’une animation web ou d’un effet de mouvement en son terme exact (« le truc rebondissant quand une popover s’ouvre » → Pop in ; « le défilement élastique d’iOS » → Rubber-banding). À utiliser lorsque l’utilisateur demande « comment ça s’appelle quand… », ou décrit un effet de mouvement sans connaître son nom et souhaite le mot juste pour interpeller une IA ou un designer. Pour nommer un effet, non pour le concevoir ou le construire.

skills/skills/apple-design

L'approche d'Apple en matière de conception d'interfaces et de mouvements physiques fluides, adaptée au web. À utiliser lors de la création ou de la révision d'interfaces gestuelles, d'animations à ressort, d'interactions par glissement/balayage/feuille, de transitions avec élan et interruptibles, de matériaux translucides et de profondeur, de typographie (dimensionnement optique, crénage, interlignage), de réduction de mouvement, ou des principes de conception (feedback, cohérence spatiale, retenue) derrière les interfaces de style Apple.

skills/skills/ask-sonner

Guide de Sonner, la bibliothèque de toasts React — installer et configurer le Toaster, choisir le bon appel toast(), les toasts de promesse et de chargement, la mise à jour, la fermeture et la persistance des toasts, le style, les thèmes et les icônes, le positionnement et les toasters multiples. À utiliser lorsque vous travaillez avec Sonner ou pour résoudre ses problèmes — toasts qui n'apparaissent pas, apparaissent deux fois, perdent leur style, ignorent les classes Tailwind, se trouvent derrière une modale ou ne suivent pas le mode sombre.

skills/skills/emil-design-eng

Cette compétence encode la philosophie d'Emil Kowalski sur le polissage de l'interface utilisateur, la conception de composants, les décisions d'animation et les détails invisibles qui rendent un logiciel agréable à utiliser.

skills/skills/find-animation-opportunities

Recherchez dans une base de code ou une interface utilisateur les endroits qui ne s'animent pas mais qui le devraient, et rejetez tout ce qui ne devrait pas. Lecture seule ; il propose des animations avec des valeurs exactes, il ne les implémente pas. À utiliser lorsque l'utilisateur demande « qu'est-ce qui pourrait être animé ici ? » ou souhaite « rendre cela plus vivant ». Pour corriger des animations existantes, utilisez plutôt improve-animations ou review-animations.

skills/skills/improve-animations

Examiner le code d'animation et de mouvement d'une base de code en tant que conseiller senior en motion, puis produire un audit priorisé et des plans d'implémentation autonomes pour que d'autres agents (ou des modèles moins coûteux) les exécutent. Lecture seule du code source — il planifie des améliorations, il ne les applique pas. À utiliser lorsque l'utilisateur demande « améliorer les animations », « auditer le mouvement », « rendre cette application plus agréable », ou souhaite une feuille de route de corrections d'animations plutôt qu'une révision d'une seule modification.

skills/skills/pick-ui-library

Choisissez la bonne bibliothèque pour une tâche frontend donnée à partir d'une liste organisée et assumée — nombres, champs OTP, graphiques, menus de commandes, virtualisation, glisser-déposer, toasts, état, styles, et plus encore. Ne s'exécute que lorsqu'il est explicitement invoqué ; il ne se déclenche pas de lui-même.

skills/skills/prototype

Construisez plusieurs versions réellement différentes d’un élément d’interface que vous décrivez, rendues derrière un sélecteur visuel afin de pouvoir les parcourir en direct et promouvoir celle qui convient le mieux. Ne s’exécute que lorsqu’il est explicitement invoqué ; il ne se déclenche pas de lui-même.

skills/skills/review-animations

Examine le code d'animation et de mouvement par rapport à un haut niveau d'exigence artisanale dérivé de la philosophie d'ingénierie de conception d'Emil Kowalski. Par défaut, signaler ; l'approbation se mérite.