Interface-Skills von Jakub Krehel: bessere Oberflächen mit Claude

Was ist jakubkrehel/skills? Es ist eine Sammlung von Agent-Skills, also Anleitungen in Markdown, die einem Coding-Agenten wie Claude Code beim Bau von Benutzeroberflächen konkrete Regeln vorgeben. Statt «achte auf schöne Animationen» steht dort etwa: Ein gedrückter Knopf skaliert auf 0.96 über 150 Millisekunden mit ease-out, ein deaktivierter nie.

Der Autor Jakub Krehel schreibt über diese Themen auf seiner Website und im Magazin Interfaces. Die Skills fassen diese Inhalte so zusammen, dass ein Agent sie anwenden kann.

Warum jakubkrehel/skills gerade so gefragt ist

Das Repository jakubkrehel/skills wurde am 10.07.2026 angelegt und hatte am 04.11.2026 10'732 Sterne und 412 Forks; auf der Wochenliste von GitHub-Trending stand es mit 1'761 neuen Sternen (Stand 04.11.2026, Quelle: GitHub). Laut Commit-Verlauf erschien am 25.10.2026 Version 1.17.0 des Plugins, in der ein Skill für technische Illustrationen in teardown umbenannt und ausgebaut wurde. Der letzte Commit vor unserem Test stammt vom 02.11.2026.

Dass Oberflächen aus Agenten oft gleich und etwas unfertig wirken, ist inzwischen ein eigenes Thema, das unter dem Begriff AI-Slop diskutiert wird. Die Skills von Krehel setzen dort an, wo andere Design-Skills aufhören: bei Details der Bedienung.

So funktioniert es

Die Sammlung teilt die Arbeit auf. Jede Regel gehört genau einem Skill, so steht es in AGENTS.md:

• better-ui: Radien, optische Ausrichtung, Schatten, Icons, Bewegung
• better-typography: Schriftgrössen, Abstände, Umbrüche, Ziffern
• better-colors: Paletten, Token-Namen, Kontrast
• better-accessibility: Tastatur, Fokus, ARIA, Formulare, reduzierte Bewegung nach WCAGDie Web Content Accessibility Guidelines (WCAG) sind der internationale Standard des W3C für barrierefreie digitale Inhalte. Sie ordnen alle Anforderungen vier…Mehr erfahren → 2.2
• better-layout: Gruppierung, Ausrichtung, Lesereihenfolge, Platz für Übersetzungen
• better-writing: Beschriftungen, Fehlermeldungen, leere Zustände
• better-interface und interface-review: fassen die anderen zu einem gewichteten Bericht zusammen
• dazu Werkzeuge wie break (Komponente unter allen Zuständen testen), variant, state-machine, build-design und teardown

Jeder Skill endet mit einer Tabelle «Before you finish»: ein Muster im Code, das auf einen Fehler hinweist, und die Korrektur. Bei better-ui steht dort zum Beispiel «transition: all» mit der Korrektur, die geänderten Eigenschaften einzeln zu nennen.

Installation

Laut README:

npx skills add jakubkrehel/skills

Oder in Claude Code als Plugin:

/plugin marketplace add jakubkrehel/skills
/plugin install interfaces@interfaces

Diese Befehle haben wir nicht ausgeführt. Wir haben SKILL.md und alle Referenzdateien von better-ui als Text von GitHub gelesen (Commit 60bf140, Plugin-Version 1.17.0) und wörtlich angewendet. Die Skripte des Skills teardown blieben unberührt.

Unser Test

Als Ausgangslage haben wir einen Rückruf-Dialog für die fiktive Schreinerei Holzwerk Muster gebaut, so wie ein Agent ihn ohne Anleitung oft liefert: Knopf mit Anheben beim Überfahren und Schrumpfen auf 90 Prozent beim Drücken, ein Dialog, der mit federnder Keyframe-Animation aufspringt und beim Schliessen einfach verschwindet, Zeitfenster als eigene Chips mit Wackel-Animation, ein Kopier-Knopf, dessen Icon hart wechselt, und überall «transition: all». Native Auswahlfelder gibt es nicht; die Chips sind eigene Knöpfe.

Wir haben better-ui in Claude Code (Modell Claude Opus 5.5) mit dieser Aufgabe angewendet: «Prüfe und poliere diesen Dialog mit better-ui.» Der Skill verlangt einen Bericht nach Prinzipien, sortiert nach Schweregrad, mit Fundstelle, vorher, nachher und Begründung.

