improve-animations (emilkowalski/skills)

Name: improve-animations (emilkowalski/skills) review
Item: improve-animations (emilkowalski/skills)
Rating: 25.5
Author: Agent Skills

Audite le code d'animation d'un projet et produit des plans priorisés que d'autres agents exécutent.

improve-animations : transforme un vague « audite les animations » en une liste avec des courbes d'accélération exactes (contrôle 3.2, skill 4.8), mais un prompt d'une phrase avec la même checklist obtient 4.9 pour 0.84 des tokens

RecommandéSûr

Codex CLI · gpt-6-astra

25.5 / 30

Gain par rapport à sans skill : +1.66 · Recommandé · 18 exécutions

Recommandé : total 25.5/30 d'au moins 22, qualité de sortie 4.8 d'au moins 3.5 et gain +1.66 d'au moins +1.0.

SOTA

Réussi

Testé avec Codex.

Couvre Codex, Claude Code

Codex CLI 0.166 (palier SOTA) : 18 exécutions notées. Une réussite ici couvre aussi Claude Code selon notre règle de palier ; elle ne dit rien du second palier.

Scores

Chaque dimension va de 0 à 5 et les six forment le total sur 30. 5 est la meilleure note dans chaque dimension. Coût 5 signifie bon marché et rapide. Installation 5 signifie facile.

Fiabilité du déclenchement: 5.0
Gain par rapport à sans skill: 3.7
Qualité de sortie: 4.8
Coût en tokens et en temps: 4.0
Installation et portabilité: 4.0
Sécurité: 4.0

Revue de sécurité

Sûr

Scan statique : 0 CRITIQUE / 2 ÉLEVÉ / 0 MOYEN. Revue manuelle : sûr à exécuter dans un bac à sable sans réseau (alertes du scanner expliquées). Un scan propre ne prouve pas qu'un skill est sûr.

Installer

npx skills@latest add emilkowalski/skills --skill improve-animations

Source

Commit épinglé: a81dbca07f2217b7103e510c0f13f8d5b017afc9

Testé: 2026-11-02

Ce que nous avons testé

Auditer le code de mouvement — Auditez les animations et le mouvement dans ce projet. Donnez-moi une liste priorisée de ce qu'il faut corriger, avec pour chaque point le fichier et les valeurs de remplacement exactes. Ne modifiez aucun fichier.
Auditer deux composants — Auditez uniquement les animations du menu déroulant et de la modale dans styles.css. Qu'est-ce qui ne va pas et que devraient-elles devenir exactement ? Ne modifiez aucun fichier.
Meilleures corrections à confier à quelqu'un d'autre — Je confie les corrections de mouvement à un collègue qui n'a pas vu ce projet. Listez les 5 corrections d'animation au meilleur rapport effort/impact avec le CSS exact à écrire pour chacune, afin qu'il puisse les implémenter sans me poser de questions. Ne modifiez aucun fichier.

Points forts

Fait passer le score moyen de 3.15 à 4.81 par rapport à sans skill (+1.66).
Le skill a été détecté sans être nommé : son fichier a été lu dans 6/6 exécutions avec skill.
Qualité absolue élevée avec le skill : 4.81 sur 5.

Points faibles

Un prompt d'une phrase obtient 4.94, contre 4.81 avec le skill (-0.13).
n=2 par tâche et par bras ; les écarts inférieurs à environ 1 point sont du bruit.

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). Une petite application web (am_app) avec 8 problèmes de mouvement plantés. Tâches : auditer tout le projet, auditer uniquement le menu déroulant et la modale, et corriger cinq problèmes nommés. Les prompts disent « animations and motion » sans nommer de règle. Le groupe « une phrase » liste les règles et demande des valeurs de remplacement exactes.

Comparaison à trois bras

Bras	Score moyen (0-5)	Tokens par exécution
Sans le skill	3.15	65k
Prompt d'une phrase	4.94	65k
Avec le skill	4.81	78k

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

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

Présentation

Le skill improve-animations (emilkowalski/skills) : un guide d’audit de motion design : courbes ease-out personnalisées plutôt que ease-in/par défaut, durées de 150-300 ms, uniquement transform et opacity, pas de transition: all, pas de départ à scale(0), transform-origin sur le déclencheur, prise en charge de la réduction de mouvement, et aucune animation sur les actions à haute fréquence.

Méthode de test

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

Une petite application web (am_app) avec 8 problèmes de motion implantés. Tâches : auditer tout le projet, auditer seulement le menu déroulant et la modale, et corriger cinq problèmes nommés. Les prompts parlent d’« animations et motion » sans nommer de règle. Le prompt en une phrase énumère les règles et demande des valeurs de remplacement exactes.

