Aesthetic

Ustrukturyzowany framework BEAUTIFUL/RIGHT/SATISFYING/PEAK do projektowania UI z konkretnymi zasadami czasu animacji i kontrastu

Autor: mrgoonie · mrgoonie/claudekit-skills

Testowano · Działa ★ 8.8/10

Aesthetic — Ustrukturyzowany framework BEAUTIFUL/RIGHT/SATISFYING/PEAK do projektowania UI z konkretnymi zasadami czasu animacji i kontrastu

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 guidelines
  • Add micro-interactions with proper easing and timing
  • Make this interface feel more polished and satisfying