Aesthetic

Strukturovaný framework BEAUTIFUL/RIGHT/SATISFYING/PEAK pro UI design s konkrétními pravidly pro timing a kontrast.

od mrgoonie · mrgoonie/claudekit-skills

Otestováno · Funguje ★ 8.8/10

Aesthetic — Strukturovaný framework BEAUTIFUL/RIGHT/SATISFYING/PEAK pro UI design s konkrétními pravidly pro timing a kontrast.

Co umí

Provede prací na UI/UX designu čtyřstupňovým frameworkem (estetika, funkčnost, mikrointerakce, storytelling), podloženým referenčními soubory s konkrétními čísly — kontrastní poměry podle WCAG, 150–300ms časování animací, křivky ease-out/ease-in. Spouští se při stavbě rozhraní, analýze designové inspirace nebo přidávání mikrointerakcí; workflow pro zachytávání inspirace a generování obrázků závisí na doprovodných skillech (chrome-devtools, ai-multimodal) ve stejném repozitáři.

Testovací report

Na radu k hierarchii pricing karty a hover stavu dal baseline obecné rady („víc bílého místa", „dobrý kontrast"), skill citoval přesná čísla — 200ms ease-out zvednutí, kontrast textu 4,5:1 podle WCAG — přímo z referenčních souborů.

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

Instalace

git clone https://github.com/mrgoonie/claudekit-skills
cd claudekit-skills
mkdir -p ~/.claude/skills
cp -r .claude/skills/aesthetic ~/.claude/skills/aesthetic

Příkazy a ukázkové prompty

  • /aestheticStrukturovaný framework BEAUTIFUL/RIGHT/SATISFYING/PEAK pro UI design s konkrétními pravidly pro timing a kontrast.

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 UI's contrast ratios against WCAG guidelines
  • Add micro-interactions with proper easing and timing
  • Make this interface feel more polished and satisfying