Horace-Maxwell/ui-master

UI Master : créer des interfaces qui ne ressemblent pas à de l'IA

Convention de chemin : ce fichier se trouve dans le dossier ui/ du dépôt, catalog/ et prompts/ sont au même niveau et suivent le skill.

• Dans le dépôt complet (ou installé via setup.sh --link-skills en lien symbolique) : utilisez d'abord realpath pour trouver la racine du dépôt, puis python3 <racine>/scripts/find.py <mot-clé> pour chercher dans tous les modules.
• Installation autonome (npx skills add Horace-Maxwell/ai-master-prompt, avec uniquement le dossier ui/) : pas de script de recherche, utilisez directement grep catalog/*.md. Pour les autres modules (scaffolding, skills, outils), voir https://github.com/Horace-Maxwell/ai-master-prompt.

Les interfaces faites par IA sont moches, non pas par manque de capacité, mais parce que ① on n'utilise pas les bonnes bibliothèques existantes, et ② on ne sait pas nommer l'effet souhaité. Ce skill résout ces deux problèmes.

Processus de travail

1. Clarifier quatre points

• Plateforme et stack technique : Web (React/Next ? Vue ? HTML pur ?) ou React Native/Expo ? Projet existant ou nouveau ?
• Type de page : Landing page / Dashboard / Application SaaS / Produit de chat IA / App mobile / Portfolio…
• Style : L'utilisateur a-t-il spécifié un style ou un site de référence ?
• Intensité des animations : Sobriété / Modéré / Spectaculaire

Quand demander, quand agir directement : ne demandez que si la plateforme et le type de page ne sont pas clairs (au maximum une série de questions). Pour le reste, utilisez les valeurs par défaut et expliquez dans votre réponse ce que vous avez choisi :

Non précisé	Défaut
Stack technique	Pour un projet existant, suivez-le ; pour un nouveau projet Web : Next.js + Tailwind + shadcn/ui
Style	Proposez 2–3 directions (voir prompts/style-recipes.md) ; si l'utilisateur dit « décidé à votre place », choisissez le plus adapté au type de page
Intensité des animations	Pour une interface produit : sobriété ; landing page : modéré ; portfolio/page d'événement : spectaculaire possible

Si l'utilisateur n'arrive pas à décrire l'effet, utilisez les termes du prompts/effect-vocabulary.md pour confirmer (ex. : « Vous voulez dire un Text Scramble, où les lettres sautent puis se figent ? »).

2. Choisir la fondation selon le tableau de décision

Quand l'utilisateur spécifie un style, priorité à la ligne de style : pour une landing page au style « dessin à la main », utilisez une bibliothèque de dessin, ne superposez pas Aceternity avec ses composants sombres et tape-à-l'œil.

Situation	Fondation	Ajouts
Nouveau projet React/Next (défaut)	npx create-next-app@latest, puis npx shadcn@latest init	Ajoutez des composants depuis les registres d'espace de noms selon les besoins
Styles (dessin à la main / vintage / brut / verre / terminal)	Bibliothèque de style correspondante (voir style-recipes)	La plupart sont des registres shadcn, installez et remplacez directement les composants du même nom
Landing page / Hero / Marketing (style non spécifié)	shadcn + Magic UI / Aceternity / React Bits	Défilement fluide Lenis ; animations au défilement avec GSAP ScrollTrigger ou Motion
Dashboard / Admin	shadcn + Tremor ou shadcn charts	Kibo UI pour les composants avancés
Chat IA / Produit Agent	shadcn + AI Elements ou assistant-ui	affectUI pour les panneaux d'observabilité des agents ; données depuis Langfuse / Phoenix ; backend Python avec protocole AG-UI pour le front
React Native / Expo	npx create-expo-app@latest + React Native Reusables ou ExpoKit	Verre liquide : expo-glass-effect ; verre dépoli : expo-blur ; beUI pour les animations
Vue / Nuxt	Nuxt UI ou shadcn-vue	Inspira UI pour les effets ; goopUI (effets liquides, pré-alpha)
HTML pur / Sans framework	daisyUI ou Tailwind + CSS natif	Animate.css, Hover.css, GSAP

Liste complète des candidats :

• Bibliothèques de composants : catalog/02 Composants de base, catalog/03 Composants animés, catalog/04 Thèmes stylisés, catalog/05 Mobile, catalog/06 Effets/3D, catalog/07 UI IA
• Si introuvable, consultez les agrégateurs : catalog/01 (21st.dev, catalogue officiel shadcn, registry.directory)

3. Installer des composants : utilisation des espaces de noms shadcn

Les espaces de noms indexés officiellement (548) ne nécessitent aucune configuration :

npx shadcn@latest add @magicui/marquee
npx shadcn@latest add @aceternity/spotlight
npx shadcn@latest search @aceternity --query "card"     # Si vous ne connaissez pas le nom de l'entrée : cherchez d'abord
npx shadcn@latest list @magicui                    # Ou listez toutes les entrées de l'espace de noms
npx shadcn@latest view @magicui/border-beam        # Voir le code avant d'installer

Trois pièges à éviter :

1. Ne devinez pas le nom de l'entrée. Les <item> dans les catalogues sont des placeholders ; chaque bibliothèque a ses propres noms. Utilisez d'abord search ou list.
2. Les entrées React Bits ont un suffixe de variante : <NomComposant>-<TS|JS>-<TW|CSS>, ex. npx shadcn@latest add @react-bits/DecryptedText-TS-TW. Sans suffixe, erreur 404.
3. Bibliothèques non indexées officiellement (Looseleaf, Rare UI, etc.) : deux façons de les installer :

   • Donnez directement l'URL complète ou le chemin GitHub, sans configuration : npx shadcn@latest add https://kevintngo.github.io/looseleaf/r/button.json ou npx shadcn@latest add swamimalode07/rare-ui/fluid-orb

   • Ou enregistrez une fois dans components.json, puis utilisez @looseleaf/button :

     { "registries": { "@looseleaf": "https://kevintngo.github.io/looseleaf/r/{name}.json" } }
     

Référence rapide des espaces de noms courants (tous dans l'index officiel) : @magicui @aceternity @react-bits @animate-ui @motion-primitives @cult-ui @kokonutui @coss @shadcnblocks @tailark @kibo-ui @8bitcn @neobrutalism @retroui @glasscn @glassyui @ai-elements @assistant-ui @prompt-kit @affectui @beui @shaderscn @threecn @lucide-animated @svgl

4. Installer des outils pour l'agent (après accord de l'utilisateur)

Combinaison minimale (exemple avec Claude Code ; pour d'autres agents, mettez la même commande npx … dans leur configuration MCP, tableau de correspondance dans AGENTS.md à la racine) :

npx shadcn@latest mcp init --client claude                    # Parcourir/installer des composants de centaines de registres (support aussi --client cursor / vscode)
claude mcp add context7 -- npx -y @upstash/context7-mcp        # Documentation à jour de toute bibliothèque
npx skills add anthropics/skills --skill frontend-design       # Base esthétique, enlève l'effet IA

Ajoutez selon les besoins : Magic UI MCP, 21st MCP, Figma MCP (quand il y a une maquette), Motion AI Kit (npx motion-ai), skills GSAP, Mobbin / Refero / Lazyweb MCP pour trouver des captures d'écran de référence (compte requis). Liste complète dans catalog/12.

5. Définir d'abord le système de design, puis écrire la page

1. Définir les tokens de style : palette (générée avec Realtime Colors / tweakcn), polices (pas celle par défaut Inter : choisissez une paire avec de la personnalité sur Fontshare / Google Fonts), coins arrondis, ombres, espacement. Si l'utilisateur a donné une marque de référence, cherchez le DESIGN.md correspondant dans awesome-design-md et placez-le à la racine du projet.
2. Structure de la page : Inspirez-vous de l'ordre des blocs des pages similaires dans les sites d'inspiration (catalog/10).
3. Priorité à la réutilisation des composants : ne codez pas à la main ce qui peut être installé avec npx shadcn@latest add.
4. Animations avec un but : une pour l'entrée, une pour le retour au survol, une pour la narration au défilement. Respectez prefers-reduced-motion.

6. Autovérification (ne pas sauter)

• Ouvrez la page dans un navigateur (Playwright / Chrome DevTools MCP / navigateur intégré), prenez une capture d'écran et vérifiez selon la liste « Effet IA » ci-dessous
• Vérifiez la largeur mobile (375px)
• Console sans erreur ; animations fluides (ne touchez que transform/opacity)

Effet IA typique (à éviter) : dégradé violet-bleu + Inter + gros titre centré ; tous les cartons avec le même rayon et la même ombre ; emoji comme icône ; verre dépoli partout ; texte gris sans hiérarchie ; chaque bloc « apparaît en glissant vers le haut ».

Quand vous avez besoin de vocabulaire d'effets/de style

• Aide-mémoire : prompts/effect-vocabulary.md (avec les noms d'entrée directement installables)
• Recettes de style : prompts/style-recipes.md
• Template pour décrire le besoin (pour l'utilisateur ou pour une autre IA) : prompts/request-template.md
• Galeries avec démos : motion-prompt (192 effets, npx skills add showheyohtaki/motion-prompt), Motion Library (510 effets), aimotions (195 effets de texte), voir catalog/09