Build Your Own Component Library

Generiert eine 24-Komponenten-, Token-gesteuerte React- oder Vanilla-JS-UI-Bibliothek plus eine Live-Side-by-Side-Vergleichsseite.

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

Getestet · Funktioniert ★ 9.2/10

Build Your Own Component Library — Generiert eine 24-Komponenten-, Token-gesteuerte React- oder Vanilla-JS-UI-Bibliothek plus eine Live-Side-by-Side-Vergleichsseite.

Was es kann

Führt durch den Aufbau einer vollständigen UI-Komponentenbibliothek von einer Box/Text-Kompositionsbasis und einem Design-Token-Thema, in abhängigkeitsgeordneten Stufen (Spacing/Box/Text/Icon bis hin zu Accordion/Modal/Select), für React oder Vanilla JS, mit 1-3 unterschiedlich thematisierten Variationen, die auf einer Vergleichs.html-Seite gerendert werden. Löst aus, wenn der Benutzer eine Komponentenbibliothek, ein Designsystem oder ein UI-Kit von Grund auf neu erstellen möchte.

Testbericht

Erstellte ein repräsentatives Vanilla-JS-Subset (Box, Text, Icon, Button, Card, Overlay, Modal) live in einem Browser: thematisierte Variationen, Lade-/deaktivierte Zustände und ein funktionierendes Modal zum Öffnen/Schließen wurden alle korrekt aus einer theme.js-Token-Datei gerendert – eindeutig systematischer als eine Ad-hoc-Basislinie. Ein echter Fehler in der eigenen Referenzdokumentation des Skills entdeckt: component-specs.md dokumentiert Box-Props (display, flexDirection, alignItems, justifyContent, gap), die die wörtliche Box()-Boilerplate in vanilla-templates.md nie auf el.style anwendet, sodass das wörtliche Befolgen dieser Vorlage stumm die Flex-Layouts bricht, bis man es bemerkt und behebt.

Getestet am: 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

Befehle & Beispiel-Prompts

/build-your-own-componentGeneriert eine 24-Komponenten-, Token-gesteuerte React- oder Vanilla-JS-UI-Bibliothek plus eine Live-Side-by-Side-Vergleichsseite.

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

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

Vollständiger Testbericht (Englisch) →