make-interfaces-feel-betterpar Jakub Krehel

Make Interfaces Feel Better Skill.

Un skill Claude Code et Codex pour la recherche UX : principes de design-engineering pour le polish du survol, ombre, bordure, icône, typographie et micro-interaction.

UX et recherche

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

jakubkrehel/make-interfaces-feel-better · skills/make-interfaces-feel-better/SKILL.mdSKILL.md

--- name: make-interfaces-feel-better description: - Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, icons, micro-interactions, enter/exit animations, or any visual detail work. Supports quick and full review modes. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border … --- ## Core Principles ## Common Mistakes ## Review Output Format

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

01 Ce qu'il fait

Ce que fait le Skill make-interfaces-feel-better 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

Principes de design-engineering pour rendre les interfaces plus soignées, destinés à quiconque construit des composants d'UI ou relit du code frontend : états de survol, ombres, bordures, typographie, icônes, micro-interactions et animations d'entrée/sortie.

Il comporte dix-neuf principes fondamentaux numérotés avec des valeurs par défaut strictes — rayon de bordure concentrique, alignement optique, ombres en couches plutôt que bordures de fausse élévation, transitions CSS interruptibles, décalage d'environ 100ms, texte anticrénelé, chiffres tabulaires, contours d'image en noir ou blanc purs, scale(0.96) à l'appui, zones tactiles de 44×44px et épaisseur de trait d'icône assortie au texte. Deux modes de revue, rapide et complet, produisent un tableau Sévérité/Emplacement/Avant/Après/Pourquoi groupé par principe, plafonné à 5 ou 15 constats, se terminant par Bloqué, À corriger ou Approuvé.

Ce qu'il produit

Un rapport de revue qui indique dès le départ ce qui a été inspecté et ne laisse jamais entendre qu'une surface non inspectée a été couverte.
Des constats regroupés par principe dans un tableau Sévérité, Emplacement, Avant, Après, Pourquoi qui liste chaque modification effectuée ou proposée plutôt qu'un sous-ensemble.
Un tableau « Envisagé mais rejeté » avec 1 à 3 véritables candidats en mode rapide et 2 à 5 en mode complet, chacun accompagné de la raison de son rejet.
Une section de vérification listant les commandes ou interactions exactes exécutées ainsi que leurs résultats observés, suivie du verdict.

Voir l'exemple de prompt ↗

Fonctionnement

01
Exprimer les corrections dans le système de style propre au projet
Avant de proposer ou d'écrire un correctif, identifiez la manière dont le projet stylise déjà les éléments et formulez le changement dans ce système — Tailwind dans un projet Tailwind, CSS pur dans un projet CSS, ou l'approche CSS-in-JS établie.
02
Ralentir l'interface
Lors de la revue, rejouez le mouvement à 10 % de vitesse dans le panneau Animations du navigateur, car ce qui semble décalé à 10 % de vitesse est ce qui est subtilement faux à vitesse normale.
03
Passer en mode complet par défaut
Le mode complet est utilisé chaque fois qu'aucun mode de revue n'est fourni ; le mode rapide doit être demandé explicitement.
04
Rédiger les constats dans un format de tableau fixe
Regroupez les constats par principe dans un tableau markdown avec les colonnes Sévérité, Emplacement, Avant, Après et Pourquoi ; l'emplacement cite path/to/file:line.
05
Tenir compte des cinq catégories
Le tableau de portée doit couvrir les cinq catégories de la référence rapide, et une surface non inspectée ne doit jamais être présentée comme ayant été revue.
06
Conclure avec une vérification et un verdict
Le verdict est Bloquer lorsqu'un constat de sévérité ÉLEVÉE subsiste, À corriger lorsque seuls des constats MOYENS ou FAIBLES subsistent, et Approuver uniquement lorsqu'il ne reste rien d'actionnable.

02 Trouvez celui qui vous convient

Quand utiliser le skill make-interfaces-feel-better

Utilisez le skill make-interfaces-feel-better dans Claude Code ou Codex lorsque le travail relève de ce type de recherche UX. L'adéquation et les limites ci-dessous sont tirées du fichier propre au skill.

