Design Systems

Utilisez le skill design-system pour générer ou auditer un système UI, extraire des tokens depuis du code existant et vérifier la cohérence du style dans de vrais dépôts.

Utilisez la skill shadcn pour analyser le contexte du projet, exécuter les bonnes commandes CLI, installer des composants et composer une UI à partir de patterns documentés pour base vs radix, les formulaires, le theming et les registries.

design-consultation est un skill de design-consultation qui transforme une idée produit encore approximative en direction design complète. Il crée une source de vérité DESIGN.md, des aperçus et des recommandations à l’échelle du système pour la typographie, les couleurs, l’espacement, la mise en page et les animations. Idéal pour les nouveaux produits et les interfaces qui ont besoin d’un point de départ cohérent.

ui-ux-pro-max est une skill complète pour le design UI/UX assisté par IA. Elle offre un accompagnement structuré sur les layouts, styles, systèmes de couleurs, typographie et règles UX pour projets web et mobile. Parfaite pour les développeurs et équipes cherchant des décisions design concrètes sur React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter et HTML/CSS. Utilisez-la pour planifier, revoir et améliorer vos interfaces avec une intelligence design sélectionnée.

ckm:design-system aide à créer des tokens en trois couches, des specs de composants, des variables CSS, des mappings Tailwind et des slides cohérents avec la marque à partir d’une architecture de tokens claire.

ckm:design est une skill de design structurée pour orienter et produire logos, maquettes CIP, bannières, slides et icônes SVG. Elle inclut des références concrètes, des options basées sur CSV et des scripts Python pour des workflows reproductibles, au-delà de simples prompts génériques.

ckm:brand est une skill de workflow de marque pour créer, mettre à jour et relire des chartes de marque, le messaging, le ton, l’identité visuelle et la synchronisation des design tokens, avec des scripts et check-lists concrets.

design-system-patterns aide les équipes à concevoir des bases d’interface évolutives grâce à une structure de tokens, une architecture de thèmes et des patterns d’API de composants réutilisables pour les design systems et les bibliothèques de composants.

visual-design-foundations aide les équipes à construire des systèmes d’interface concrets avec des échelles typographiques, des tokens de couleur, des règles d’espacement et des recommandations d’iconographie. Utilisez-la pour poser une base de design solide, créer des guides de style, auditer la hiérarchie visuelle et produire des variables CSS prêtes à l’implémentation à partir de contraintes de design clairement définies.

La skill web-component-design aide les équipes à concevoir des composants UI réutilisables pour React, Vue et Svelte, avec des modèles d’API solides, des repères d’accessibilité et des références sur les compromis de style pour les design systems.

Utilisez la skill tailwind-design-system pour créer des design systems Tailwind CSS v4 avec tokens, theming, variants, accessibilité et conseils de migration de v3 vers v4.

polish est une skill de revue UI en passe finale, conçue pour repérer les problèmes d’alignement, d’espacement, de cohérence, d’usage des tokens et de micro-détails avant la mise en production. Elle convient surtout aux écrans, parcours ou composants qui fonctionnent déjà, mais manquent encore de finition. Utilisez-la pour améliorer l’état de préparation au lancement, l’alignement avec le design system et la qualité globale, sans repartir dans une refonte inutile.

figma-create-design-system-rules vous aide à générer des règles de Design System propres à un projet pour les workflows Figma vers code. Utilisez-le pour formaliser les conventions relatives aux composants, au nommage, aux tokens, aux emplacements de fichiers et à ce qu’il ne faut pas codifier en dur, afin que les agents de codage IA restent cohérents dans tout votre dépôt. Nécessite une connexion à un serveur Figma MCP.

site-architecture aide à planifier ou restructurer la hiérarchie des pages d’un site, la navigation, les modèles d’URL et le maillage interne. Utilisez-la pour créer des sitemaps, des spécifications de navigation, des plans d’URL et des schémas de site en Mermaid ou ASCII pour la planification marketing et UI/UX.

La skill normalize audite une fonctionnalité UI et la réaligne sur votre design system. Découvrez les options d’installation de normalize, la préparation frontend-design requise et des conseils d’usage concrets pour les pages, routes et composants.

La compétence extract aide les équipes à repérer les patterns UI récurrents, les tokens et les composants, puis à planifier ou réaliser leur consolidation dans un design system existant avec une trajectoire de migration plus sûre.

La compétence normalize audite une fonctionnalité UI et la réaligne sur votre design system. Découvrez dans quel contexte installer normalize, la préparation /frontend-design requise et son usage concret pour les pages, routes et composants.

La skill extract aide les équipes à repérer les motifs UI, les tokens et les composants récurrents, puis à les regrouper dans un design system existant avec un plan de migration plus sûr.

La skill design-md analyse les projets Stitch et transforme leurs écrans en une source de vérité sémantique DESIGN.md pour garantir la cohérence de la mise en page, du ton, des couleurs et du langage des composants. Utilisez design-md pour les Design Systems quand vous avez besoin d’indications exploitables pour de futures générations Stitch, et pas seulement d’un aperçu visuel.

Utilisez le skill wpds pour créer ou relire une UI WordPress avec le WordPress Design System (WPDS). Il vous aide à vérifier les composants, les tokens, les patterns et l’adéquation du package à l’aide du serveur WPDS MCP, afin que votre guide wpds s’appuie sur la documentation canonique plutôt que sur des suppositions. Idéal pour les travaux wpds liés aux Design Systems dans Gutenberg, WooCommerce, WordPress.com, Jetpack et les interfaces associées.

figma-use est le skill à installer avant chaque appel à use_figma afin que le JavaScript s’exécute en toute sécurité dans le contexte d’un fichier Figma. Il prend en charge les tâches d’implémentation de design, comme la création et la modification de nœuds, le raccordement des variables et des styles, la construction de composants et de variantes, ainsi que l’inspection programmatique de la structure du fichier. Le repo comprend des conseils d’utilisation, des pièges à éviter et des patterns pour réduire les erreurs courantes d’automatisation dans Figma.

mui est un guide ciblé pour Material UI v7 dans React. Il couvre le styling avec `sx`, la personnalisation de thème, les layouts responsive et les principaux changements de migration de v7. Utilisez-le pour installer la skill, repérer les fichiers essentiels et générer des composants MUI selon les patterns actuels de `@mui/material`.

makepad-2.0-theme est un skill de thème pour Makepad 2.0, destiné à appliquer les variables `theme.*`, à basculer entre thèmes clair et sombre, et à garder une cohérence dans le style basé sur les design tokens. Ce guide vous aide à comprendre l’installation de makepad-2.0-theme et son utilisation pour des interfaces de production et des systèmes de design.

figma-generate-library vous aide à créer ou mettre à jour un design system Figma à partir d’une base de code, avec un workflow structuré pour les tokens, les bibliothèques de composants, la documentation et le thème clair/sombre. Utilisez le skill figma-generate-library lorsque vous cherchez un guide عملي pour les Design Systems, et non un simple mockup ponctuel. Il complète figma-use pour les appels à l’API du Plugin.