emil-design-eng (emilkowalski/skills)

Avis

Codex CLI 0.166 (gpt-6-astra, low reasoning) sur un PC Windows de test dédié, un projet temporaire neuf et des HOME/TMPDIR/caches temporaires à chaque exécution, skill installé (traitement) ou absent (contrôle) ou absent avec l'exigence centrale du skill compressée en une phrase ajoutée au prompt (groupe « prompt d'une phrase »), 2 exécutions par groupe et par tâche, réseau coupé, écritures dans /tmp bloquées. Les prompts ne mentionnent jamais le skill (sauf la formulation indiquée ci-dessous). Mêmes trois briefs que le test frontend-design (une page d'accueil Tidepool, un tableau de bord de qualité de l'eau, une refonte de page d'accueil de salle d'escalade), écrits sous forme de fichiers HTML autonomes. Les prompts ne mentionnent ni l'animation ni le skill ; le groupe avec skill a simplement le skill installé.

Comparaison à trois bras

Mesuré avec Codex CLI sur 18 exécutions, noté par des contrôles basés sur des règles, sans juge LLM. Total 26.2 / 30, verdict Recommandé.

Verdict : Recommandé (26.2 / 30). Source : emilkowalski/skills, skills/emil-design-eng, épinglé au commit a81dbca. Installation : npx skills@latest add emilkowalski/skills --skill emil-design-eng. Licence : MIT (LICENSE du dépôt).

Ce que c'est

Le skill emil-design-eng d'emilkowalski/skills : les règles d'ingénierie de design d'Emil Kowalski pour le fini des interfaces, environ 4,000 mots dans un seul SKILL.md. Il couvre le moment où il faut animer (ou non), les courbes ease-out personnalisées au lieu de celles par défaut, des durées de 150-300 ms, l'animation de transform et opacity uniquement, le retour au press (scale(0.97) sur :active), l'interdiction d'animer depuis scale(0), le stagger, le survol conditionné par (hover: hover), la réduction des animations et des détails invisibles comme les cibles de clic. Aucun script.

Comment nous avons testé

Codex CLI 0.166 (gpt-6-astra, raisonnement faible) sur un PC de test Windows dédié, un projet temporaire neuf et des caches HOME/TMPDIR temporaires à chaque exécution, skill installé (groupe avec skill) ou absent (groupe témoin) ou absent avec l'exigence centrale du skill compressée en une phrase ajoutée à la fin du prompt (groupe prompt d'une phrase), 2 exécutions par groupe et par tâche, réseau coupé, écritures dans /tmp bloquées. Les prompts ne mentionnent jamais le skill (sauf la formulation indiquée ci-dessous).

Les mêmes trois briefs que le test frontend-design (une page de destination Tidepool, un tableau de bord de qualité de l'eau, une refonte de la page d'accueil d'une salle d'escalade), rédigés sous forme de fichiers HTML autonomes uniques. Les prompts ne mentionnent ni l'animation ni le skill ; le groupe avec skill a simplement le skill installé.

1. Nouvelle page de destination à partir d'un brief — Créez un site de destination d'une page pour Tidepool, une petite marque de snacks aux algues vendus par abonnement (trois saveurs, $14/boîte, expédition mensuelle). Écrivez un seul index.html autonome avec CSS en ligne et un minimum de JS si nécessaire. Pas de frameworks, pas d'outil de build st…
2. Interface de tableau de bord dense en données — Créez une page de tableau de bord pour une équipe municipale de surveillance de la qualité de l'eau : les relevés actuels de 6 stations (pH, turbidité, chlore, température), une tendance sur 7 jours pour chacune, et un panneau d'alertes. Un seul dashboard.html autonome avec CSS/JS en ligne et des données de re…
3. Refondre une page existante fade — old.html est la page d'accueil actuelle de Granite Peak Climbing Gym (Boulder, CO). Refondez-la en new.html : conservez tout son contenu réel (tarifs, cours, horaires, adresse) mais faites en sorte que la page appartienne à cette salle d'escalade précise. HTML/CSS autonome, sans fra…

