emil-design-eng (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). Dieselben drei Briefings wie im frontend-design-Test (eine Tidepool-Landingpage, ein Wasserqualitäts-Dashboard, ein Redesign einer Kletterhallen-Homepage), umgesetzt als einzelne eigenständige HTML-Dateien. Die Prompts nennen weder Animation noch den Skill; die Skill-Gruppe hat den Skill einfach installiert.

Drei-Arm-Vergleich

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

Urteil: Empfohlen (26.2 / 30). Quelle: emilkowalski/skills, skills/emil-design-eng, festgehalten auf Commit a81dbca. Installation: npx skills@latest add emilkowalski/skills --skill emil-design-eng. Lizenz: MIT (Repo-LICENSE).

Was es ist

Der Skill emil-design-eng aus emilkowalski/skills: Emil Kowalskis Design-Engineering-Regeln für UI-Feinschliff, etwa 4.000 Wörter in einer SKILL.md. Er behandelt die Frage, wann überhaupt animiert werden sollte, eigene Ease-out-Kurven statt der Standardwerte, Dauern von 150-300 ms, das Animieren ausschließlich von transform und opacity, Press-Feedback (scale(0.97) bei :active), niemals von scale(0) aus animieren, Stagger, Hover nur bei (hover: hover), reduzierte Bewegung und unsichtbare Details wie Trefferflächen. Keine Skripte.

So haben wir getestet

Codex CLI 0.166 (gpt-6-astra, niedrige Denkstufe) auf einem dedizierten Windows-Test-PC, pro Lauf ein frisches temporäres Projekt und temporäre HOME/TMPDIR/Caches, Skill installiert (Skill-Gruppe), nicht vorhanden (Kontrollgruppe) oder nicht vorhanden, aber mit der Kernanforderung des Skills in 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 erwähnen den Skill nie (außer der unten genannten Formulierung).

Dieselben drei Briefings wie im frontend-design-Test (eine Tidepool-Landingpage, ein Wasserqualitäts-Dashboard, ein Redesign der Homepage eines Kletterstudios), umgesetzt als einzelne eigenständige HTML-Dateien. Die Prompts erwähnen weder Animation noch den Skill; die Skill-Gruppe hat den Skill einfach installiert.

1. Neue Landingpage aus einem Briefing — Erstelle eine einseitige Landingpage für Tidepool, eine kleine Algen-Snack-Marke, die im Abo verkauft (drei Sorten, $14/Box, monatlicher Versand). Schreibe eine einzige eigenständige index.html mit Inline-CSS und minimalem JS nur falls nötig. Keine Frameworks, kein Build-Sy…
2. Datendichtes Dashboard-UI — Baue eine Dashboard-Seite für ein kommunales Team zur Überwachung der Wasserqualität: aktuelle Messwerte für 6 Stationen (pH, Trübung, Chlor, Temperatur), einen 7-Tage-Trend für jede Station und ein Alarmpanel. Eine einzige eigenständige dashboard.html mit Inline-CSS/JS und fest codierten Mess…
3. Eine bestehende blasse Seite neu gestalten — old.html ist die aktuelle Homepage des Granite Peak Climbing Gym (Boulder, CO). Gestalte sie zu new.html um: Behalte alle echten Inhalte (Preise, Kurse, Öffnungszeiten, Adresse), aber lass die Seite zu genau diesem Studio gehören. Eigenständiges HTML/CSS, keine Fra…

Die Bewertung erfolgt programmatisch (versteckte Tests / Recall eingeschleuster Probleme / Constraint-Prüfungen / Rendern+OCR, wo relevant), 0–5 pro Lauf. Kein LLM-Judge hat eine Punktzahl vergeben. Weil es bei diesem Skill um Bewegung und Interaktionsdetails geht, die ein Screenshot nicht zeigt, ist die Punktzahl eine regelbasierte Checkliste über das erzeugte CSS (10 Prüfungen: :active-Press-Feedback, eigene cubic-bezier, kein ease-in/linear/Standard-ease, kein transition: all, nur transform/opacity/Farbe animiert, Dauern <= 300 ms, reduzierte Bewegung, Stagger, kein scale(0), Hover nur bei (hover: hover)), 0-5 pro Lauf. Das deckt sich eng mit den Regeln des Skills; gemessen wird also „hat er den Skill befolgt“, nicht „ist die Seite besser“.

