Dans les termes du Skill
Construit des composants d'UI réutilisables pour React, Vue et Svelte à l'aide de patterns de composition modernes, de solutions CSS-in-JS et de principes de conception d'API de composants. Couvre les compound components, les render props, les slots, et des patterns spécifiques à chaque framework comme le context React, les composables Vue et les runes Svelte. S'applique aux bibliothèques de composants, aux design systems et au refactoring de composants existants.
Met l'accent sur des composants accessibles par défaut, avec des props sémantiques, une responsabilité unique, le ref forwarding, et les patterns contrôlé versus non contrôlé. Inclut des implémentations concrètes pour les boutons, accordéons, selects et onglets avec class-variance-authority, Tailwind CSS et des approches de style scopées.
Ce qu'il produit
- Composants de design system implémentant des boutons, accordéons, selects, onglets et cartes avec class-variance-authority et Tailwind CSS.
Fonctionnement
- 01Choisir une approche CSS-in-JS
Choisissez entre Tailwind CSS pour le prototypage rapide, CSS Modules pour des styles scopés, styled-components pour un style React dynamique, Emotion pour une flexibilité adaptée au SSR, ou Vanilla Extract pour une performance sans runtime.
- 02Concevoir l'API du composant
Utilisez des noms de props sémantiques comme isLoading plutôt que loading, fournissez des valeurs par défaut sensées, prenez en charge la composition via children, et permettez la surcharge des styles via les props className ou style.
- 03Implémenter des patterns spécifiques au framework
Utilisez le context React pour les compound components, les composables Vue 3 avec provide et inject, ou les runes Svelte 5 avec $props et $derived pour l'état réactif.