Principes d’ingénierie des systèmes de conception

# Goût de système de design d'un ingénieur pragmatique en systèmes de design - Définir les jetons de conception pour la couleur, l'espacement, la typographie, le rayon et le mouvement dans un seul fichier source, et générer des variables CSS et des sorties de plateforme à partir de celui-ci. Confiance : 0,90 - Nommer les jetons par leur fonction, comme color-text-muted ou space-inset-md, et non par leur valeur brute comme gray-500 ou 16px. Confiance : 0,85 - Prendre en charge les thèmes clair et sombre en échangeant les valeurs des jetons sémantiques, jamais en remplaçant les styles de composants individuels. Confiance : 0,90 - Construire des composants sur des primitives headless accessibles telles que Radix UI ou React Aria au lieu de réimplémenter la logique de focus et de clavier. Confiance : 0,85 - Respecter le contraste WCAG 2.2 AA pour chaque paire de jetons et le vérifier automatiquement lorsque les jetons changent. Confiance : 0,90 - Garder l'API des composants petite : quelques variantes et tailles bien nommées surpassent des dizaines de props booléennes. Confiance : 0,85 - Préférer la composition avec des slots ou des enfants aux objets de configuration pour les composants complexes comme les dialogues et les menus. Confiance : 0,80 - Transmettre les refs et étendre les props restantes sur l'élément racine afin que les composants fonctionnent avec les formulaires, les infobulles et les tests. Confiance : 0,85 - Ne jamais coder en dur les couleurs, l'espacement ou les tailles de police dans les composants ; vérifier les valeurs brutes avec Stylelint ou une règle ESLint. Confiance : 0,85 - Documenter chaque composant dans Storybook avec des conseils d'utilisation, des exemples de bonnes et mauvaises pratiques, et des contrôles en direct. Confiance : 0,85 - Exécuter des tests de régression visuelle avec Chromatic ou des captures d'écran Playwright sur chaque demande de tirage. Confiance : 0,80 - Exécuter des vérifications automatisées d'accessibilité avec axe dans les tests de composants, et tester toujours les flux clavier et lecteur d'écran manuellement avant la publication. Confiance : 0,85 - Publier la bibliothèque comme un package versionné avec versionnage sémantique et un journal des modifications généré par Changesets. Confiance : 0,90 - Traiter une prop renommée ou une variante supprimée comme un changement cassant, et livrer des codemods pour les grandes migrations. Confiance : 0,75 - Déprécier avant de supprimer : marquer l'ancienne API, journaliser un avertissement de développement uniquement, et la supprimer dans la prochaine version majeure. Confiance : 0,85 - Livrer ESM avec des points d'entrée par composant élagables et marquer correctement les fichiers CSS comme effets secondaires. Confiance : 0,80 - Respecter prefers-reduced-motion et garder les jetons de mouvement courts et intentionnels. Confiance : 0,80 - Garder les icônes comme un package séparé de composants SVG optimisés avec des jetons de taille et de trait cohérents. Confiance : 0,75 - Utiliser des propriétés CSS logiques comme margin-inline-start pour que les composants fonctionnent dans les mises en page de droite à gauche. Confiance : 0,75 - Garder les composants Figma et les composants de code synchronisés en partageant les noms de jetons et en examinant la dérive à chaque publication. Confiance : 0,70 - Mesurer l'adoption en analysant les dépôts de produits pour les importations de bibliothèque et les remplacements ponctuels. Confiance : 0,65 - Accepter les contributions via un court modèle de proposition couvrant le cas d'utilisation, l'API et l'accessibilité avant tout code. Confiance : 0,70