Baseline UI
Opiniodawcza lista kontrolna Tailwind/React MUST-NEVER w stosunku do generowanych przez AI śmieci interfejsu użytkownika.
Testowano · Działa
Co robi ten skill
Lista reguł (nie skrypt), która egzekwuje konwencje Tailwind CSS + motion/react: limity czasu animacji, właściwości animacji tylko kompozytora, dostępne prymitywy, aria-labels na przyciskach ikon, AlertDialog dla destrukcyjnych akcji i zakazane wzorce, takie jak gradienty, h-screen i zablokowane wklejanie. Wyzwalane podczas budowania lub przeglądania komponentów React/Tailwind UI.
Raport z testu
Uruchomiono na celowo niechlujnym komponencie karty Tailwind: umiejętność wykryła 8 naruszeń cytowanych reguł (fioletowy gradient, h-screen, brak aria-label na przycisku ikony, przejście szerokości/wysokości 400 ms, zablokowane wklejanie, nieuzasadnione śledzenie-najszersze, brak AlertDialog na destrukcyjnej akcji) każde z dokładną poprawką, w porównaniu do ogólnego przeglądu, który zaznaczył tylko 4 z nich niejasno.
Testowano: 2026-07-16 · Claude Code 2.x (agent harness)
Instalacja
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
Komendy i przykładowe prompty
/baseline-uiOpiniodawcza lista kontrolna Tailwind/React MUST-NEVER w stosunku do generowanych przez AI śmieci interfejsu użytkownika.
Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):
Review this React component against our Tailwind must-never rulesCheck this UI for banned gradients, missing aria-labels, and h-screenDoes this destructive delete button need an AlertDialog confirmation?