AradhanaID/agent-skills

UI-Stilregeln – eine Schriftart, Abstände statt Rahmen, 80-20-10-Farbaufteilung. Anwenden beim Erstellen von Benutzeroberflächen.

Was ist agent-skills?

Diese Skill-Definition beschreibt ein Designsystem für KI-Agenten (wie Claude Code, Cursor oder Codex), das konsistente UI-Entscheidungen erzwingt, während neue Oberflächen gebaut werden. Das System arbeitet mit einer zwingenden Regelhierarchie: Zuerst wird `reference.md` geladen, das elf Stilregeln, die Farbaufteilung sowie die Ein-Schriftarten- und Ein-Icon-Set-Regel definiert. Der Agent muss vor dem Schreiben von Code die bestehenden UI-Konventionen des Projekts analysieren und dann schrittweise vorgehen: Abstände vor Rahmen setzen, Farben in drei Bändern (80 % neutral, 20 % sekundär, 10 % Akzent) zuweisen, die Ansicht auf mobile Breite prüfen und Icons aus dem vorhandenen Icon-Set verwenden. Der „Done-when“-Mechanismus stellt sicher, dass jeder Schritt messbare Ergebnisse liefert, bevor der nächste beginnt. Dieses System ist plattformunabhängig und eignet sich für jedes Projekt, das eine vorhersagbare, wartbare UI-Stilistik anstrebt.

Funktioniert mit~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/AradhanaID/agent-skills/tree/HEAD/skills/design-system

Dokumentation

Designsystem

Die UI-Einstellungen des Projekts, die beim Bauen angewandt werden, nicht danach. Wenn UI geschrieben wird, ohne reference.md zu konsultieren, wird die Flachbehandlungsregel verletzt, bevor ein Schritt ausgeführt wird; die Regeln sind der Kontext in reference.md, der zuerst geladen wird.

Schritte

Lies die Regeln, dann die vorhandene UI. Nimm die Stilregeln aus reference.md und finde dann, was der Codebestand bereits verwendet — seine Schriftart, Farbpalette, Icons-Set und Rundung wurden bereits gewählt. Erledigt wenn: Die Regeln im Implementierungsplan benannt sind; jede Regel, die bereits im Codebestand existiert, wird abgeglichen, nicht neu definiert.
Abstand vor Rahmen. Trenne Elemente durch Leerraum; ein Rand wird nur hinzugefügt, wenn der Platz für Abstände nicht ausreicht. Erledigt wenn: Jede Elementgrenze allein durch Leerraum dargestellt wird; Rahmen existieren nur dort, wo der Plan benennt, warum der Abstand nicht ausgereicht hat.
Farbe in drei Bändern. Weise pro Oberfläche neutral → 80 %, sekundär → 20 %, Akzent → 10 % zu, bevor Stile geschrieben werden; eine Markierung oder ein Badge ist dort, wo Akzent seinen Platz einnimmt. Erledigt wenn: Die Steuerelemente und Texte nur in ein oder zwei neutralen Tönen erscheinen; der Akzent erscheint in höchstens einem Platz pro Ansicht.
Überprüfe Responsivität und Lesbarkeit. Zeige die Ansicht in einer mobilen Breite an, bevor sie als gestylt erklärt wird; Text nahe reinem Schwarz oder reinem Weiß wird von den Extremen weg bewegt. Erledigt wenn: Das mobile Layout ohne horizontales Scrollen hält; jede Textfarbe ist ein Nicht-Extrem-Ton.
Passe die Icons an. Erkenne die Icon-Bibliothek des Projekts und verwende ein einziges Icon daraus an jeder Stelle, an der es vorkommt. Erledigt wenn: Es wurde ein Icon gemäß den Regeln ausgewählt und kein neues Icon-Set eingeführt wurde.

Referenz

reference.md — die elf Stilregeln, die Farbaufteilung und die Regel für ein vollständiges Icon-Set. Verweise hier auf das Wissen; diese Datei darf niemals angepasst werden.