Build Your Own Component Library

Genera una libreria UI a 24 componenti, basata su token, per React o Vanilla-JS più una pagina di confronto live affiancata.

di ethankongee · ethankongee/build-your-own-component

Promosso ★ 9.2/10

Build Your Own Component Library — Genera una libreria UI a 24 componenti, basata su token, per React o Vanilla-JS più una pagina di confronto live affiancata.

Cosa fa

Guida alla costruzione di una libreria di componenti UI completa da una base di composizione Box/Text e un tema di design token, in livelli ordinati per dipendenza (Spacing/Box/Text/Icon fino ad Accordion/Modal/Select), per React o Vanilla JS, con 1-3 variazioni a tema diverso renderizzate su una pagina comparison.html. Si attiva quando l'utente desidera una libreria di componenti, un design system o un UI kit costruito da zero.

Rapporto di test

Costruito un sottoinsieme rappresentativo Vanilla-JS (Box, Text, Icon, Button, Card, Overlay, Modal) dal vivo in un browser: varianti a tema, stati di caricamento/disabilitato e un Modal funzionante di apertura/chiusura tutti renderizzati correttamente da un file token theme.js - chiaramente più sistematico di un baseline ad-hoc. Rilevato un vero bug nella documentazione di riferimento della skill: component-specs.md documenta le prop di Box (display, flexDirection, alignItems, justifyContent, gap) che il boilerplate letterale Box() in vanilla-templates.md non applica mai a el.style, quindi seguire quel template alla lettera rompe silenziosamente i layout flex finché non lo si nota e corregge.

Testato il: 2026-07-16 · Claude Code 2.x (agent harness)

Installazione

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

Comandi e prompt di esempio

/build-your-own-componentGenera una libreria UI a 24 componenti, basata su token, per React o Vanilla-JS più una pagina di confronto live affiancata.

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

Build me a token-driven component library starting from Box and Text
Generate a Vanilla-JS Modal and Accordion sharing one theme file
Create a comparison page showing three themed variants of my buttons

Rapporto completo →