SkillProof tested Claude skills

Aesthetic

Strukturert BEAUTIFUL/RIGHT/SATISFYING/PEAK-rammeverk for UI-design med konkrete timing- og kontrastregler

av mrgoonie · mrgoonie/claudekit-skills

Bestått ★ 8.8/10

Aesthetic — Strukturert BEAUTIFUL/RIGHT/SATISFYING/PEAK-rammeverk for UI-design med konkrete timing- og kontrastregler

Hva den gjør

Veileder UI/UX-designarbeid gjennom et fire-trinns rammeverk (estetikk, funksjonalitet, mikrointeraksjoner, storytelling) støttet av referansefiler med konkrete tall — WCAG-kontrastforhold, 150–300 ms animasjonstiming, ease-out/ease-in-kurver. Trigges ved bygging av grensesnitt, analyse av designinspirasjon, eller tillegg av mikrointeraksjoner; inspirasjonsfangst- og bildegenereringsflytene er avhengige av tilknyttede skills (chrome-devtools, ai-multimodal) som også finnes i samme repo.

Testrapport

Spurte om råd om prissideshierarki og hover-tilstander: baseline ga generiske punkter («mer luft», «god kontrast»), mens skillet siterte eksakte tall — 200 ms ease-out-løft, 4,5:1 WCAG-kontrast, maks 2–3 skrifttyper.

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

Installer

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

  • /aestheticStrukturert BEAUTIFUL/RIGHT/SATISFYING/PEAK-rammeverk for UI-design med konkrete timing- og kontrastregler

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen 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

Full rapport →