Build Your Own Component Library

Genereert een 24-componenten, token-gedreven React of Vanilla-JS UI-bibliotheek plus een live side-by-side vergelijkingspagina.

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

Getest · Werkt ★ 9.2/10

Build Your Own Component Library — Genereert een 24-componenten, token-gedreven React of Vanilla-JS UI-bibliotheek plus een live side-by-side vergelijkingspagina.

Wat het doet

Doorloopt het bouwen van een complete UI-componentbibliotheek vanuit een Box/Text compositiebasis en een design-token thema, in afhankelijkheidsgeordende niveaus (Spacing/Box/Text/Icon tot Accordion/Modal/Select), voor React of Vanilla JS, met 1-3 verschillend gethematiseerde variaties gerenderd op één comparison.html pagina. Triggers wanneer de gebruiker een componentbibliotheek, design system, of UI kit vanaf nul wil bouwen.

Testrapport

Bouwde een representatieve Vanilla-JS subset (Box, Text, Icon, Button, Card, Overlay, Modal) live in een browser: gethematiseerde variaties, laad-/uitgeschakelde statussen, en een werkende Modal open/sluiten rendert correct vanaf één theme.js tokenbestand - duidelijk systematischer dan een ad-hoc baseline. Vond een echte bug in de eigen referentiedocumentatie van de skill: component-specs.md documenteert Box props (display, flexDirection, alignItems, justifyContent, gap) die de letterlijke Box() boilerplate in vanilla-templates.md nooit toepast op el.style, dus het letterlijk volgen van die template breekt stilzwijgend flex-layouts totdat je het opmerkt en patcht.

Getest op: 2026-07-16 · Claude Code 2.x (agent harness)

Installatie

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

Commando's en voorbeeldprompts

/build-your-own-componentGenereert een 24-componenten, token-gedreven React of Vanilla-JS UI-bibliotheek plus een live side-by-side vergelijkingspagina.

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

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

Volledig rapport (Engels) →