baseline-uivon Julien Thibeaut

Baseline UI Skill.

Ein Skill für Claude Code und Codex zur Design-Überprüfung: behebt schnell Abstände, Hierarchie, Typografie und kleine Layout-Probleme in UI-Code.

Design Review & Accessibility
UI-Code

OpenDesign herunterladen Anleitung ansehen

ibelick/ui-skills · skills/baseline-ui/SKILL.mdSKILL.md

--- name: baseline-ui description: Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass. --- ## How to use ## Stack ## Components ## Interaction ## Animation ## Typography

Front matter und Abschnittsüberschriften aus der Upstream-Datei vom 14.09.2026 · 3.417 Zeichen insgesamt

01 Was es tut

Was der baseline-ui Skill in Claude Code und Codex bewirkt

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Baseline UI ist ein Review-Skill, der eine meinungsstarke UI-Baseline durchsetzt, um von KI generierten Interface-Wildwuchs in einer Codebasis zu verhindern. Er richtet sich an Tailwind-CSS-Projekte mit React-Primitives und wird als dauerhafte Regelmenge für jede UI-Arbeit im Gespräch oder als dateibasierter Review-Durchgang installiert.

Das Besondere ist das Vokabular: Er nennt genau die Utilities und Props, die zu verwenden oder zu vermeiden sind – von h-dvh statt h-screen und text-balance für Überschriften bis zu ausschließlich Compositor-Animationen mit maximal 200ms und keinen willkürlichen z-index-Werten. Setzen Sie ihn ein, wenn die Oberfläche einen schnellen Aufräum- oder Feinschliff-Durchgang braucht.

Was er erzeugt

Eine einsatzweise Erklärung, warum jeder Verstoß relevant ist.
Ein konkreter, codebasierter Fix für jeden Befund.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Rufen Sie es als gesprächsweiten Constraint-Satz auf
Das bloße Ausführen des Befehls wendet alle Constraints dieser Datei auf jede UI-Arbeit in dieser Konversation an, nicht nur auf eine Datei.
02
Oder richten Sie es auf eine einzelne Datei
Die Angabe eines Datei-Ziels schaltet den Skill in den Review-Modus, in dem diese Datei gegen alle unten aufgeführten Constraints geprüft wird.
03
Geben Sie einen dreiteiligen Violation Report zurück
Jeder Befund zitiert das betreffende Snippet, liefert einen kurzen Satz dazu, warum es wichtig ist, und schlägt einen codebasierten Fix vor.
04
Arbeiten Sie die Constraint-Gruppen in Reihenfolge durch
Die Datei organisiert ihre Regeln in Stack, Components, Interaction, Animation, Typography, Layout, Performance und Design, jeweils mit einer Mischung aus MUST-, SHOULD- und NEVER-Punkten.

02 Finden Sie Ihren Favoriten

Wann Sie den baseline-ui Skill verwenden sollten

Verwenden Sie den baseline-ui Skill in Claude Code oder Codex, wenn die Aufgabe Design-Review dieser Art ist. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

Ein schneller Cleanup- oder Polish-Durchgang für eine Oberfläche, die von einer konsistenten Baseline abgewichen ist.
Überprüfung einer bestimmten Datei auf Abstände, Hierarchie, Typografie und kleine Layout-Probleme.

Grenzen kennen

Design-Arbeit, die auf Verläufen, benutzerdefinierten Easing-Kurven oder benutzerdefiniertem Letter-Spacing beruht – all das ist nur nach expliziter Anfrage freigeschaltet.
Eigenhändiges Implementieren von Tastatur- oder Fokusverhalten, was nicht erlaubt ist, sofern nicht explizit angefragt.

Was Sie bereitstellen sollten

Eine zu prüfende DateiOptional. Die Angabe einer Datei verwandelt den Skill in einen Review-Durchgang, der Verstöße nur für diese Datei meldet.

03 Innerhalb des Skills

Regeln, die der baseline-ui Skill Claude Code und Codex vorgibt

8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Bleiben Sie bei den Tailwind-CSS-Standardwerten
Benutzerdefinierte Werte sind nur akzeptabel, wenn sie bereits im Projekt existieren oder explizit angefragt wurden; andernfalls muss der Agent die Standardwerte von Tailwind verwenden.
Keine Animation, sofern nicht angefragt
Animation ist standardmäßig deaktiviert. Wird sie explizit angefragt, dürfen nur Compositor-Eigenschaften animiert werden, niemals width, height, top, left, margin oder padding.
Interaktions-Feedback auf 200ms begrenzen
Einleitungen sollten ease-out verwenden, Loop-Animationen müssen pausieren, wenn sie außerhalb des Bildschirms sind, und prefers-reduced-motion sollte respektiert werden.
Niemals Primitiv-Systeme mischen
Alles mit Tastatur- oder Fokusverhalten benötigt ein zugängliches Primitiv aus Base UI, React Aria oder Radix, bestehende Projekt-Primitive haben Vorrang, und das eigenhändige Nachbauen von Tastatur- oder Fokusverhalten ist verboten, sofern nicht explizit angefragt.
Verwenden Sie h-dvh, niemals h-screen
Der Abschnitt zur Interaktion verlangt zudem, dass fixierte Elemente safe-area-inset respektieren und Fehler direkt neben der Stelle angezeigt werden, an der die Aktion stattfindet.
Verwenden Sie eine feste z-index-Skala
Beliebige z-Werte sind nicht zulässig, und quadratische Elemente sollten size- anstelle von gepaarten w- und h-Utilities verwenden.
Halten Sie Typografie-Utilities wörtlich ein
text-balance für Überschriften, text-pretty für Fließtext, tabular-nums für Daten, und letter-spacing darf nicht angepasst werden, außer wenn ausdrücklich gewünscht.
Keine Farbverläufe oder Leuchteffekte standardmäßig
Farbverläufe erfordern eine ausdrückliche Anfrage, violette und mehrfarbige Verläufe sind vollständig ausgeschlossen, und Leuchteffekte dürfen nicht als primäre Affordanz dienen.

