ui-ux-pro-max

Vue d’ensemble

Qu’est-ce que ui-ux-pro-max ?

ui-ux-pro-max est une compétence d’intelligence UI/UX qui vous aide à prendre de meilleures décisions de design pour vos interfaces web et mobiles. Au lieu de deviner les layouts, couleurs, typographies ou patterns d’interaction, la compétence s’appuie sur un dataset structuré comprenant :

• plus de 50 styles visuels
• 161 palettes de couleurs
• 57 associations de polices
• 161 types de produits avec des règles de raisonnement
• 99 guidelines UX
• 25 types de graphiques
• Une couverture de 10 stacks : React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui et HTML/CSS

La compétence est conçue comme une couche de prise de décision design : elle aide à choisir les patterns, justifier les choix de design et maintenir un niveau de qualité UX pendant que vous concevez et développez.

À qui s’adresse ui-ux-pro-max ?

ui-ux-pro-max est particulièrement adapté :

• Aux product designers et UI/UX designers qui veulent un cadre systématique pour les layouts, systèmes de couleurs, typographie et patterns d’interaction.
• Aux frontend engineers travaillant avec React, Next.js, Vue, Svelte, React Native ou Tailwind et qui ont besoin de suggestions sensibles au design lors de l’implémentation de l’UI.
• Aux fondateurs et développeurs solo qui n’ont pas d’équipe design dédiée mais souhaitent malgré tout une UI/UX moderne et cohérente.
• Aux mainteneurs de design systems qui veulent une couche de référence pour les styles, patterns de graphiques et guidelines UX alignés sur plusieurs stacks.

C’est particulièrement utile lorsque vous :

• Concevez ou relisez des landing pages, dashboards, admin panels, applications SaaS, sites e-commerce et apps mobiles.
• Hésitez entre plusieurs styles (glassmorphism, minimalisme, brutalism, neumorphism, bento grid, dark mode, etc.).
• Alignez des composants comme buttons, modals, navbars, sidebars, cards, tables, forms et charts avec les bonnes pratiques.

Quels problèmes ui-ux-pro-max résout-il ?

ui-ux-pro-max est conçu pour réduire l’ambiguïté dans le design et les UX incohérentes en fournissant :

• Des choix de design argumentés : utilise le type de produit et le contexte pour recommander couleurs, typographie et patterns de layout.
• Un contrôle qualité UX : 99 guidelines UX pour repérer les problèmes d’interaction et d’utilisabilité avant la mise en production.
• Des recommandations multi-stacks : relie les décisions de design à des considérations d’implémentation concrètes sur React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui et HTML/CSS.
• Une idéation plus rapide : combine rapidement directions stylistiques, palettes et associations de polices déjà sélectionnées et compatibles.

ui-ux-pro-max est donc utile chaque fois que vous avez besoin de clarté sur comment concevoir quelque chose et pourquoi une direction précise est plus adaptée à votre type de produit et à votre plateforme.

Quand ui-ux-pro-max est-il un bon ou un mauvais choix ?

Bon choix lorsque :

• Vous décidez des layouts de page, de la structure de navigation ou des parcours d’interaction.
• Vous choisissez les palettes de couleurs, la typographie et les systèmes de spacing pour un produit nouveau ou existant.
• Vous implémentez une UI en React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind ou shadcn/ui et souhaitez des conseils sensibles au design.
• Vous avez besoin d’une méthode structurée pour revoir la qualité UI/UX de dashboards, landing pages ou écrans mobiles.

Moins adapté lorsque :

• Vous avez seulement besoin d’aide générique en frontend (gestion d’état complexe, intégration backend ou devops) sans décisions de design.
• Vous disposez déjà d’un design system rigide, entièrement défini, et ne cherchez que des refactors au niveau du code.
• Vous travaillez sur des interfaces purement textuelles avec très peu d’éléments visuels ou interactifs.

Si votre besoin principal concerne la direction visuelle, les patterns d’interaction ou le contrôle qualité UX, ui-ux-pro-max est probablement un très bon complément.

Utilisation

1. Étapes d’installation

Pour installer ui-ux-pro-max comme compétence dans un environnement d’agent compatible, utilisez :

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max
``

Après l’installation, repérez les fichiers de la compétence dans le répertoire `.claude/skills/ui-ux-pro-max` de la structure du dépôt upstream. Les artefacts clés sont :

