Aesthetic

Cadre structuré BEAUTIFUL/RIGHT/SATISFYING/PEAK pour le design UI, avec des règles concrètes de timing et de contraste.

par mrgoonie · mrgoonie/claudekit-skills

Testé · Fonctionne ★ 8.8/10

Aesthetic — Cadre structuré BEAUTIFUL/RIGHT/SATISFYING/PEAK pour le design UI, avec des règles concrètes de timing et de contraste.

Ce que fait

Guide le travail UI/UX à travers un cadre en quatre étapes (esthétique, fonctionnalité, micro-interactions, storytelling) appuyé sur des fichiers de référence avec des chiffres concrets — ratios de contraste WCAG, timings d'animation de 150 à 300 ms, courbes ease-out/ease-in. Se déclenche lors de la construction d'interfaces, l'analyse d'inspirations de design ou l'ajout de micro-interactions ; les workflows de capture d'inspiration et de génération d'images dépendent de skills complémentaires (chrome-devtools, ai-multimodal) présents dans le même dépôt.

Rapport de test

Demandé deux fois des conseils sur une carte tarifaire : la référence a donné des généralités, le skill a cité des chiffres précis — lift ease-out de 200 ms, contraste WCAG 4,5:1, maximum 2-3 polices — puisés dans ses fichiers de référence.

Testé le: 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

Commandes et exemples de prompts

/aestheticCadre structuré BEAUTIFUL/RIGHT/SATISFYING/PEAK pour le design UI, avec des règles concrètes de timing et de contraste.

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

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

Rapport complet →