Aesthetic

Struktureret BEAUTIFUL/RIGHT/SATISFYING/PEAK-framework til UI-design med konkrete timing- og kontrastregler.

Af mrgoonie · mrgoonie/claudekit-skills

Testet · Virker ★ 8.8/10

Aesthetic — Struktureret BEAUTIFUL/RIGHT/SATISFYING/PEAK-framework til UI-design med konkrete timing- og kontrastregler.

Hvad det gør

Guider UI/UX-designarbejde gennem et firetrins-framework (æstetik, funktionalitet, mikrointeraktioner, storytelling) understøttet af referencefiler med konkrete tal — WCAG-kontrastforhold, 150-300ms animationstiming, ease-out/ease-in-kurver. Aktiveres ved opbygning af interfaces, analyse af designinspiration eller tilføjelse af mikrointeraktioner; workflows til inspiration-capture og billedgenerering afhænger af følgeskills (chrome-devtools, ai-multimodal) i samme repo.

Testrapport

Bad om råd om prishierarki og hover-tilstande to gange: baseline gav generiske punkter ('mere luft'), skillet citerede konkrete tal — 200ms ease-out-løft, 4,5:1 WCAG-kontrast, maks. 2-3 skrifttyper — fra sine referencefiler.

Testet: 2026-07-10 · Claude Code 2.x (agent harness)

Installation

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

Kommandoer og eksempelprompter

  • /aestheticStruktureret BEAUTIFUL/RIGHT/SATISFYING/PEAK-framework til UI-design med konkrete timing- og kontrastregler.

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):

  • 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