- `SKILL.md` – définition principale de la compétence et intentions d’usage
- `data/` – les datasets d’intelligence design (styles, palettes, guidelines UX, types de graphiques, etc.)
- `scripts/` – la logique utilitaire pour rechercher ou interpréter les données de design

Votre environnement peut monter ou refléter ces chemins différemment, mais ce sont les éléments centraux dont la compétence dépend.

### 2. Fichiers à consulter en premier
Après l’installation, commencez par ces fichiers pour comprendre le comportement de ui-ux-pro-max :

#### `SKILL.md`

- Décrit l’objectif global : intelligence UI/UX pour le web et le mobile.
- Explique le périmètre : plus de 50 styles, 161 palettes de couleurs, 57 associations de polices, 161 types de produits, 99 guidelines UX, 25 types de graphiques.
- Précise les scénarios **When to Apply** et **Must Use** pour que la compétence ne soit invoquée que lorsque des décisions de design sont nécessaires.

Ce fichier est votre référence principale pour comprendre ce que la compétence va privilégier et comment elle doit être déclenchée.

#### `data/`

- Contient les datasets structurés qui alimentent ui-ux-pro-max.
- Inclut des références aux types de produits, systèmes de couleurs, options de typographie, guidelines UX et types de graphiques.
- Permet à l’agent de rechercher et sélectionner des recommandations en fonction du contexte (par ex. dashboard SaaS vs tunnel de checkout e-commerce).

Vous ne modifiez généralement pas ces fichiers à l’installation ; vous les utilisez comme base de connaissances.

#### `scripts/`

- Fournit des scripts utilitaires qui lisent et interprètent les données.
- Permet des recommandations basées sur des priorités et des recherches structurées (par ex. choisir palette → association de polices → pattern de layout).

Si vous étendez ou intégrez la compétence dans des workflows personnalisés, c’est ici que vous chercherez des hooks ou de la logique à réutiliser.

### 3. Workflows typiques

#### Concevoir une nouvelle page ou un nouvel écran
Utilisez ui-ux-pro-max lors de la planification de :

- **Landing pages** et sites marketing
- **Dashboards et admin panels**
- **Apps SaaS et parcours e-commerce**
- **Écrans d’apps mobiles**

Un workflow courant :

1. Décrivez le type de produit, la cible et la plateforme (par ex. « dashboard B2B SaaS analytics en React avec Tailwind »).
2. Demandez à l’agent (avec ui-ux-pro-max disponible) de proposer :
   - La structure de layout globale et la navigation
   - Le style recommandé (par ex. minimalism, bento grid, dark mode)
   - Une palette de couleurs et une association de polices adaptées au type de produit
   - Les principaux patterns d’interaction et guidelines UX à suivre
3. Demandez à la compétence de suggérer des patterns au niveau des composants pour les buttons, modals, forms, tables et charts.
4. Si vous utilisez React, Next.js, Vue, Svelte, React Native, Tailwind ou shadcn/ui, demandez des conseils orientés implémentation qui respectent la direction de design choisie.

#### Améliorer ou auditer une UI existante
Lorsque vous avez déjà une UI et souhaitez l’améliorer :

1. Décrivez le design actuel, les points de douleur et la stack utilisée.
2. Utilisez ui-ux-pro-max pour :
   - Cartographier les problèmes par rapport aux 99 guidelines UX.
   - Recommander des ajustements de spacing, hiérarchie, usage des couleurs et typographie pour plus de clarté.
   - Proposer des types de graphiques plus adaptés (parmi les 25 patterns de graphiques) à vos données.
3. Demandez un ensemble de recommandations avant/après, avec les justifications liées au type de produit et aux bonnes pratiques.

#### S’aligner avec des design systems et bibliothèques de composants
Si vous travaillez avec des design systems (par ex. configuration Tailwind ou shadcn/ui) :

- Utilisez ui-ux-pro-max pour décider **quels patterns** et **quelles combinaisons de tokens** (couleurs, tailles de police, spacing) privilégier pour un type de produit donné.
- Avec l’intégration shadcn/ui MCP disponible dans l’environnement, vous pouvez :
  - Demander à ui-ux-pro-max d’identifier les bons patterns de composants.
  - Utiliser MCP pour retrouver des exemples concrets et du code pour ces patterns.

Cela permet de garder les décisions de design et le choix des composants synchronisés sans devoir parcourir manuellement toute la documentation.

### 4. Quand invoquer explicitement la compétence
En suivant les recommandations upstream de `SKILL.md`, ui-ux-pro-max donne le meilleur résultat lorsque la tâche implique :

