SkillProof tested Claude skills

Aesthetic

Strukturerat BEAUTIFUL/RIGHT/SATISFYING/PEAK-ramverk för UI-design med konkreta timing- och kontrastregler

av mrgoonie · mrgoonie/claudekit-skills

Testad · Fungerar ★ 8.8/10

Aesthetic — Strukturerat BEAUTIFUL/RIGHT/SATISFYING/PEAK-ramverk för UI-design med konkreta timing- och kontrastregler

Vad den gör

Guidar UI/UX-designarbete genom ett fyrastegsramverk (estetik, funktionalitet, mikrointeraktioner, storytelling) med stöd av referensfiler med konkreta siffror — WCAG-kontrastförhållanden, 150–300 ms animationstiming, ease-out-/ease-in-kurvor. Triggas vid byggande av gränssnitt, analys av designinspiration, eller tillägg av mikrointeraktioner; flödena för inspirationsinsamling och bildgenerering är beroende av systerskills (chrome-devtools, ai-multimodal) som också finns i samma repo.

Testrapport

Fick frågan om hierarki och hover-state för ett priskort två gånger: baseline gav generiska punkter ("mer luft", "bra kontrast"), skillen citerade exakta siffror — 200 ms ease-out-lyft, 4,5:1 WCAG-kontrast, tak på 2–3 typsnitt — från sina referensfiler.

Testad: 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

Kommandon och exempelprompter

  • /aestheticStrukturerat BEAUTIFUL/RIGHT/SATISFYING/PEAK-ramverk för UI-design med konkreta timing- och kontrastregler

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

  • 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

Läs hela rapporten →