web-component-design

Aperçu

Qu'est-ce que web-component-design ?

web-component-design est une compétence destinée aux développeurs frontend, axée sur la création de composants UI réutilisables et maintenables avec des frameworks modernes comme React, Vue et Svelte. Elle offre des conseils pratiques sur les modèles de composition de composants, le stylisme CSS-in-JS, les bonnes pratiques d'accessibilité et la mise en œuvre de systèmes de design. Cette compétence est idéale pour les équipes et les développeurs souhaitant créer des bibliothèques de composants évolutives, des API cohérentes et des architectures frontend robustes.

À qui s'adresse cette compétence ?

• Ingénieurs frontend développant ou refactorisant des bibliothèques de composants UI
• Développeurs implémentant des systèmes de design à travers plusieurs projets
• Équipes recherchant des API de composants cohérentes, accessibles et maintenables
• Toute personne travaillant avec React, Vue, Svelte ou des solutions CSS-in-JS

Problèmes résolus

• Simplifie la composition des composants pour plus de flexibilité et de réutilisation
• Aide à choisir et mettre en œuvre des approches CSS-in-JS ou de stylisme modulaire
• Fournit des modèles d'accessibilité pour les éléments UI courants
• Accompagne la migration des anciens vers les nouveaux modèles de composants

Comment l'utiliser

Étapes d'installation

1. Installez la compétence avec la commande :
   npx skills add https://github.com/wshobson/agents --skill web-component-design
2. Commencez par consulter le fichier SKILL.md pour une vue d'ensemble du workflow et du contexte d'utilisation.
3. Explorez les fichiers d'accompagnement :
   • references/accessibility-patterns.md pour les modèles ARIA et les dialogues modaux
   • references/component-patterns.md pour les composants composés et l'utilisation du contexte
   • references/css-styling-approaches.md pour comparer CSS Modules, Tailwind, styled-components, et plus

Adapter à votre projet

• Utilisez les exemples et références fournis comme source d'inspiration pour votre propre dépôt et vos outils.
• Intégrez les modèles recommandés pour la composition, le stylisme et l'accessibilité dans votre base de code.
• Personnalisez les approches selon le système de design et la stack frontend de votre équipe.

Concepts clés

Composition des composants

• Composants composés (ex. : Tabs, Select)
• Render props pour un rendu flexible
• Slots pour l'injection de contenu (Vue/Svelte)

Approches de stylisme

• CSS Modules pour des styles encapsulés
• Tailwind pour un stylisme utilitaire
• Solutions CSS-in-JS comme styled-components et Emotion

Accessibilité

• Modèles ARIA pour modaux, dialogues et éléments interactifs
• Gestion du focus et navigation au clavier

FAQ

Où puis-je trouver des exemples d'implémentation ?

Consultez le dossier references/ pour des exemples de code détaillés et les meilleures pratiques sur les modèles de composants, le stylisme et l'accessibilité.

web-component-design convient-il à tous les projets frontend ?

Cette compétence est particulièrement adaptée aux projets utilisant React, Vue ou Svelte, ainsi qu'aux équipes développant des bibliothèques UI réutilisables ou des systèmes de design. Elle peut ne pas être nécessaire pour des sites simples, statiques ou sans architecture basée sur les composants.

Comment puis-je prévisualiser l'arborescence complète des fichiers ?

Ouvrez l'onglet Files dans l'Agent Skills Finder pour explorer tous les fichiers disponibles, y compris les références imbriquées et les scripts d'aide.