animate (emilkowalski/skills)
Construit une animation de zéro en décidant de l'objectif, des propriétés, de la courbe, de la durée, de l'interruption et de la sortie.
animate : fait suivre aux animations d'interface générées par Codex les règles de mouvement d'un ingénieur design (contrôle 3.7, skill 4.4, une phrase 5.0) pour 1.7 fois les tokens ; un prompt d'une phrase avec les mêmes règles fait mieux et moins cher
Codex CLI · gpt-6-astra
22.0 / 30
Gain par rapport à sans skill : +0.64 · Selon les cas · 18 exécutions
Selon les cas : le gain +0.64 est inférieur à +1.0. Pour être recommandé, il faut un total de 22/30, une qualité de sortie de 3.5 et un gain de +1.0.
SOTA
RéussiTesté 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
- 2.6
- Qualité de sortie
- 4.4
- Coût en tokens et en temps
- 2.0
- Installation et portabilité
- 4.0
- Sécurité
- 4.0
Revue de sécurité
SûrScan statique : 0 CRITIQUE / 0 ÉLEVÉ / 0 MOYEN. Revue manuelle : sûr à exécuter dans un bac à sable sans réseau (aucun problème détecté). Un scan propre ne prouve pas qu'un skill est sûr.
Installer
npx skills@latest add emilkowalski/skills --skill animate
Commit épinglé: a81dbca07f2217b7103e510c0f13f8d5b017afc9
Testé: 2026-11-02
Ce que nous avons testé
- Menu déroulant animé — Créez menu.html : un bouton qui ouvre un menu déroulant de 5 éléments, avec des animations d'ouverture et de fermeture. Écrivez un seul fichier HTML autonome (CSS et JS en ligne, sans bibliothèque).
- Boîte de dialogue modale animée — Créez modal.html : un bouton qui ouvre une modale avec un fond assombri, avec des animations d'ouverture et de fermeture. Un seul fichier HTML autonome (CSS et JS en ligne, sans bibliothèque).
- Notifications toast — Créez toasts.html : trois boutons qui affichent chacun un toast qui s'empile et se ferme tout seul, avec des animations d'entrée et de sortie. Un seul fichier HTML autonome (CSS et JS en ligne, sans bibliothèque).
Points forts
- Fait passer le score moyen de 3.71 à 4.36 par rapport à sans skill (+0.64).
- Le skill a été détecté sans être nommé : son fichier a été lu dans 6/6 exécutions avec skill.
Points faibles
- Un prompt d'une phrase obtient 5.0, contre 4.36 avec le skill (-0.64).
- Consomme 1.68 fois plus de tokens que sans skill.
- 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). Trois tâches de construction, chacune un fichier HTML autonome avec CSS et JS en ligne : un menu déroulant, une modale avec fond assombri, et des toasts empilés, tous avec des animations d'ouverture/fermeture ou d'entrée/sortie. Les prompts ne mentionnent pas les règles de mouvement. Le groupe « une phrase » liste les règles en une phrase.
Comparaison à trois bras
| Bras | Score moyen (0-5) | Tokens par exécution |
|---|---|---|
| Sans le skill | 3.71 | 78k |
| Prompt d'une phrase | 5.0 | 105k |
| Avec le skill | 4.36 | 132k |
Mesuré avec Codex CLI sur 18 exécutions, noté par des contrôles basés sur des règles, sans juge LLM. Total 22.0 / 30, verdict Selon les cas.
Verdict : selon les cas (22.0 / 30). Source : emilkowalski/skills, skills/animate, épinglé au commit a81dbca. Installation : npx skills@latest add emilkowalski/skills --skill animate. Licence : MIT (LICENSE du dépôt).
Présentation
Le skill animate (emilkowalski/skills) réunit des règles de motion pour construire des animations d'interface : n'animer qu'avec une intention, un ease-out cubic-bezier personnalisé (jamais ease-in ni la valeur par défaut), 150-300 ms, uniquement transform et opacity, un retour au clic avec scale(0.97), ne jamais partir de scale(0), des entrées en cascade, des transitions interruptibles, prefers-reduced-motion, le survol conditionné par (hover: hover).
Notre méthode de test
Codex CLI 0.166 (gpt-6-astra, raisonnement faible) sur un PC de test Windows dédié, un projet temporaire neuf et des HOME/TMPDIR/caches temporaires à chaque exécution, skill installé (groupe traité) ou absent (groupe témoin), ou absent avec l'exigence centrale du skill compressée en une phrase ajoutée au prompt (groupe « 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).
Trois tâches de construction, chacune produisant un fichier HTML autonome avec CSS et JS en ligne : un menu déroulant, une modale avec arrière-plan assombri et des toasts empilés, tous avec des animations d'ouverture/fermeture ou d'entrée/sortie. Les prompts ne mentionnent aucune règle de motion. Le prompt d'une phrase énumère les règles en une seule phrase.
- Menu déroulant animé — Créez menu.html : un bouton qui ouvre un menu déroulant de 5 éléments, avec des animations d'ouverture et de fermeture. Écrivez un seul fichier HTML autonome (CSS et JS en ligne, sans bibliothèque).
- Boîte de dialogue modale animée — Créez modal.html : un bouton qui ouvre une modale avec un arrière-plan assombri, avec des animations d'ouverture et de fermeture. Écrivez un seul fichier HTML autonome (CSS et JS en ligne, sans bibliothèque).
- Notifications toast — Créez toasts.html : trois boutons qui affichent chacun une notification toast, laquelle s'empile et se ferme d'elle-même, avec des animations d'entrée et de sortie. Écrivez un seul fichier HTML autonome (CSS et JS en ligne, sans bibliothèque).
Le scoring est programmatique (tests cachés / rappel des anomalies introduites / vérifications de contraintes / rendu + OCR le cas échéant), 0–5 par exécution. Aucun juge LLM n'a décidé d'un seul score.
Résultats
Le prompt d'une phrase donné au troisième groupe : « Animez comme un design engineer : n'animez que ce qui a une intention, utilisez un ease-out cubic-bezier personnalisé (jamais ease-in ni la valeur par défaut), 150-300 ms, uniquement transform et opacity, un retour au clic avec scale(0.97), ne partez jamais de scale(0), des entrées en cascade, des transitions interruptibles, respectez prefers-reduced-motion et conditionnez le survol avec (hover: hover). »
| Tâche | Score témoin | Une phrase | Avec le skill | Tokens témoins | Tokens (une phrase) | Tokens avec le skill | Skill lu |
|---|---|---|---|---|---|---|---|
| t1-dropdown | 3.5 | 5.0 | 4.14 | 81k | 100k | 163k | 2/2 |
| t2-modal | 3.5 | 5.0 | 4.57 | 61k | 100k | 110k | 2/2 |
| t3-toasts | 4.14 | 5.0 | 4.36 | 93k | 114k | 121k | 2/2 |
Score moyen : 3.71 sans contre 4.36 avec le skill (delta +0.64). Tokens par exécution : 78k contre 132k (1.68x) ; temps 82s contre 81s. Groupe « une phrase » : 5.0 (gain du skill sur le prompt d'une phrase : -0.64 ; gain du prompt d'une phrase sur l'absence de skill : +1.29) ; 105k tokens par exécution pour le prompt d'une phrase, donc le skill coûte 1.25x ce prompt.
Ce qui s'est passé
- Témoin 3.71, skill 4.36, une phrase 5.0 (n=6 chacun). Une vérification de motion basée sur des règles compte combien des 10 règles la page respecte. Le témoin en atteignait 6 à 8 sur 10, le skill 8 à 9, et le prompt d'une phrase satisfaisait toutes les vérifications sur les 6 exécutions.
- Les règles le plus souvent manquées par le témoin : le retour au clic (un scale sur :active) dans 3 exécutions sur 6, ainsi que les entrées en cascade et l'easing non par défaut dans certaines exécutions. Le skill manquait encore le retour au clic dans 2 exécutions et l'entrée en cascade ou l'easing dans plusieurs ; sur la tâche des toasts, son score était de 4.14 et 4.57 contre 4.14 pour le témoin.
- Tokens : 132k pour le skill, 105k pour le prompt d'une phrase, 78k pour le témoin par exécution (1.7x le témoin, 1.3x le prompt d'une phrase). Le skill a été lu dans 6/6 exécutions avec le skill ; il utilise plus de commandes (9.3 par exécution contre 4.7).
- Les exécutions avec le skill ajoutent environ 3 nouveaux fichiers (la copie du skill dans le dossier de travail) par exécution.
Scores par dimension
| Dimension | Score | Pourquoi |
|---|---|---|
| 1_output_quality | 4.36 | Score moyen de 4.36/5 avec le skill (vérifications programmatiques, voir le tableau par tâche). |
| 2_lift_vs_no_skill | 2.64 | +0.64 point contre 3.71 sans le skill (n=2 par tâche ; en dessous d'environ 1 point, c'est du bruit). |
| 3_trigger | 5.0 | Fichier du skill lu dans 6/6 exécutions avec le skill. |
| 4_instructions_portability | 4 | Règles de SKILL.md plus texte de référence. |
| 5_efficiency | 2 | 1.68x de tokens (132k contre 78k par exécution) et 0.99x de temps (81s contre 82s). |
| 6_safety_hygiene | 4 | Uniquement de la prose ; voir security.md. |
Limites de ce test
- Vérifications basées sur des règles portant sur le code texte d'un fichier HTML ; les animations n'ont pas été rendues ni chronométrées dans un navigateur, la fluidité et la qualité visuelle ne sont donc pas jugées.
- Le prompt d'une phrase est une paraphrase fidèle de la propre checklist du skill, et les vérifications reprennent la même liste de règles.
- n=2 par cellule.
- n = 2 par groupe et par tâche : les différences inférieures à environ 1 point relèvent du bruit.
- Le scoring basé sur des 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 / 0 HIGH / 0 MEDIUM. Verdict : sûr à exécuter (sandbox sans réseau). Un scan propre ne prouve pas qu'un skill est sûr.
En résumé
Le skill améliore le respect des règles de motion par rapport à l'absence de consignes, mais les mêmes règles résumées en une phrase obtiennent un score parfait pour moins de tokens : le bénéfice n'existe donc que face à un prompt nu.
Transcription
Journal d'exécution : animate (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-dropdown control-1: score 3.71, tokens 52757, s 64.6, vérifications 1/2, rien ouvert t1-dropdown control-2: score 3.29, tokens 109744, s 78.3, vérifications 1/2, rien ouvert t1-dropdown oneliner-1: score 5.0, tokens 90139, s 90.1, vérifications 2/2, rien ouvert t1-dropdown oneliner-2: score 5.0, tokens 110798, s 84.6, vérifications 2/2, rien ouvert t1-dropdown treatment-1: score 4.14, tokens 162460, s 70.2, vérifications 2/2, ouvert animate t1-dropdown treatment-2: score 4.14, tokens 165193, s 85.1, vérifications 2/2, ouvert animate t2-modal control-1: score 3.71, tokens 69259, s 69.5, vérifications 1/2, rien ouvert t2-modal control-2: score 3.29, tokens 52805, s 73.9, vérifications 1/2, rien ouvert t2-modal oneliner-1: score 5.0, tokens 110675, s 103.1, vérifications 2/2, rien ouvert
18 exécutions, 3 artefacts
Exemple de sortie
SOTA · With the skill: menu.html (t1-dropdown, run 1, Codex)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Workspace menu</title> <style> :root { font-family: system-ui, sans-serif; color: #252c39; background: #f4f5f7; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); } * { box-sizing: border-box; } body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: 24px; } main { width: min(100%, 400px); min-height: 440px; } .eyebrow { color: #687183; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } h1 { margin: 12px 0 8px; font-size: 30px; letter-spacing: -.04em; } .description { margin: 0 0 28px; color: #687183; font-size: 14px; line-height: 1.6; } .dropdown { position: relative; width: min(100%, 280px); } button { font: inherit; cursor: pointer; } .trigger { display: flex; align-items: center; justify-content: space-between; gap: 32px; border: 1px solid #303a4e; border-radius: 12px; background: #293448; color: white; padding: 14px 18px; font-size: 14px; font-weight: 600; box-shadow: 0 3px 5px #20293b15; } .chevron { width: 16px; height: 16px; transition: transform 200ms var(--ease-out); } [aria-expanded="true"] .chevron { transform: rotate(180deg); } .menu { position: absolute; top: calc(100% + 10px); left: 0; width: 100%; padding: 6px; border: 1px solid #e1e4eb; border-radius: 14px; background: white; box-shadow: 0 16px 36px -12px #27324a30, 0 3px 8px #27324a08; opacity: 0; transform: scale(.95); transform-origin: top left; pointer-events: none; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); } .dropdown.open .menu { opacity: 1; transform: scale(1); pointer-events: auto; } .item { width: 100%; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 8px; background: transparent; color: #394256; padding: 12px; text-align: left; font-size: 14px; } .icon { width: 20px; text-align: center; color: #738098; font-size: 18px; line-height: 1; } .item:last-child { margin-top: 5px; border-top: 1px solid #edf0f5; border-radius: 0 0 8px 8px; } button:focus-visible { outline: 2px solid #657cf0; outline-offset: 3px; } .item:focus-visible { outline-offset: -2px; background: #f0f3fa; } @media (hover: hover) and (pointer: fine) { .trigger:hover { background: #36435b; } .item:hover { background: #f0f3fa; } } .dropdown.instant .menu, .dropdown.instant .chevron { transition: none; } @media (prefers-reduced-motion: reduce) { .menu, .dropdown.open .menu { transform: none; } .chevron { transition: none; } } .status { margin-top: 300px; font-size: 13px; color: #687183; min-height: 20px; } </style> </head> <body> <main> <div class="eyebrow">Your workspace</div> <h1>A little room for everything.</h1> <p class="description">Your everyday essentials, one click away.</p> <div class="dropdown" id="dropdown"> <button class="trigger" id="trigger" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="menu"> Workspace <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-wid [... excerpt: first 3200 of 7249 characters]