animate (emilkowalski/skills)

Bewertung

Codex CLI 0.166 (gpt-6-astra, niedriges Reasoning) auf einem dedizierten Windows-Test-PC, einem frischen temporären Projekt und temporären HOME/TMPDIR/Caches pro Lauf; Skill installiert (Treatment) oder nicht vorhanden (Kontrolle) oder nicht vorhanden mit der Kernanforderung des Skills in einem an den Prompt angehängten Satz (One-Liner-Gruppe); 2 Läufe pro Gruppe und Aufgabe; Netzwerk aus; Schreiben nach /tmp blockiert. Die Prompts nennen den Skill nie (außer der unten genannten Formulierung). Drei Build-Aufgaben, jeweils eine eigenständige HTML-Datei mit Inline-CSS und -JS: ein Dropdown-Menü, ein Modal mit abgedunkeltem Hintergrund und gestapelte Toasts, alle mit Öffnen-/Schließen- bzw. Enter-/Exit-Animationen. Die Prompts nennen keine Motion-Regeln. Der One-Liner listet die Regeln in einem Satz auf.

Drei-Arm-Vergleich

Gemessen mit Codex CLI über 18 Läufe, bewertet durch regelbasierte Prüfungen ohne LLM-Richter. Gesamt 22.0 / 30, Urteil Situativ.

Urteil: Situationsabhängig (22.0 / 30). Quelle: emilkowalski/skills, skills/animate, festgeschrieben auf Commit a81dbca. Installation: npx skills@latest add emilkowalski/skills --skill animate. Lizenz: MIT (LICENSE im Repo).

Was es ist

Der Skill animate (emilkowalski/skills) liefert Bewegungsregeln für UI-Animationen: nur mit Absicht animieren, eine eigene ease-out-cubic-bezier-Kurve (nie ease-in oder der Standard), 150-300 ms, ausschließlich transform und opacity, Press-Feedback mit scale(0.97), nie von scale(0) starten, Eingänge staffeln, unterbrechbare Übergänge, prefers-reduced-motion, Hover nur mit (hover: hover).

Wie wir getestet haben

Codex CLI 0.166 (gpt-6-astra, niedriges Reasoning) auf einem dedizierten Windows-Test-PC, pro Lauf ein frisches temporäres Projekt sowie temporäre HOME/TMPDIR/Caches, Skill installiert (Treatment) oder nicht vorhanden (Kontrolle) oder nicht vorhanden mit der Kernanforderung des Skills als einem an den Prompt angehängten Satz (Ein-Satz-Gruppe), 2 Läufe pro Gruppe und Aufgabe, Netzwerk aus, Schreibzugriffe auf /tmp blockiert. Die Prompts nennen den Skill nie (außer der unten erwähnten Formulierung).

Drei Bauaufgaben, jeweils eine eigenständige HTML-Datei mit Inline-CSS und JS: ein Dropdown-Menü, ein Modal mit abgedunkeltem Hintergrund und Toasts, die sich stapeln — alle mit Öffnen-/Schließen- bzw. Ein-/Ausblendanimationen. Die Prompts erwähnen keine Bewegungsregeln. Der Ein-Satz-Prompt listet die Regeln in einem Satz.

1. Animiertes Dropdown-Menü — Baue menu.html: ein Button, der ein Dropdown-Menü mit 5 Einträgen öffnet, mit Öffnungs- und Schließanimation. Schreibe eine eigenständige HTML-Datei (Inline-CSS und JS, keine Bibliotheken).
2. Animierter Modal-Dialog — Baue modal.html: ein Button, der einen Modal-Dialog mit abgedunkeltem Hintergrund öffnet, mit Öffnungs- und Schließanimation. Schreibe eine eigenständige HTML-Datei (Inline-CSS und JS, keine Bibliotheken).
3. Toast-Benachrichtigungen — Baue toasts.html: drei Buttons, die jeweils eine Toast-Benachrichtigung anzeigen, die sich stapelt und selbst schließt, mit Ein- und Ausblendanimation. Schreibe eine eigenständige HTML-Datei (Inline-CSS und JS, keine Bibliotheken).