Bon choix

Création ou revue de composants d'interface où le travail de détail visuel compte : animations, états de survol, ombres, bordures, typographie, icônes, micro-interactions et transitions d'entrée/sortie.
Un passage rapide sur le parcours utilisateur principal et les états à plus fort trafic, ne signalant que les problèmes ÉLEVÉS et MOYENS.
Un audit approfondi de l'ensemble de la portée demandée, couvrant la typographie, les surfaces, les animations, les icônes et la performance.
Des projets qui ont déjà une convention de style, afin que les corrections de finition s'intègrent dans Tailwind, en CSS pur ou en CSS-in-JS selon le cas.

Connaître les limites

Il n'ajoutera pas un second système de style à un projet juste pour livrer une correction de finition.
Il refuse l'animation personnalisée sur les interactions à haute fréquence, car le coût d'attention se répète à chaque déclenchement.
Il ne décale pas les interactions courantes, uniquement les entrées échelonnées peu fréquentes.
Les bordures conservées uniquement pour simuler une élévation doivent être remplacées par des valeurs de box-shadow transparentes superposées ; les bordures structurelles et d'état restent.

Quoi fournir

package.jsonNécessaire pour décider du chemin d'animation des icônes : vérifiez si motion ou framer-motion est installé, et faites correspondre le chemin d'import établi.
Fichiers source ou écrans exactsLes constats citent path/to/file:line ; lorsque l'artefact n'a pas de fichiers source, l'écran et le composant exacts sont cités à la place.
Mode, portée et contexte du frameworkIndiquez le mode, la portée exacte, le framework, les conventions de style et toute limite de revue afin que le rapport montre ce qui a réellement été inspecté.

03 Dans le skill

Règles que le Skill make-interfaces-feel-better donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Calculer les rayons concentriques
Les coins imbriqués doivent être concentriques : le rayon extérieur est égal au rayon intérieur plus le padding.
Toujours presser à 0,96
L'échelle du clic est fixée à scale(0.96) et jamais en dessous de 0,95 ; toute valeur plus petite paraît exagérée. Une prop statique la désactive lorsque le mouvement distrairait.
Les contours d'image restent d'un neutre pur
Le contour d'image à 1px et faible opacité doit être noir pur en mode clair et blanc pur en mode sombre — jamais un neutre teinté comme slate ou zinc, qui capte la couleur de la surface et paraît sale.
Ne jamais faire une transition de tout
Listez les propriétés exactes, par exemple transition-property: scale, opacity. Le transition-transform de Tailwind couvre transform, translate, scale et rotate.
Adapter l'épaisseur du trait des icônes au poids du texte
Un trait de 1,5px accompagne un texte regular 400, 2px un texte semibold 600. Conservez une seule épaisseur de trait par jeu d'icônes et ne mélangez jamais les bibliothèques d'icônes sur une même surface.
Utiliser les valeurs exactes pour l'animation des icônes
Les échanges contextuels d'icônes s'animent sur scale, opacity et blur — jamais sur visibility — et ces valeurs sont fixes plutôt qu'improvisées.
N'échelonner que les entrées peu fréquentes
Découpez une entrée mise en scène en blocs sémantiques et échelonnez-les d'environ 100ms au lieu d'animer un seul conteneur. Les interactions routinières et fréquentes ne doivent jamais être échelonnées.
Dimensionner les zones cliquables avec intention
Privilégiez une zone cliquable de 44×44px pour le tactile ou le mobile, au moins 40×40px dans les interfaces desktop denses, en étendant les éléments visibles plus petits avec un pseudo-élément.

04 Mettez-le en pratique

Installer make-interfaces-feel-better 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 make-interfaces-feel-better à 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/jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better

Forme générique de la CLI skills pour skills/make-interfaces-feel-better/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 [src/components/] in full mode. The card and its inner button both use rounded-xl, the counter shifts when the value changes, and the outline-to-fill icon swap exits with a jarring fade. Express every fix in [our existing styling system] and give me a Severity/Location/Before/After/Why table.

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 :

