Baseline UI

Meningsstyrt Tailwind/React MÅ-ALDRI-sjekkliste mot AI-generert UI-slop.

av master5d · master5d/claude-design-skills

Bestått ★ 9.6/10

Baseline UI — Meningsstyrt Tailwind/React MÅ-ALDRI-sjekkliste mot AI-generert UI-slop.

Hva den gjør

En regeliste (ikke et skript) som håndhever Tailwind CSS + motion/react-konvensjoner: animasjonsvarighetstak, kun kompositor-animasjonsegenskaper, tilgjengelige primitiver, aria-etiketter på ikonknapper, AlertDialog for destruktive handlinger, og forbudte mønstre som gradienter, h-screen, og blokkert liming. Utløses ved bygging eller gjennomgang av React/Tailwind UI-komponenter.

Testrapport

Kjørte den mot en bevisst rotete Tailwind-kortkomponent: ferdigheten fanget 8 regel-sitert brudd (lilla gradient, h-screen, manglende aria-etikett på en ikonknapp, en 400ms bredde/høyde-overgang, blokkert liming, ubegrunnet tracking-widest, ingen AlertDialog på en destruktiv handling) hver med en nøyaktig fiks, mot en generell gjennomgang som bare flagget 4 av dem vagt.

Testet på: 2026-07-16 · Claude Code 2.x (agent harness)

Installer

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-uiMeningsstyrt Tailwind/React MÅ-ALDRI-sjekkliste mot AI-generert UI-slop.

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen 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?

Full rapport →