Ergebnisse

Der Ein-Satz-Prompt für die dritte Gruppe: „Poliere wie ein Design-Engineer: eigene Easing-Kurven (Ease-out für Eintritte, nie der Standard oder ease-in), Dauern von 150-300 ms, nur transform und opacity animieren, Press-Feedback wie scale(0.97) bei :active, nie von scale(0) aus animieren, Eintritte staffeln, prefers-reduced-motion respektieren und die unsichtbaren Details ausfeilen (Hover-, Active- und Focus-Zustände, 44 px Trefferflächen).“

Mittelwert: 3.33 ohne vs. 4.75 mit Skill (Delta +1.42). Token pro Lauf: 133k vs. 149k (1.12x); Zeit 178s vs. 163s. Ein-Satz-Gruppe: 4.5 (Gewinn des Skills gegenüber dem Ein-Satz-Prompt: +0.25; Gewinn des Ein-Satz-Prompts gegenüber dem Lauf ohne Skill: +1.17); Token des Ein-Satz-Prompts 127k pro Lauf, der Skill kostet also 1.17x des Ein-Satz-Prompts.

Was dabei herauskam

• Reines Codex schreibt nie Press-Feedback oder eine eigene Easing-Kurve: 0/6 Kontrollseiten haben eine :active-Scale-Regel oder eine cubic-bezier, gegenüber 6/6 in der Ein-Satz-Gruppe und 6/6 (Press) bzw. 5/6 (Kurve) mit dem Skill. Punktzahl 3.33 Kontrolle, 4.50 Ein-Satz, 4.75 Skill.
• Die einzige Regel, die der Ein-Satz-Prompt nicht transportierte – Hover-Stile per @media (hover: hover) absichern –, befolgten 5/6 Skill-Seiten und 0/12 der übrigen Seiten. Das ist der gesamte Vorsprung des Skills gegenüber dem Satz (+0.25).
• Gute Gewohnheiten waren überall verbreitet: kein transition: all, nur transform/opacity/Farbe animiert, Unterstützung für reduzierte Bewegung, kein scale(0). Die Kontrollgruppe lag dabei 6/6 richtig; der Skill ergänzt also die spezifischen Feinschliff-Regeln, nicht die Grundlagen.
• Bei der blinden Betrachtung der Seiten (Desktop-Screenshots, gemischt) sind alle 18 poliert und keine ist kaputt; die statische Designqualität der drei Gruppen ist nicht unterscheidbar. Der Skill verändert ein Verhalten, das man spürt, nicht das, was ein Screenshot zeigt.
• Kosten: 149k Token pro Lauf gegenüber 133k (1.12x) und 127k in der Ein-Satz-Gruppe – der günstigste Skill-Overhead, den wir bei Design-Skills gemessen haben.

Bewertung nach Dimensionen

Grenzen dieses Tests

• Die Bewegungsregeln werden aus dem CSS-Text geprüft, nicht durch Beobachten der Seite; eine Transition kann vorhanden sein und sich trotzdem falsch anfühlen.
• Die Checkliste ist aus den Regeln des Skills abgeleitet, und der Ein-Satz-Prompt nennt die meisten davon; die Ein-Satz-Gruppe ist also eine Obergrenze für einen kurzen Prompt.
• Nur drei statische Seiten-Briefings; interaktive Komponenten (Dropdowns, Toasts, Drawers), denen der Skill die meisten Wörter widmet, wurden nicht angefordert.
• n = 2 pro Gruppe und Aufgabe: Unterschiede unter etwa 1 Punkt sind Rauschen.
• Regelbasierte Bewertung misst nur, was die Prüfungen sehen können; sie kann weder Geschmack noch beurteilen, ob ein Ergebnis das bestmögliche ist.

Sicherheit

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

Fazit

Wer Seiten mit Press-Feedback, Ease-out-Kurven und Hover-Absicherung will, ohne danach zu fragen, bekommt das mit dem Skill zu praktisch keinen Tokenkosten. Ein Satz, der dieselben Regeln auflistet, erreicht 94 % davon; der Wert des Skills liegt also darin, dass man die Regeln nicht kennen muss.