Baseline UI

Gedragsgestuurde Tailwind/React MUST-NEVER checklist tegen AI-gegenereerde UI-rommel.

Door master5d · master5d/claude-design-skills

Getest · Werkt ★ 9.6/10

Baseline UI — Gedragsgestuurde Tailwind/React MUST-NEVER checklist tegen AI-gegenereerde UI-rommel.

Wat het doet

Een lijst met regels (geen script) die conventies van Tailwind CSS + motion/react afdwingt: animatieduur caps, alleen-compositor animatie props, toegankelijke primitives, aria-labels op icoon-knoppen, AlertDialog voor destructieve acties, en geblokkeerde patronen zoals gradiënten, h-screen, en geblokkeerd plakken. Triggers bij het bouwen of beoordelen van React/Tailwind UI-componenten.

Testrapport

Uitgevoerd op een opzettelijk rommelige Tailwind kaartcomponent: de skill ving 8 regel-geciteerde schendingen (paarse gradiënt, h-screen, ontbrekend aria-label op een icoon-knop, een 400ms breedte/hoogte overgang, geblokkeerd plakken, ongerechtvaardigd tracking-widest, geen AlertDialog op een destructieve actie) elk met een exacte oplossing, tegenover een generieke beoordeling die er slechts 4 vaag markeerde.

Getest op: 2026-07-16 · Claude Code 2.x (agent harness)

Installatie

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

Commando's en voorbeeldprompts

/baseline-uiGedragsgestuurde Tailwind/React MUST-NEVER checklist tegen AI-gegenereerde UI-rommel.

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

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?

Volledig rapport (Engels) →