Better UI
Référence de polish UI avec valeurs exactes — rayons concentriques, alignement optique, ombres, animations d'icônes, scale(0.96)
- Quoi
- Référence de polish UI avec valeurs exactes — rayons concentriques, alignement optique, ombres, animations d'icônes, scale(0.96)
- Coût
- Gratuit
- Prérequis
- un projet web avec CSS/Tailwind (voir le README du dépôt pour le contexte) ; optionnellement le skill orchestrateur better-interface pour appeler celui-ci
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le skill expert de domaine que l'orchestrateur `jakubkrehel-skills-better-interface` déjà publié (lot 32) appelle : une RÉFÉRENCE de polish UI avec des valeurs concrètes, pas des généralités — rayons concentriques (externe = interne + padding), alignement optique plutôt que géométrique, ombres pour l'élévation vs bordures pour la structure, transitions CSS interruptibles, entrées stagées ~100ms, animations d'icônes contextuelles (scale 0.25→1, opacity 0→1, blur 4px→0px), outlines d'images 1px à faible opacité, scale(0.96) au clic (jamais sous 0.95), pas d'animations au chargement initial, transitions supprimées au changement de thème, propriétés transition nommées, `will-change` parcimonieux, graisse d'icône assortie à la graisse du texte, un SVG recoloré par état. Distinct de `jakubkrehel-make-interfaces-feel-better` (lot 33, autre dépôt) : feel-better est une CHECKLIST du ressenti d'interaction (états hover/press/loading/empty, micro-interactions, feedback) ; better-ui ce sont les VALEURS visuelles concrètes (rayons, ombres, outlines, courbes d'easing) — du polish mesurable. Crédit : @jakubkrehel. Bémols honnêtes : la typographie appartient à better-typography et l'accessibilité à better-accessibility (référencés, non inclus) ; les valeurs sont exactes, pas des plages à approximer. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage.
Version :
Installation
Prérequis : un projet web avec CSS/Tailwind (voir le README du dépôt pour le contexte) ; optionnellement le skill orchestrateur better-interface pour appeler celui-ci Installe-moi « Better UI ». Donne à mon agent la référence de polish UI : valeurs exactes pour rayons concentriques (externe = interne + padding), alignement optique, ombres-pour-l'élévation vs bordures-pour-la-structure, transitions interruptibles, entrées stagées ~100ms, animations d'icônes contextuelles (scale 0.25→1, opacity 0→1, blur 4px→0px), outlines d'images 1px, scale(0.96) au clic, pas de transitions au changement de thème, will-change parcimonieux, graisse d'icône assortie à la graisse du texte — valeurs exactes, jamais approximées Dépôt : https://github.com/jakubkrehel/skills/blob/main/skills/better-ui/SKILL.md 1. Récupère le fichier SKILL.md du skill jakubkrehel-skills-better-ui depuis le dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Contrôle de sécurité : examine le SKILL.md pour tout contenu suspect (appels réseau inattendus, commandes shell, récolte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code ; les identifiants passent uniquement par le coffre sécurisé, les hôtes autorisés sont déclarés dans le SKILL.md. Vérifie que c'est bien le cas ; STOP sur le moindre signal d'alerte et préviens-moi. 3. Installe-le comme skill : copie SKILL.md dans le répertoire des skills de l'agent, dans un dossier nommé « jakubkrehel-skills-better-ui ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (ex. vérifier mon setup CSS, appliquer les valeurs à mes composants). GitHub est optionnel : si j'ai un compte GitHub ou le CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne l'exige jamais sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Ne me demande jamais de coller des secrets dans le chat — les identifiants passent par le coffre sécurisé ou les variables d'environnement. Au moindre doute, arrête et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.