Die Bewertung erfolgt programmatisch (versteckte Tests / Erkennung eingepflanzter Fehler / Constraint-Checks / Rendering+OCR, wo relevant), 0–5 pro Lauf. Kein LLM-Judge hat eine Bewertung entschieden.

Ergebnisse

Der Ein-Satz-Prompt für die dritte Gruppe: "Animate wie ein Design Engineer: nur animieren, was einen Zweck hat, eine eigene ease-out-cubic-bezier-Kurve verwenden (nie ease-in oder der Standard), 150-300 ms, nur transform und opacity, Press-Feedback mit scale(0.97), nie von scale(0) starten, Eingänge staffeln, unterbrechbare Übergänge, prefers-reduced-motion beachten und Hover mit (hover: hover) absichern."

Durchschnittswert: 3.71 ohne vs. 4.36 mit dem Skill (Delta +0.64). Token pro Lauf: 78k vs. 132k (1.68x); Zeit 82s vs. 81s. Ein-Satz-Gruppe: 5.0 (Gewinn des Skills gegenüber dem Ein-Satz-Prompt: -0.64; Gewinn des Ein-Satz-Prompts gegenüber ohne Skill: +1.29); Ein-Satz-Token 105k pro Lauf, der Skill kostet also 1.25x so viel wie der Ein-Satz-Prompt.

Was passiert ist

• Kontrolle 3.71, Skill 4.36, Ein-Satz 5.0 (je n=6). Eine regelbasierte Bewegungsprüfung zählt, wie viele von 10 Regeln die Seite befolgt. Die Kontrolle erreichte 6-8 von 10, der Skill 8-9, und der Ein-Satz-Prompt erfüllte in allen 6 Läufen jede Prüfung.
• Die Regeln, die die Kontrolle am häufigsten verfehlte: Press-Feedback (ein :active-scale) in 3 von 6 Läufen, dazu gestaffelte Eingänge und nicht standardmäßiges Easing in einigen Läufen. Der Skill verfehlte Press-Feedback noch in 2 Läufen sowie gestaffelten Eingang oder Easing in mehreren; bei der Toast-Aufgabe lag sein Wert bei 4.14 und 4.57 gegenüber 4.14 für die Kontrolle.
• Token: Skill 132k, Ein-Satz 105k, Kontrolle 78k pro Lauf (1.7x Kontrolle, 1.3x Ein-Satz). Der Skill wurde in 6/6 Treatment-Läufen gelesen; er nutzt mehr Befehle (9.3 pro Lauf gegenüber 4.7).
• Treatment-Läufe legen pro Lauf etwa 3 neue Dateien an (die Skill-Kopie im Arbeitsordner).

Dimensionswerte

Grenzen dieses Tests

• Regelbasierte Checks am Code-Text einer HTML-Datei; die Animationen wurden nicht im Browser gerendert oder zeitlich gemessen, daher werden Flüssigkeit und visuelle Qualität nicht beurteilt.
• Der Ein-Satz-Prompt ist eine enge Paraphrase der Checkliste des Skills, und die Checks spiegeln dieselbe Regelliste.
• n=2 pro Zelle.
• n = 2 pro Gruppe und Aufgabe: Abweichungen unter etwa 1 Punkt sind Rauschen.
• Regelbasierte Bewertung misst, was die Checks sehen können; sie kann weder Geschmack beurteilen noch, ob ein Ergebnis das bestmögliche ist.

Sicherheit

Siehe security.md. Scan: 0 CRITICAL / 0 HIGH / 0 MEDIUM. Urteil: sicher ausführbar (Sandbox ohne Netzwerk). Ein sauberer Scan beweist nicht, dass ein Skill sicher ist.

Fazit

Der Skill verbessert die Einhaltung der Bewegungsregeln gegenüber keiner Anleitung, aber als ein Satz erreichen dieselben Regeln mit weniger Token eine perfekte Bewertung. Der Nutzen besteht also nur gegenüber einem nackten Prompt.