Build Your Own Component Library
Génère une bibliothèque d'interface utilisateur React ou Vanilla-JS de 24 composants, pilotée par des tokens, plus une page de comparaison côte à côte en direct.
Testé · Fonctionne
Ce que fait
Décrit la construction d'une bibliothèque complète de composants d'interface utilisateur à partir d'une base de composition Box/Text et d'un thème de tokens de conception, en niveaux ordonnés par dépendance (Spacing/Box/Text/Icon jusqu'à Accordion/Modal/Select), pour React ou Vanilla JS, avec 1 à 3 variations thématiques différentes rendues sur une page comparison.html. Se déclenche lorsque l'utilisateur souhaite une bibliothèque de composants, un système de conception ou un kit d'interface utilisateur construit à partir de zéro.
Rapport de test
Construit un sous-ensemble représentatif Vanilla-JS (Box, Text, Icon, Button, Card, Overlay, Modal) en direct dans un navigateur : variantes thématiques, états de chargement/désactivé, et un Modal fonctionnel d'ouverture/fermeture tous rendus correctement à partir d'un fichier de token theme.js - clairement plus systématique qu'une base de référence ad-hoc. Détecté un vrai bug dans la documentation de référence de la compétence : component-specs.md documente des props Box (display, flexDirection, alignItems, justifyContent, gap) que le boilerplate littéral Box() dans vanilla-templates.md n'applique jamais à el.style, donc suivre ce modèle à la lettre casse silencieusement les mises en page flex jusqu'à ce que vous le remarquiez et le corrigiez.
Testé le: 2026-07-16 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/ethankongee/build-your-own-component mkdir -p ~/.claude/skills cp -r build-your-own-component ~/.claude/skills/build-your-own-component
Commandes et exemples de prompts
/build-your-own-componentGénère une bibliothèque d'interface utilisateur React ou Vanilla-JS de 24 composants, pilotée par des tokens, plus une page de comparaison côte à côte en direct.
Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :
Build me a token-driven component library starting from Box and TextGenerate a Vanilla-JS Modal and Accordion sharing one theme fileCreate a comparison page showing three themed variants of my buttons