Que fait ui-design-system ?
Systèmes de composants React UI avec TailwindCSS + Radix + shadcn/ui. Stack : TailwindCSS (styling), Radix UI (primitives), shadcn/ui (composants), React/Next.js. Capacités : architecture de système de design, composants accessibles, mises en page responsives, thèmes, mode sombre, composition de composants. Actions : revue, conception, construction, amélioration, refactoring de composants UI. Mots-clés : TailwindCSS, Radix UI, shadcn/ui, système de design, bibliothèque de composants, accessibilité, ARIA, responsive, mode sombre, thèmes, variables CSS, architecture de composants, design atomique, jetons de design, variante, slot, composition. Utilisation lors de : construction de bibliothèques de composants, implémentation de shadcn/ui, création d'interfaces utilisateur accessibles, mise en place de systèmes de design, ajout de mode sombre/thèmes, revue d'architecture de composants UI.
Stack Technique
- TailwindCSS : Styling utilitaire pour une conception rapide et cohérente.
- Radix UI : Primitives d'interface utilisateur accessibles et sans style.
- shadcn/ui : Composants React élégants basés sur Radix UI et TailwindCSS.
- React/Next.js : Framework pour la création d'interfaces utilisateur.
Capacités
Architecture de Système de Design
- Définition des jetons de design (couleurs, typographie, espacements) avec variables CSS.
- Organisation des composants selon le design atomique.
- Gestion des variantes et des slots pour la composition flexible.
Composants Accessibles
- Utilisation des primitives Radix UI pour garantir l'accessibilité.
- Respect des normes ARIA pour les composants interactifs.
- Tests d'accessibilité intégrés.
Mises en Page Responsives
- Utilisation des classes utilitaires TailwindCSS pour le responsive.
- Adaptation des composants à différentes tailles d'écran.
- Prise en charge des points de rupture personnalisés.
Thèmes et Mode Sombre
- Thèmes multiples via variables CSS TailwindCSS.
- Mode sombre automatique ou manuel.
- Personnalisation des thèmes pour chaque composant.
Actions
- review : Analyser l'architecture des composants UI existants.
- design : Concevoir de nouveaux composants UI avec accessibilité et responsive.
- build : Implémenter des composants UI en utilisant TailwindCSS, Radix UI et shadcn/ui.
- improve : Améliorer la performance, l'accessibilité ou le style des composants.
- refactor : Restructurer les composants pour une meilleure maintenabilité.
Utilisation
Cette compétence est recommandée lorsque vous :
- Construisez une bibliothèque de composants interne.
- Implémentez shadcn/ui dans un projet React/Next.js.
- Créez des interfaces utilisateur accessibles et conformes aux normes.
- Mettez en place un système de design avec thèmes et mode sombre.
- Révisez l'architecture des composants UI pour une meilleure organisation.
Exemple de Commande
# Analyse d'un composant existant
skill samhvw8/ui-design-system review
# Conception d'un nouveau composant
skill samhvw8/ui-design-system design --component Button --variant solid
Mots-Clés Connexes
TailwindCSS, Radix UI, shadcn/ui, système de design, bibliothèque de composants, accessibilité, ARIA, responsive, mode sombre, thèmes, variables CSS, architecture de composants, design atomique, jetons de design, variante, slot, composition.