Build Your Own Component Library
Genererer et 24-komponent, token-drevet React eller Vanilla-JS UI-bibliotek plus en live side-om-side sammenligningsside.
Testet · Virker
Hvad det gør
Gennemgår opbygningen af et komplet UI-komponentbibliotek fra en Box/Text kompositionsbase og et design-token-tema, i afhængighedsordnede niveauer (Spacing/Box/Text/Icon op til Accordion/Modal/Select), for React eller Vanilla JS, med 1-3 forskelligt tema-varianter gengivet på én comparison.html-side. Udløses når brugeren ønsker et komponentbibliotek, designsystem eller UI-kit bygget fra bunden.
Testrapport
Byggede et repræsentativt Vanilla-JS-undersæt (Box, Text, Icon, Button, Card, Overlay, Modal) live i en browser: tema-varianter, loading/disabled-tilstande og en fungerende Modal open/close blev alle gengivet korrekt ud fra én theme.js token-fil - tydeligvis mere systematisk end en ad-hoc baseline. Fangede en reel fejl i skillens egne referencedokumenter: component-specs.md dokumenterer Box-props (display, flexDirection, alignItems, justifyContent, gap), som den bogstavelige Box()-boilerplate i vanilla-templates.md aldrig anvender på el.style, så at følge den skabelon ordret bryder lydløst flex-layouts, indtil du bemærker og retter det.
Testet: 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
Kommandoer og eksempelprompter
/build-your-own-componentGenererer et 24-komponent, token-drevet React eller Vanilla-JS UI-bibliotek plus en live side-om-side sammenligningsside.
Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):
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