Parcourez chaque état de l'interface — survol, focus, actif, chargement et vide — dans le cadre de la revue.
Listez chaque vérification non effectuée à côté du verdict comme Not verified, en précisant ce qui reste à faire.
Lorsque initial={false} est appliqué, vérifiez que cela ne casse pas les animations d'entrée intentionnelles.
Ne remplissez pas le rapport pour atteindre le plafond de constats, et omettez les principes sans constat.

Dans OpenDesign, importez make-interfaces-feel-better 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: Jakub Krehel
Repository: github.com/jakubkrehel/make-interfaces-feel-better Branche main
Fichier du skill: skills/make-interfaces-feel-better/SKILL.md Somme de contrôle du contenu enregistrée à la vérification ; commit 35545ea
License: MIT D'après LICENSE.
Étoiles du dépôt: 3 433 Instantané GitHub pris le 2026-09-14 pour l'ensemble du dépôt jakubkrehel/make-interfaces-feel-better. Ne constitue ni une note ni un compteur d'utilisation pour make-interfaces-feel-better.
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

Référence rapideCinq catégories — typographie, surfaces, animations, icônes, performance — chacune associée à son cas d'usage.
Principes fondamentauxDix-neuf règles numérotées, du rayon de bordure concentrique à la sobriété du mouvement, avec des valeurs par défaut exactes.
Erreurs courantesTableau associant chaque erreur fréquente à sa correction, comme transition: all et les zones cliquables trop petites.
Format de sortie de la revueModes, couverture, plafonds de constats, définitions de gravité et structure de rapport requise.
Portée et couvertureIndiquez le mode, la portée, le framework et les conventions ; listez les cinq catégories avec les éléments examinés et le résultat.
ConstatsRegroupez par principe dans un tableau Gravité, Emplacement, Avant, Après, Pourquoi couvrant chaque modification.
ExempleTableaux détaillés pour le rayon de bordure concentrique, les chiffres tabulaires et l'échelle au clic.
Envisagé mais rejetéTableau des candidats limites réels qui ont été rejetés, avec la raison donnée.
Vérification et verdictListez les commandes ou interactions exécutées, signalez les vérifications non effectuées, puis Bloquer, Modifications nécessaires ou Approuver.

Description du skill lui-même

« Principes d'ingénierie de design pour rendre les interfaces plus soignées. À utiliser lors de la construction de composants UI, de la révision de code frontend, de l'implémentation d'animations, d'états hover, d'ombres, de bordures, de typographie, d'icônes, de micro-interactions, d'animations d'entrée/sortie, ou de tout travail de détail visuel. Prend en charge les modes de révision rapide et complet. Se déclenche sur polish UI, détails de design, "rends ça plus agréable", "ça ne va pas", animations échelonnées, border radius, alignement optique, lissage de police, nombres tabulaires, contours d'image, box shadows, icônes, épaisseur de trait d'icône, états d'icône, retenue dans le mouvement. »

Description en front-matter tirée de SKILL.md. Le fichier complet fait environ 11 798 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill make-interfaces-feel-better

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 d'une bibliothèque de mouvement pour les animations d'icônes contextuelles ?

Non. Si aucune bibliothèque de mouvement n'est installée, le fichier conserve les deux icônes dans le DOM, l'une positionnée en absolu, et les fait fondre l'une dans l'autre avec des transitions CSS, ce qui donne des animations d'entrée et de sortie sans aucune dépendance.

Une animation d'entrée se joue au chargement de la page — comment cela est-il géré ?

Le fichier l'empêche avec initial={false} sur AnimatePresence, ce qui bloque les animations d'entrée au premier rendu, puis vous demande de confirmer que cela ne casse pas les animations d'entrée intentionnelles.

Une revue couvre-t-elle aussi la performance, en plus du visuel ?

Oui, la performance est l'une des cinq catégories de la référence rapide, centrée sur la spécificité des transitions et l'usage de will-change. will-change se limite à transform, opacity et filter — les propriétés que le GPU peut composer — et will-change: all n'est jamais utilisé.

Make Interfaces Feel Better

Exécuter make-interfaces-feel-better sur une vraie tâche de recherche UX.

Téléchargez OpenDesign, importez make-interfaces-feel-better 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