Aesthetic

Gestructureerd BEAUTIFUL/RIGHT/SATISFYING/PEAK-framework voor UI-ontwerp met concrete timing- en contrastregels

Door mrgoonie · mrgoonie/claudekit-skills

Getest · Werkt ★ 8.8/10

Aesthetic — Gestructureerd BEAUTIFUL/RIGHT/SATISFYING/PEAK-framework voor UI-ontwerp met concrete timing- en contrastregels

Wat het doet

Begeleidt UI/UX-ontwerpwerk via een viertraps-framework (esthetiek, functionaliteit, micro-interacties, storytelling), onderbouwd met referentiebestanden vol concrete cijfers — WCAG-contrastratio's, 150-300ms animatietiming, ease-out/ease-in-curves. Wordt getriggerd bij het bouwen van interfaces, het analyseren van ontwerpinspiratie, of het toevoegen van micro-interacties; de workflows voor inspiratie vastleggen en beeldgeneratie zijn afhankelijk van zusterskills (chrome-devtools, ai-multimodal) uit dezelfde repo.

Testrapport

Twee keer gevraagd om hiërarchie- en hoverstate-advies voor prijskaarten: de baseline gaf generieke bullets, de skill citeerde exacte cijfers — 200ms ease-out-lift, 4,5:1 WCAG-contrast, max 2-3 lettertypes — uit de referentiebestanden.

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

Installatie

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

Commando's en voorbeeldprompts

/aestheticGestructureerd BEAUTIFUL/RIGHT/SATISFYING/PEAK-framework voor UI-ontwerp met concrete timing- en contrastregels

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

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

Volledig rapport (Engels) →