- **La structure UI** – layout de page, hiérarchie du contenu, patterns de navigation.
- **Des décisions de design visuel** – styles, couleurs, typographie, spacing, ombres, dégradés.
- **Des patterns d’interaction** – états hover/focus, états de chargement, gestion des erreurs, micro-interactions.
- **Le contrôle qualité UX** – identification des points de friction et application des guidelines UX.

Pour des tâches purement orientées code, sans impact design, vous pouvez omettre cette compétence afin de garder les réponses centrées sur l’ingénierie.


## FAQ

### Que contient exactement ui-ux-pro-max ?
ui-ux-pro-max est livré avec une base de connaissances design soigneusement sélectionnée : plus de 50 styles, 161 palettes de couleurs, 57 associations de polices, 161 types de produits avec règles de raisonnement, 99 guidelines UX et 25 types de graphiques couvrant 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS). Ces éléments sont stockés sous forme de données et de scripts que l’agent peut interroger pour fournir des recommandations conscientes de l’UX.

### En quoi ui-ux-pro-max est-il différent d’un assistant de code classique ?
Un assistant de code classique se concentre sur la syntaxe, les APIs et les détails d’implémentation. ui-ux-pro-max, lui, se concentre sur les **décisions de design et la qualité UX** : quel layout choisir, quelle palette convient à votre produit, comment structurer les forms, quel type de chart utiliser et comment éviter les anti-patterns UX. Il peut ensuite aligner ces décisions avec votre stack frontend.

### Quelles stacks techniques ui-ux-pro-max prend-il en charge ?
La compétence est conçue pour couvrir des recommandations de design pour :

- Frameworks web : **React, Next.js, Vue, Svelte**
- Frameworks mobiles et apps : **SwiftUI, React Native, Flutter**
- Styling et composants : **Tailwind, shadcn/ui et HTML/CSS**

Vous pouvez l’utiliser de façon conceptuelle avec d’autres stacks, mais ce sont les écosystèmes qu’il cible explicitement.

### Puis-je utiliser ui-ux-pro-max avec Tailwind ou shadcn/ui ?
Oui. ui-ux-pro-max est explicitement au fait de Tailwind et shadcn/ui. Il peut vous aider à choisir des patterns de design, systèmes de couleurs, spacing et typographie qui se traduisent bien en classes utilitaires Tailwind ou en composants shadcn/ui. Avec shadcn/ui MCP disponible, il peut également s’appuyer sur la recherche de composants et des exemples.

### ui-ux-pro-max génère-t-il du code UI complet ?
La compétence est focalisée **d’abord sur l’intelligence de design**, avec des indications d’implémentation en second niveau. Elle peut vous aider à :

- Définir la structure et le comportement des composants UI.
- Suggérer comment les implémenter en React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind ou HTML/CSS.

Cependant, sa valeur principale réside dans le **choix et la justification des décisions de design**, pas uniquement dans la génération de fragments de code.

### Quand ne dois-je pas utiliser ui-ux-pro-max ?
Évitez cette compétence lorsque votre tâche est :

- Purement backend ou liée à l’infrastructure.
- Un refactor bas niveau sans impact sur l’UI ou l’UX.
- Un problème d’algorithme ou d’optimisation de performance très ciblé.

Dans ces cas, activer ui-ux-pro-max apporte peu de valeur car il n’y a pas de décisions de design à prendre.

### Comment commencer à utiliser ui-ux-pro-max efficacement ?
Après avoir installé la compétence :

1. Lisez `SKILL.md` pour comprendre son périmètre et les modes d’usage recommandés.
2. Lors de la création ou mise à jour d’une UI, décrivez clairement le type de produit, les utilisateurs cibles, la plateforme et la stack technique à l’agent.
3. Demandez des sorties structurées : propositions de layouts, direction stylistique, recommandations de couleurs et de polices, items de checklist UX et choix de charts.
4. Itérez : affinez le brief et laissez ui-ux-pro-max réévaluer la qualité UX au fur et à mesure que vous vous rapprochez de l’implémentation.

### Où puis-je consulter les données et scripts sous-jacents ?
Ouvrez l’onglet Files de la compétence et inspectez :

- `SKILL.md` pour la définition globale et les règles d’application.
- `data/` pour les datasets de design structurés.
- `scripts/` pour la logique utilitaire qui alimente les recommandations.

Ces ressources expliquent comment ui-ux-pro-max raisonne sur l’UI/UX, afin que vous puissiez comprendre, faire confiance et adapter ses suggestions à votre projet.