Baseline UI

Checklist Tailwind/React MUST-NEVER basata su opinioni contro la 'slop' UI generata da AI.

di master5d · master5d/claude-design-skills

Promosso ★ 9.6/10

Baseline UI — Checklist Tailwind/React MUST-NEVER basata su opinioni contro la 'slop' UI generata da AI.

Cosa fa

Un elenco di regole (non uno script) che impone le convenzioni Tailwind CSS + motion/react: limiti di durata delle animazioni, proprietà di animazione solo per il compositore, primitive accessibili, aria-labels sui pulsanti icona, AlertDialog per azioni distruttive e pattern vietati come gradienti, h-screen e paste bloccato. Si attiva durante la costruzione o la revisione di componenti UI React/Tailwind.

Rapporto di test

Eseguito contro un componente card Tailwind deliberatamente disordinato: la skill ha rilevato 8 violazioni citate dalle regole (gradiente viola, h-screen, aria-label mancante su un pulsante icona, una transizione width/height di 400ms, paste bloccato, tracking-widest ingiustificato, nessun AlertDialog su un'azione distruttiva) ciascuna con una correzione esatta, rispetto a una revisione generica che ne ha segnalate solo 4 in modo vago.

Testato il: 2026-07-16 · Claude Code 2.x (agent harness)

Installazione

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

Comandi e prompt di esempio

/baseline-uiChecklist Tailwind/React MUST-NEVER basata su opinioni contro la 'slop' UI generata da AI.

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

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?

Rapporto completo →