de han148
Conseils pour créer et organiser des « quarks » — des jetons de design et des valeurs primitives (couleurs, espacements, typographie, ombres) qui forment la base d'un système de design
Cette compétence documente comment définir et structurer les quarks — les plus petits jetons de design (couleurs, espacements, typographie, ombres, points de rupture, z-index) que les atomes et les composants consomment. Elle fournit des exemples, des fichiers de jetons TypeScript, la génération de variables CSS et des notes d'intégration pour Tailwind et CSS-in-JS.
Utilisez cette compétence lors de la construction ou de la refactorisation d'un système de design, de la migration de styles codés en dur vers des jetons, ou de l'introduction de thèmes dynamiques et de propriétés CSS personnalisées. Approprié pour les ingénieurs frontend, les équipes de systèmes de design et les mainteneurs de bibliothèques de composants.
{ }
Pure documentation skill providing guidance on creating design tokens (quarks) for atomic design systems. No scripts to execute. Well-structured with comprehensive code examples for color, spacing, typography, border, shadow, animation, and breakpoint tokens. Includes CSS custom property generation, theming patterns, and clear best practices vs anti-patterns.
No security concerns whatsoever — purely advisory content with TypeScript/CSS code examples. Well-written reference material for design system token organization.
