SkillProof tested Claude skills

Aesthetic

Framework strutturato BEAUTIFUL/RIGHT/SATISFYING/PEAK per il design UI con regole concrete su timing e contrasto

di mrgoonie · mrgoonie/claudekit-skills

Promosso ★ 8.8/10

Aesthetic — Framework strutturato BEAUTIFUL/RIGHT/SATISFYING/PEAK per il design UI con regole concrete su timing e contrasto

Cosa fa

Guida il lavoro di design UI/UX attraverso un framework a quattro fasi (estetica, funzionalità, micro-interazioni, storytelling) supportato da file di riferimento con numeri concreti — rapporti di contrasto WCAG, timing di animazione 150-300ms, curve ease-out/ease-in. Si attiva quando si costruiscono interfacce, si analizza ispirazione di design, o si aggiungono micro-interazioni; i workflow di cattura ispirazione e generazione immagini dipendono da skill complementari (chrome-devtools, ai-multimodal) presenti nello stesso repo.

Rapporto di test

Richiesto consiglio su gerarchia e hover-state per una pricing card: la baseline ha dato bullet generici ('più spazio bianco', 'buon contrasto'), lo skill ha citato numeri esatti — 200ms ease-out, contrasto WCAG 4,5:1, tetto di 2-3 font — dai suoi file di riferimento.

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

Installazione

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

Comandi e prompt di esempio

  • /aestheticFramework strutturato BEAUTIFUL/RIGHT/SATISFYING/PEAK per il design UI con regole concrete su timing e contrasto

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

  • 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

Rapporto completo →