Baseline UI

Nezávislý seznam Tailwind/React MUST-NEVER proti UI slop generovanému AI.

od master5d · master5d/claude-design-skills

Otestováno · Funguje ★ 9.6/10

Baseline UI — Nezávislý seznam Tailwind/React MUST-NEVER proti UI slop generovanému AI.

Co umí

Seznam pravidel (nikoli skript), který vynucuje konvence Tailwind CSS + motion/react: omezení doby animace, animace pouze kompozitoru, přístupné primitivy, aria-labels na ikonových tlačítkách, AlertDialog pro destruktivní akce a zakázané vzory, jako jsou přechody, h-screen a blokované vkládání. Spouští se při vytváření nebo revizi komponent React/Tailwind UI.

Testovací report

Spustil jsem to proti záměrně nepořádné kartové komponentě Tailwind: dovednost zachytila 8 porušení pravidel (fialový přechod, h-screen, chybějící aria-label na ikonovém tlačítku, přechod šířky/výšky 400 ms, blokované vkládání, neoprávněné tracking-widest, žádný AlertDialog na destruktivní akci) z nichž každé s přesnou opravou, oproti obecné revizi, která označila pouze 4 z nich vágně.

Testováno: 2026-07-16 · Claude Code 2.x (agent harness)

Instalace

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

Příkazy a ukázkové prompty

/baseline-uiNezávislý seznam Tailwind/React MUST-NEVER proti UI slop generovanému AI.

Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):

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?

Kompletní testovací report (anglicky) →