Auditer le code de motion — Auditez les animations et le motion de ce projet. Donnez-moi une liste priorisée de ce qu’il faut corriger, avec pour chaque point le fichier et les valeurs de remplacement exactes. Ne modifiez aucun fichier.
Auditer deux composants — Auditez uniquement les animations du menu déroulant et de la modale dans styles.css. Qu’est-ce qui ne va pas et que devraient-elles devenir exactement ? Ne modifiez aucun fichier.
Meilleures corrections à confier à quelqu’un d’autre — Je confie les corrections de motion à un collègue qui n’a pas vu ce projet. Listez les 5 corrections d’animation au plus fort levier avec le CSS exact à écrire pour chacune, afin qu’il puisse les appliquer sans me poser de questions. Ne modifiez aucun fichier.

Le scoring est programmatique (tests cachés / détection des 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 attribué de score.

Résultats

Le prompt en une phrase donné au troisième groupe : « Audite le code de motion comme un ingénieur design senior : signale les courbes ease-in et par défaut, transition: all, les départs à scale(0), l’animation de propriétés de mise en page, l’absence de réduction de mouvement, les animations sur actions à haute fréquence, les transform-origin erronés et les durées trop longues ; pour chaque point, donne le remplacement exact (cubic-bezier ease-out personnalisé, 150-300 ms, transform/opacity uniquement) afin que quelqu’un d’autre puisse l’appliquer, et ne modifie aucun fichier source. »

Tâche	Score témoin	Prompt en une phrase	Avec skill	Tokens témoin	Tokens du prompt en une phrase	Tokens avec skill	Skill lu
t1-audit	3.21	4.82	4.82	65k	66k	77k	2/2
t2-focus	2.5	5.0	5.0	63k	64k	77k	2/2
t3-five-fixes	3.75	5.0	4.62	65k	65k	78k	2/2

Score moyen : 3.15 sans le skill contre 4.81 avec (écart +1.66). Tokens par exécution : 65k contre 78k (1.20x) ; temps 48s contre 49s. Groupe « prompt en une phrase » : 4.94 (gain du skill sur ce prompt : -0.13 ; gain du prompt par rapport à l’absence de skill : +1.79) ; tokens du prompt : 65k par exécution, donc le skill coûte 1.19x le prompt en une phrase.

Ce qui s’est passé

Témoin 3.15, skill 4.81, prompt 4.94 (n=6 chacun). Sans consigne, Codex a trouvé 3-7 des 8 problèmes implantés et n’a donné aucune courbe cubic-bezier ni courbe d’easing exacte dans 5 exécutions sur 6.
Le skill comble cet écart : 5.0 sur les deux exécutions ciblées, où le témoin a manqué le départ à scale(0) de la modale dans les deux, et chaque audit donne des courbes exactes. Le prompt en une phrase obtient le même résultat.
Sur la tâche des cinq corrections, le skill était légèrement en retrait du prompt (4.62 contre 5.0) : les deux exécutions avec skill ont manqué le survol de carte à 700 ms en linéaire, et chacune a manqué un autre problème implanté (scale(0) de la modale, ou transition: all).
Tokens : skill 78k, prompt 65k, témoin 65k (1.2x le témoin). Le skill a été lu dans 6/6 exécutions avec skill sans être nommé.

Scores par dimension

Dimension	Score	Pourquoi
1_output_quality	4.81	Score moyen de 4.81/5 avec le skill (vérifications programmatiques, voir le tableau par tâche).
2_lift_vs_no_skill	3.66	+1.66 point par rapport à 3.15 sans le skill (n=2 par tâche ; un écart inférieur à ~1 point relève du bruit).
3_trigger	5.0	Fichier du skill lu dans 6/6 exécutions avec skill.
4_instructions_portability	4	SKILL.md avec texte de référence uniquement.
5_efficiency	4	1.20x tokens (78k contre 65k par exécution) et 1.03x temps (49s contre 48s).
6_safety_hygiene	4	Uniquement de la prose ; voir security.md.

Limites de ce test

Vérifications de détection sur le texte de l’audit et vérifications regex sur le CSS modifié ; rien n’a été rendu ni mesuré dans un navigateur.
Le prompt en une phrase est une paraphrase proche de la checklist du skill, ce qui en fait une comparaison solide.
Un seul jeu de test ; n=2 par cellule.
n = 2 par groupe et par tâche : un écart inférieur à ~1 point relève du bruit.
Le scoring par règles mesure ce que les vérifications peuvent voir ; il ne peut juger du goût ni du caractère optimal d’un résultat.

Sécurité

Voir security.md. Scan : 0 CRITICAL / 2 HIGH / 0 MEDIUM. Verdict : exécution sans danger (sandbox sans réseau). Un scan propre ne prouve pas qu’un skill est sûr.

En résumé

Le skill bat clairement un audit sans consigne, surtout parce qu’il fournit toujours des courbes et des durées concrètes. Une seule phrase énumérant les mêmes règles fait aussi bien pour moins cher : le gain porte donc sur l’absence de consigne, pas sur un bon prompt.

Transcription

Journal d'exécution : improve-animations (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.)
Colonnes : tâche, groupe-exécution, score (0-5), tokens, secondes, vérifications réussies, fichiers de la skill ouverts par l'agent.

t1-audit control-1: score 3.21, tokens 65584, s 50.5, vérifications 2/3, rien ouvert
t1-audit control-2: score 3.21, tokens 65586, s 52.4, vérifications 2/3, rien ouvert
t1-audit oneliner-1: score 4.64, tokens 66262, s 51.5, vérifications 3/3, rien ouvert
t1-audit oneliner-2: score 5.0, tokens 66276, s 69.8, vérifications 3/3, rien ouvert
t1-audit treatment-1: score 4.64, tokens 78329, s 42.8, vérifications 3/3, ouvert improve-animations
t1-audit treatment-2: score 5.0, tokens 76979, s 51.1, vérifications 3/3, ouvert improve-animations
t2-focus control-1: score 2.5, tokens 64157, s 30.6, vérifications 2/4, rien ouvert
t2-focus control-2: score 2.5, tokens 63682, s 30.8, vérifications 2/4, rien ouvert
t2-focus oneliner-1: score 5.0, tokens 64128, s 32.3, vérifications 4/4, rien ouvert

18 exécutions, 3 artefacts

Exemple de sortie

SOTA · With the skill: final message (t1-audit, run 1, Codex)

Audited all four project files. **No files changed.** This is a static code audit: `index.html` does not load `app.js`, so the dropdown click handler currently never runs. Other open states have no handlers. All motion fixes below are in [styles.css](C:/Users/<user>/AppData/Local/Temp/asv-improve-an-9e585535/work/styles.css), ordered by priority. | Priority | Severity | Location | Finding | Exact replacement | |---|---|---|---|---| | 1 | HIGH | Line 8, `.palette` | The documented ~100 daily keyboard openings should respond immediately. | Replace its declaration with `transition: none;` | | 2 | HIGH | Line 1, `.dropdown` | `400ms ease-in` delays the initial response and makes opening sluggish. | `transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);` | | 3 | HIGH | Lines 4–5, `.modal` | Scaling from zero over 500ms creates excessive movement. | Use the modal replacement below. | | 4 | HIGH | Line 6, `.accordion` | Animating `height` forces repeated layout over 500ms. | Replace `transition: height 0.5s ease;` with `transition: none;`. Keep both height values. This is the smallest safe fix; a smooth reveal needs additional structure. | | 5 | MEDIUM | Missing reduced-motion rule | Dropdown and modal movement have no preference override. | Append the reduced-motion block below, after the other rules. | | 6 | MEDIUM | Line 3, `.btn` | `transition: all` can animate unintended properties. No button state currently changes a visual property. | Replace with `.btn { transition: none; }` | | 7 | MEDIUM | Line 9, `.popover` | Center scaling contradicts its documented connection to the top-bar trigger. | Replace `transform-origin: center;` with `transform-origin: top left;` **if positioned below and left-aligned with the trigger**. Placement is absent from this prototype; use `top right` for right alignment or `top center` for centered alignment. | | 8 | LOW | Lines 10–11, `.card` | A 700ms linear shadow transition makes routine hover feedback linger; hover is also ungated on touch devices. | Use the card replacement below. | Replace lines 4–5 with: ```css .modal { opacity: 0; transform: scale(0.96); transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1), opacity 250ms cubic-bezier(0.23, 1, 0.32, 1); } .modal.open { opacity: 1; transform: scale(1); } ``` Keep the modal’s centered transform origin; it is appropriate here. Replace lines 10–11 with: ```css .card { transition: none; } @media (hover: hover) and (pointer: fine) { .card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .2); } } ``` This preserves hover feedback while removing repeated shadow painting during an animation. Append this reduced-motion override: ```css @media (prefers-reduced-motion: reduce) { .dropdown, .dropdown.open, .modal, .modal.open { transform: none; transition: opacity 200ms ease; } .popover { transition: opacity 200ms ease; } } ``` One grounded optional addition: give the Menu button press feedback with `.btn:active { transform: scale(0.97); }` and `.btn { transition: transform 160ms ease-out; }`. If adopted, also add `.btn:active { transform: none; }` in [... excerpt: first 3200 of 3496 characters]

Voir Pro