modbender/skill-library-mcp

Compétence de Style de Conception

Objectif

Cette compétence aide Claude Code à créer des interfaces frontend esthétiques et distinctives en récupérant automatiquement des prompts de systèmes de conception à partir du répertoire prompts/. Au lieu de produire une UI générique, cette compétence permet à Claude de construire des interfaces avec des esthétiques de conception spécifiques comme le Néo-brutalisme, le Moderne Sombre, le Luxe, le Cyberpunk, et bien d'autres.

Quand l'utiliser

Cette compétence est automatiquement invoquée lorsque :

• L'utilisateur demande de construire une page web, une page d'accueil ou une application web
• L'utilisateur demande un composant UI avec un style de conception spécifique
• L'utilisateur mentionne le frontend, React, Vue ou le développement web
• L'utilisateur demande une esthétique spécifique (par exemple, "fais-le paraître moderne et sombre" ou "utilise un style brutaliste")

Styles de Conception Disponibles

Les systèmes de conception suivants sont disponibles dans le répertoire prompts/ :

• Academia - Savant, classique, raffiné
• ArtDeco - Glamour luxueux des années 1920
• Bauhaus - Minimalisme fonctionnaliste et géométrique
• BoldTypography - Conception axée sur la typographie
• Botanical - Inspiré par la nature, organique
• Claymorphism - Éléments 3D doux, semblables à de l'argile
• Cyberpunk - Futuriste, néon, haute technologie
• Enterprise - Professionnel, d'entreprise, évolutif
• FlatDesign - Propre, minimal, 2D
• Fluent2 - Système de conception Microsoft Fluent 2
• HumanistLiterary - Chaleureux, littéraire, conversationnel (esthétique Claude)
• Industrial - Brut, mécanique, utilitaire
• Kinetic - Dynamique, axé sur le mouvement
• Luxury - Haut de gamme, élégant, sophistiqué
• Material - Google Material Design
• Maximalism - Audacieux, expressif, abondant
• MinimalDrak - Thème sombre minimal (note : faute de frappe dans l'original)
• ModernDark - UI sombre contemporaine avec profondeur
• Monochrome - Noir et blanc, contraste élevé
• Neo-brutalism - Brutalisme audacieux, brut, coloré
• Neumorphism - UI douce, skeuomorphique
• Newsprint - Inspiré du journal
• Organic - Formes naturelles et fluides
• PlayfulGeometric - Formes géométriques amusantes
• Professional - Propre, axé sur les affaires
• Retro - Vintage, nostalgique
• Saas - Esthétique SaaS moderne
• Sketch - Dessiné à la main, artistique
• Swiss - Style typographique international
• TerminalCLI - Esthétique d'interface en ligne de commande
• Vaporwave - Esthétique des années 80/90, nostalgique
• Web3 - Décentralisé, inspiré de la crypto

Comment ça fonctionne

Étape 1 : Comprendre l'intention de l'utilisateur

Lorsque l'utilisateur demande un travail frontend, déterminez d'abord :

1. Stack technique - Quel framework utilisent-ils ? (React, Vue, Next.js, etc.)
2. Préférence de conception - Ont-ils mentionné un style ou une esthétique spécifique ?
3. Portée du composant - Composant unique, page entière ou application complète ?

Étape 2 : Sélectionner le style de conception

Si l'utilisateur spécifie un style :

• Faire correspondre sa demande aux styles disponibles (par exemple, "brutaliste" → Néo-brutalisme)
• Correspondance insensible à la casse (brutalisme, Brutalisme, BRUTALISME fonctionnent tous)

Si l'utilisateur ne spécifie pas :

• Pour les projets modernes et professionnels → ModernDark ou Professional
• Pour les projets créatifs et audacieux → Neo-brutalism ou BoldTypography
• Pour les projets minimaux et propres → FlatDesign ou Swiss
• Pour les projets d'entreprise → Enterprise

Demandez à l'utilisateur si vous n'êtes pas sûr du style qui correspond à ses besoins.

Étape 3 : Récupérer le système de conception

Utilisez l'outil Read pour charger le fichier de prompt approprié :

Read: prompts/<NomDuStyle>.md

Par exemple :

• prompts/Neo-brutalism.md
• prompts/ModernDark.md
• prompts/Cyberpunk.md

Étape 4 : Appliquer le système de conception

Une fois que vous avez chargé le prompt du système de conception :

1. Intériorisez la philosophie de conception - Comprenez les principes fondamentaux, les signatures visuelles et les facteurs de différenciation
2. Extrayez les tokens de conception - Couleurs, typographie, espacement, ombres, bordures
3. Suivez les modèles de composants - Utilisez les styles de boutons, les dispositions de cartes, etc. spécifiés
4. Appliquez le "Facteur d'audace" - Implémentez les éléments signatures qui rendent la conception authentique
5. Évitez les anti-patrons - N'utilisez pas de techniques qui brisent l'esthétique

Étape 5 : Construire avec contexte

Avant d'écrire le code :

• Identifiez la stack technique existante de l'utilisateur
• Comprenez leur architecture de composants
• Notez toutes les contraintes (frameworks CSS, bibliothèques de conception, etc.)

Lors de l'écriture du code :

• Faites correspondre leurs modèles et conventions existants
• Centralisez les tokens de conception dans des variables CSS ou un fichier de configuration
• Créez des composants réutilisables et composables
• Expliquez brièvement vos choix architecturaux

Normes de qualité :

• Préservez ou améliorez l'accessibilité
• Assurez une conception réactive sur tous les appareils
• Faites des choix de conception délibérés et créatifs (pas de code générique)
• Laissez la base de code plus propre que vous ne l'avez trouvée

Exemples

Exemple 1 : L'utilisateur spécifie un style

Utilisateur : "Crée une page d'accueil pour mon produit SaaS avec un design néo-brutaliste"

Actions de la compétence :

1. Détecter les mots-clés : "page d'accueil", "néo-brutaliste"
2. Mapper "néo-brutaliste" → prompts/Neo-brutalism.md
3. Lire le prompt du système de conception
4. Poser des questions de clarification : "Quelle stack technique utilises-tu ? React, Vue ou HTML/CSS pur ?"
5. Construire la page d'accueil en suivant les principes du Néo-brutalisme (bordures épaisses, ombres dures, couleurs vives, etc.)

Exemple 2 : L'utilisateur ne spécifie pas de style

Utilisateur : "Aide-moi à construire un site portfolio"

Actions de la compétence :

1. Détecter : "site portfolio" (contexte créatif)
2. Suggérer des options : "Souhaiterais-tu un style de conception spécifique ? Je peux le créer en Moderne Sombre (sophistiqué), Néo-brutalisme (audacieux et créatif) ou Suisse (minimal et propre)."
3. L'utilisateur répond avec sa préférence
4. Charger le prompt approprié et construire

Exemple 3 : Demande de composant

Utilisateur : "Ajoute un formulaire de contact à mon application Next.js. Fais-le paraître moderne et professionnel."

Actions de la compétence :

1. Mots-clés : "Next.js", "moderne et professionnel"
2. Sélectionner : ModernDark.md (moderne) ou Professional.md (professionnel)
3. Lire le système de conception
4. Construire le composant de formulaire en faisant correspondre leurs modèles Next.js
5. Utiliser les tokens de conception du prompt (couleurs, typographie, ombres, etc.)

Commandes de Référence Rapide

Lors de l'implémentation, vous pouvez référencer rapidement des sections spécifiques :

Couleurs :

Grep: pattern "Token|Value|Usage" path "prompts/<Style>.md"

Typographie :

Grep: pattern "Font|Weight|Size" path "prompts/<Style>.md"

Modèles de composants :

Grep: pattern "Button|Card|Input" path "prompts/<Style>.md"

Conseils pour de Meilleurs Résultats

1. Lisez le prompt complet - Ne l'écumez pas. Les sections sur la philosophie de conception et la différenciation sont essentielles.
2. Implémentez les éléments signatures - Chaque système de conception a une section "Facteur d'audace". Ces éléments sont ce qui le rend authentique.
3. Évitez les anti-patrons - Chaque prompt liste ce qu'il ne faut PAS faire. Suivez ces règles strictement.
4. Posez des questions - Si les besoins de l'utilisateur ne sont pas clairs, demandez avant de construire.
5. Faites correspondre le code existant - Ne luttez pas contre leur stack technique. Intégrez le système de conception dans leurs modèles existants.

Remarques

• Tous les prompts des systèmes de conception suivent la même structure : sections <role> et <design-system>
• Les prompts comprennent des palettes de couleurs détaillées, des échelles typographiques, des modèles de composants et des exemples d'implémentation
• Chaque style est prêt pour la production et a été soigneusement conçu pour être visuellement distinctif
• Les prompts sont conçus pour éviter les interfaces génériques ressemblant à de l'IA

Améliorations Futures

Améliorations potentielles de cette compétence :

• Prise en charge de la combinaison de styles (par exemple, "Cyberpunk + Minimal")
• Workflow de création de style personnalisé
• Extraction de tokens de conception en JSON/CSS
• Génération de bibliothèque de composants à partir de prompts