Der Bericht nannte drei Fundstellen mit Schweregrad HIGH: die Keyframe-Animation auf dem geöffneten Dialog, die sich nicht umkehren lässt, die Wackel-Animation auf dem gewählten Chip und die fehlende Abfrage von prefers-reduced-motion, also der Systemeinstellung für reduzierte Bewegung. Das Urteil lautete deshalb «Block». Dazu kamen sechs mittlere und zwei kleine Punkte. Umgesetzt wurde:

• Dialog: Übergang statt Keyframes, Einblenden in 300 Millisekunden mit leichtem Anheben von 12 Pixeln, Ausblenden in 150 Millisekunden mit Unschärfe und 12 Pixeln nach oben. Ohne Bewegungswunsch bleibt nur das Überblenden.
• Knöpfe: Drücken skaliert auf 0.96 statt 0.9, Hover-Farbe nur auf Geräten mit Maus, Pfeil-Knopf rechts 2 Pixel weniger Innenabstand.
• Chips: keine Bewegung mehr, nur ein schneller Farbwechsel, weil das eine häufige Interaktion ist.
• Kopieren: beide Icons liegen übereinander und blenden mit Skalierung und Unschärfe über, dazu das Wort «Kopiert», damit Bewegung nie das einzige Signal ist.
• Flächen: Aussenradius der Karte 25 statt 16 Pixel (16 innen plus 8 Abstand plus 1 Rand), Schatten in drei Ebenen statt grauem Rand.

Was gut war: Die Werte sind eindeutig, es gibt keinen Spielraum für «ungefähr». Die Abgrenzung zu anderen Skills funktioniert: Das Grossbuchstaben-Label blieb unangetastet, weil es zu better-typography gehört, und der Bericht sagt das. Die Regel, dass jede animierte Änderung auch ein statisches Signal braucht, hat einen echten Mangel aufgedeckt.

Was weniger gut war: Die Änderungen sind fein. Auf einem Standbild sieht man fast nur Radius und Schatten; der eigentliche Gewinn steckt in der Bewegung. Für Laien ist der Bericht technisch, mit Begriffen wie allow-discrete und starting-style. Und es war ein einzelner Lauf an einer kleinen Komponente.

Beispiele aus der Praxis

• Agenturen mit Agenten-Prototypen: better-interface oder interface-review als Prüfschritt vor der Abnahme, damit Fehler bei Bewegung, Kontrast und Tastatur nicht erst beim Kunden auffallen.
• KMU mit eigener Web-AppEine Web-App ist eine Anwendung, die im Browser läuft und sich wie ein Programm bedienen lässt — mit Login, Eingaben, gespeicherten Daten und Abläufen. Anders…Mehr erfahren →: better-accessibility hilft, Formulare und Dialoge gegen WCAG 2.2 zu prüfen.
• Entwickler ohne Design-Team: better-colors erzeugt Paletten mit benannten Tokens und misst den Kontrast, better-writing vereinheitlicht Fehlermeldungen und Beschriftungen.

Grenzen, Risiken, Lizenz

Die Lizenz ist MIT. Die Skills sind reine Textanleitungen, mit Ausnahme von teardown, das JavaScript-Dateien und Prüfskripte mitbringt; die haben wir nicht ausgeführt. Daten verlassen das Gerät nur so weit, wie das verwendete Sprachmodell den Code verarbeitet. Wer an Kundenprojekten arbeitet, sollte das im Rahmen des Datenschutzgesetzes (DSG) mit dem Modellanbieter geklärt haben. Fremde Skills sollte man vor der Installation lesen; worauf es dabei ankommt, steht in unserem Artikel über sicheres Vibe-Coding.

Für wen lohnt sich jakubkrehel/skills?

Für alle, die Oberflächen mit Agenten bauen und den letzten Schliff nicht dem Zufall überlassen wollen, besonders bei Dialogen, Formularen und Animationen. Wer eine Oberfläche nicht nur polieren, sondern von Grund auf nutzerfreundlich planen will, findet bei unserer UX-Agentur in Zürich Unterstützung; für ganze Websites gibt es unser Webdesign in Zürich.

Weitere Projekte aus dieser Serie finden Sie in der Übersicht über alle 20 GitHub-Trends vom November 2026.