Baseline UI

Meinungsstarke Tailwind/React MUST-NEVER-Checkliste gegen KI-generierten UI-Schrott.

von master5d · master5d/claude-design-skills

Getestet · Funktioniert ★ 9.6/10

Baseline UI — Meinungsstarke Tailwind/React MUST-NEVER-Checkliste gegen KI-generierten UI-Schrott.

Was es kann

Eine Regeliste (kein Skript), die Konventionen für Tailwind CSS + Motion/React erzwingt: Obergrenzen für Animationsdauer, nur Compositor-Animations-Props, zugängliche Primitive, Aria-Labels für Icon-Buttons, AlertDialog für destruktive Aktionen und verbotene Muster wie Farbverläufe, h-screen und blockiertes Einfügen. Löst beim Erstellen oder Überprüfen von React/Tailwind UI-Komponenten aus.

Testbericht

Gegen eine absichtlich unordentliche Tailwind-Kartenkomponente ausgeführt: Der Skill fing 8 regelzitiert Verletzungen ab (violetter Farbverlauf, h-screen, fehlendes Aria-Label für einen Icon-Button, eine 400-ms-Breiten-/Höhenübergang, blockiertes Einfügen, ungerechtfertigtes Tracking-Widest, kein AlertDialog bei einer destruktiven Aktion) jeweils mit einer exakten Korrektur, im Gegensatz zu einer generischen Überprüfung, die nur 4 davon vage beanstandete.

Getestet am: 2026-07-16 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/master5d/claude-design-skills
mkdir -p ~/.claude/skills
cp -r claude-design-skills/skills/baseline-ui ~/.claude/skills/baseline-ui

Befehle & Beispiel-Prompts

/baseline-uiMeinungsstarke Tailwind/React MUST-NEVER-Checkliste gegen KI-generierten UI-Schrott.

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

Review this React component against our Tailwind must-never rules
Check this UI for banned gradients, missing aria-labels, and h-screen
Does this destructive delete button need an AlertDialog confirmation?

Vollständiger Testbericht (Englisch) →