04 In Betrieb nehmen

baseline-ui in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

baseline-ui zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

npx skills add https://github.com/ibelick/ui-skills --skill baseline-ui

Generische skills-CLI-Form für skills/baseline-ui/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Dem Skill eine erste Design-Review-Aufgabe geben

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

Review [src/components/SettingsDialog.tsx] against the baseline UI constraints. We generated this dialog quickly and the spacing, hierarchy and layout feel off, so report the violations with the exact lines, why they matter, and the code-level fix for each.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Bestätigen Sie, dass keine animierte Eigenschaft außerhalb von transform und opacity verwendet wird.
Bestätigen Sie, dass Icon-only-Buttons ein aria-label tragen und destruktive Aktionen hinter einem AlertDialog liegen.

In OpenDesign importieren Sie baseline-ui über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es anschließend in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: Julien Thibeaut
Repository: github.com/ibelick/ui-skills Branch main
Skill-Datei: skills/baseline-ui/SKILL.md Inhaltsprüfsumme bei Verifizierung erfasst; Commit 79081ab
License: MIT Aus LICENSE.
Repository-Sterne: 8.402 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository ibelick/ui-skills, das 5 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für baseline-ui.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

VerwendungZwei Aufrufmodi: der bloße Befehl wendet Vorgaben an, ein Datei-Argument löst einen Verstoßbericht aus.
StackTailwind-CSS-Standardwerte, motion/react für JS-Animationen, tw-animate-css und das cn-Utility.
KomponentenNur barrierefreie Primitives, bestehende Projekt-Primitives zuerst, aria-label auf Icon-only-Buttons.
InteraktionAlertDialog für destruktive Aktionen, Skeletons für Ladezustände, h-dvh, safe-area-inset, kein blockiertes Einfügen.
AnimationKeine Animation ohne ausdrückliche Anfrage; nur Compositor-Eigenschaften, ease-out, 200ms-Obergrenze, reduced-motion wird respektiert.
Typografietext-balance bei Überschriften, text-pretty im Fließtext, tabular-nums für Daten, keine Änderungen an tracking.
LayoutFeste z-index-Skala statt beliebiger Werte, size-* für quadratische Elemente.
PerformanceGroße blur- oder backdrop-filter-Animationen vermeiden, will-change eingrenzen, Render-Logik gegenüber useEffect bevorzugen.
DesignKeine Farbverläufe oder Leuchteffekte, Standard-Schatten-Skala, eine Akzentfarbe, bestehende Tokens wiederverwenden.

Die eigene Beschreibung des Skills

„UI-Code schnell aufräumen durch Korrektur von Abständen, Hierarchie, Typografie und kleinen Layout-Problemen. Verwenden Sie dies, wenn die Oberfläche eine schnelle Bereinigung oder einen Feinschliff benötigt."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 3.417 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

06 Vor der Installation

Fragen zum baseline-ui-Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Welchen Stack setzt es voraus?

Tailwind-CSS-Standardwerte, motion/react (früher framer-motion) bei erforderlicher JavaScript-Animation, tw-animate-css für Einblend- und Mikroanimationen, und das cn-Utility, aufgebaut aus clsx und tailwind-merge.

Fügt es Animationen oder Farbverläufe hinzu, um die Optik zu verbessern?

Nein. Animationen werden nie hinzugefügt, es sei denn, sie werden explizit angefordert, und Verläufe werden nur bei expliziter Anforderung verwendet. Violette und mehrfarbige Verläufe sind grundsätzlich ausgeschlossen.

Welche Komponentenbibliotheken erlaubt es?

Base UI, React Aria oder Radix für alles mit Tastatur- oder Fokusverhalten, wobei die bestehenden Primitives des Projekts bevorzugt werden. Base UI ist die empfohlene Wahl für neue Primitives, sofern kompatibel mit dem Stack, und das Mischen von Primitive-Systemen auf einer Interaktionsfläche ist nicht erlaubt.

Baseline UI

Führen Sie baseline-ui für eine echte Design-Review-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie baseline-ui über den SKILL.md-Link, fügen Sie die obige Aufforderung ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen