Aesthetic
Ustrukturyzowany framework BEAUTIFUL/RIGHT/SATISFYING/PEAK do projektowania UI z konkretnymi zasadami czasu animacji i kontrastu
Testowano · Działa
Co robi ten skill
Prowadzi przez projektowanie UI/UX przez czteroetapowy framework (estetyka, funkcjonalność, mikrointerakcje, storytelling), oparty na plikach referencyjnych z konkretnymi liczbami — współczynniki kontrastu WCAG, czasy animacji 150–300 ms, krzywe ease-out/ease-in. Uruchamia się przy budowaniu interfejsów, analizie inspiracji projektowych czy dodawaniu mikrointerakcji; workflow przechwytywania inspiracji i generowania obrazów zależy od skillów towarzyszących (chrome-devtools, ai-multimodal) z tego samego repozytorium.
Raport z testu
Poproszono o poradę dot. kart cenowych i hover: baseline dał ogólnikowe punkty („dodaj przestrzeni”, „dobry kontrast”), a skill podał liczby — 200 ms ease-out, kontrast WCAG 4,5:1, limit 2–3 krojów — z plików referencyjnych.
Testowano: 2026-07-10 · Claude Code 2.x (agent harness)
Instalacja
git clone https://github.com/mrgoonie/claudekit-skills cd claudekit-skills mkdir -p ~/.claude/skills cp -r .claude/skills/aesthetic ~/.claude/skills/aesthetic
Komendy i przykładowe prompty
/aestheticUstrukturyzowany framework BEAUTIFUL/RIGHT/SATISFYING/PEAK do projektowania UI z konkretnymi zasadami czasu animacji i kontrastu
Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):
Review this UI's contrast ratios against WCAG guidelinesAdd micro-interactions with proper easing and timingMake this interface feel more polished and satisfying