Baseline UI

Meningstung Tailwind/React MUST-NEVER-tjekliste mod AI-genereret UI-slop.

Af master5d · master5d/claude-design-skills

Testet · Virker ★ 9.6/10

Baseline UI — Meningstung Tailwind/React MUST-NEVER-tjekliste mod AI-genereret UI-slop.

Hvad det gør

En regelliste (ikke et script), der håndhæver Tailwind CSS + motion/react-konventioner: begrænsninger for animationsvarighed, compositor-only animation props, tilgængelige primitiver, aria-labels på ikonknapper, AlertDialog for destruktive handlinger og forbudte mønstre som gradients, h-screen og blokeret indsættelse. Udløses ved opbygning eller gennemgang af React/Tailwind UI-komponenter.

Testrapport

Kørte den mod en bevidst rodet Tailwind-kortkomponent: skillen fangede 8 regel-citerede overtrædelser (purple gradient, h-screen, manglende aria-label på en ikonknap, en 400ms width/height transition, blocked paste, uretfærdiggjort tracking-widest, no AlertDialog on a destructive action) hver med en præcis løsning, versus en generisk gennemgang, der kun flaggede 4 af dem vagt.

Testet: 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

Kommandoer og eksempelprompter

/baseline-uiMeningstung Tailwind/React MUST-NEVER-tjekliste mod AI-genereret UI-slop.

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):

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?

Læs hele rapporten →