La notation est programmatique (tests cachés / détection de problèmes implantés / vérifications de contraintes / rendu + OCR le cas échéant), de 0 à 5 par exécution. Aucun juge LLM n'a décidé d'un seul score. Comme ce skill porte sur le mouvement et des détails d'interaction qu'une capture d'écran ne peut pas montrer, le score est une liste de contrôle basée sur des règles appliquée au CSS généré (10 vérifications : retour au press sur :active, cubic-bezier personnalisé, pas de ease-in/linear/ease par défaut, pas de transition: all, seuls transform/opacity/couleur animés, durées <= 300 ms, réduction des animations, stagger, pas de scale(0), survol conditionné par (hover: hover)), de 0 à 5 par exécution. Cela correspond étroitement aux propres règles du skill, donc cela mesure « le skill a-t-il été suivi », et non « la page est-elle meilleure ».

Résultats

Le prompt d'une phrase donné au troisième groupe : "Sublimez comme un ingénieur de design : courbes d'accélération personnalisées (ease-out pour les entrées, jamais celle par défaut ni ease-in), durées de 150-300 ms, animation de transform et opacity uniquement, retour au press comme scale(0.97) sur :active, jamais d'animation depuis scale(0), entrées en stagger, respect de prefers-reduced-motion, et soignez les détails invisibles (états hover, active et focus, cibles de clic de 44 px)."

Score moyen : 3.33 sans le skill contre 4.75 avec (delta +1.42). Tokens par exécution : 133k contre 149k (1.12x) ; temps 178s contre 163s. Groupe prompt d'une phrase : 4.5 (gain du skill par rapport au prompt d'une phrase : +0.25 ; gain du prompt d'une phrase par rapport à l'absence de skill : +1.17) ; 127k tokens par exécution pour le prompt d'une phrase, donc le skill coûte 1.17x le prompt d'une phrase.

Ce qui s'est passé

• Codex seul n'écrit jamais de retour au press ni de courbe d'accélération personnalisée : 0/6 pages du groupe témoin ont une règle de scale sur :active ou un cubic-bezier, contre 6/6 pour le groupe prompt d'une phrase et 6/6 (press) et 5/6 (courbe) avec le skill. Score 3.33 témoin, 4.50 prompt d'une phrase, 4.75 skill.
• La seule règle que le prompt d'une phrase ne portait pas, le conditionnement des styles de survol par @media (hover: hover), a été suivie par 5/6 pages avec skill et 0/12 des autres pages. C'est toute la marge du skill sur la phrase (+0.25).
• De bonnes habitudes étaient déjà répandues partout : pas de transition: all, seuls transform/opacity/couleur animés, prise en charge de la réduction des animations, pas de scale(0). Les groupes témoins réussissaient ces points 6/6, donc le skill ajoute les règles de finition spécifiques, pas les bases.
• À l'aveugle (captures d'écran bureau, mélangées), les 18 pages sont soignées et aucune n'est cassée ; la qualité de design statique des trois groupes est indiscernable. Le skill change un comportement que l'on ressent, pas ce qu'une capture d'écran montre.
• Coût : 149k tokens par exécution contre 133k (1.12x) et 127k pour le groupe prompt d'une phrase, le surcoût de skill le plus faible que nous ayons mesuré parmi les skills de design.

Scores par dimension

Limites de ce test

• Les règles de mouvement sont vérifiées à partir du texte CSS, pas en observant la page ; une transition peut exister et malgré tout paraître mauvaise.
• La liste de contrôle est dérivée des propres règles du skill, et le prompt d'une phrase énonce la plupart d'entre elles ; le groupe prompt d'une phrase constitue donc une borne haute pour un prompt court.
• Seulement trois briefs de pages statiques ; les composants interactifs (menus déroulants, toasts, tiroirs), auxquels le skill consacre le plus de mots, n'ont pas été demandés.
• n = 2 par groupe et par tâche : les écarts inférieurs à environ 1 point relèvent du bruit.
• La notation basée sur des règles mesure ce que les vérifications peuvent voir ; elle ne juge ni le goût ni si le résultat est le meilleur possible.

Sécurité

Voir security.md. Scan : 0 CRITICAL / 0 HIGH / 0 MEDIUM. Verdict : exécution sûre (bac à sable hors ligne). Un scan propre ne prouve pas qu'un skill est sûr.

En résumé

Si vous voulez des pages qui ont un retour au press, des courbes ease-out et un survol conditionné sans les demander, le skill le fournit pour presque aucun coût en tokens. Une phrase qui énumère les mêmes règles en couvre 94 %, donc la valeur du skill est de vous dispenser de connaître les règles.