Baseline UI

Opinionsbaserad Tailwind/React MÅSTE-ALDRIG-checklista mot AI-genererat UI-skräp.

av master5d · master5d/claude-design-skills

Testad · Fungerar ★ 9.6/10

Baseline UI — Opinionsbaserad Tailwind/React MÅSTE-ALDRIG-checklista mot AI-genererat UI-skräp.

Vad den gör

En regelista (inte ett skript) som upprätthåller konventioner för Tailwind CSS + motion/react: gränser för animationsvaraktighet, endast kompositörsanimerings-egenskaper, tillgängliga primitiver, aria-etiketter på ikonknappar, AlertDialog för destruktiva åtgärder och förbjudna mönster som gradienter, h-screen och blockerad paste. Triggers vid byggande eller granskning av React/Tailwind UI-komponenter.

Testrapport

Körde den mot en avsiktligt rörig Tailwind-kortkomponent: skillen fångade 8 regel-citerade överträdelser (lila gradient, h-screen, saknad aria-etikett på en ikonknapp, en 400ms bredd/höjd-övergång, blockerad paste, oberättigad tracking-widest, ingen AlertDialog på en destruktiv åtgärd) var och en med en exakt fix, jämfört med en generell granskning som bara flaggade 4 av dem vagt.

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

Kommandon och exempelprompter

/baseline-uiOpinionsbaserad Tailwind/React MÅSTE-ALDRIG-checklista mot AI-genererat UI-skräp.

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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 hela rapporten →