design-system-patterns

Vue d'ensemble

Qu'est-ce que design-system-patterns ?

design-system-patterns est une compétence pratique pour construire des systèmes de design évolutifs et cohérents. Elle fournit des conseils et des modèles pour créer des design tokens, une infrastructure de theming et une architecture de composants, principalement pour les projets de design UI et basés sur React.

À qui s'adresse cette compétence ?

• Designers UI et ingénieurs frontend souhaitant établir un système de design maintenable
• Équipes développant des bibliothèques de composants ou des thèmes multi-marques
• Développeurs mettant en œuvre le changement de thème ou des hiérarchies de tokens sémantiques

Problèmes résolus

• Centralise les décisions de design avec des tokens pour la couleur, la typographie, l'espacement, et plus
• Permet un changement de thème robuste (clair/sombre, thèmes de marque)
• Supporte des API de composants évolutives et des modèles de composants composés
• Facilite les workflows design-vers-code, y compris l'intégration des tokens Figma

Comment utiliser

Étapes d'installation

1. Installez design-system-patterns via Agent Skills Finder :

   npx skills add https://github.com/wshobson/agents --skill design-system-patterns
   

2. Consultez les fichiers principaux :
   • SKILL.md pour un aperçu et l'utilisation de la compétence
   • references/design-tokens.md pour la structure des tokens et les conventions de nommage
   • references/theming-architecture.md pour les propriétés CSS personnalisées et le changement de thème
   • references/component-architecture.md pour les modèles de composants React

Design Tokens : Premiers pas

• Organisez les tokens en catégories primitives, sémantiques et composants
• Utilisez JSON ou des propriétés CSS personnalisées pour la génération de tokens multiplateforme
• Exemple de structure de token couleur :

  {
    "color": {
      "primitive": { "gray": { "100": { "value": "#f5f5f5" } } } }
  }
  

Infrastructure de theming

• Mettez en œuvre le changement de thème avec des propriétés CSS personnalisées et des sélecteurs [data-theme]
• Utilisez des context providers React pour la gestion dynamique des thèmes
• Supportez les préférences système (ex. prefers-color-scheme)

Modèles d'architecture de composants

• Construisez des composants composés en utilisant le contexte React pour un état partagé
• Appliquez des modèles polymorphes (prop as) pour un rendu flexible
• Définissez des variantes et tailles pour des API évolutives

Conseils d'adaptation

• Utilisez les références fournies comme modèles, pas comme copies directes
• Intégrez les modèles dans votre propre dépôt, en les adaptant à votre stack technique et à votre branding

FAQ

Où puis-je trouver des exemples détaillés ?

Consultez le dossier references/ pour des approfondissements sur les design tokens, le theming et l'architecture des composants.

design-system-patterns est-il réservé à React ?

Bien que de nombreux modèles utilisent le contexte React, les conseils sur les tokens et le theming sont agnostiques à la plateforme et peuvent être adaptés à d'autres frameworks.

Comment puis-je prévisualiser la structure de la compétence ?

Ouvrez l'onglet Fichiers pour inspecter tous les fichiers, y compris les références imbriquées et les scripts d'aide.

Quand design-system-patterns n'est-il pas adapté ?

Si votre projet ne nécessite pas de theming évolutif, de bibliothèques de composants ou de gestion de design tokens, des solutions UI plus simples peuvent suffire.

Puis-je utiliser cette compétence pour des applications mobiles ?

Oui, les design tokens et les modèles de theming peuvent être adaptés aux plateformes iOS et Android.