Build Your Own Component Library
Genererer et 24-komponent, token-drevet React eller Vanilla-JS UI-bibliotek pluss en live side-ved-side sammenligningsside.
Bestått
Hva den gjør
Går gjennom byggingen av et komplett UI-komponentbibliotek fra en Box/Text komposisjonsbase og et design-token-tema, i avhengighetsordnede nivåer (Spacing/Box/Text/Icon opp til Accordion/Modal/Select), for React eller Vanilla JS, med 1-3 forskjellig-tematiske variasjoner gjengitt på én comparison.html-side. Utløses når brukeren ønsker et komponentbibliotek, designsystem, eller UI-kit bygget fra bunnen av.
Testrapport
Bygget en representativ Vanilla-JS-delmengde (Box, Text, Icon, Button, Card, Overlay, Modal) live i en nettleser: tematiske varianter, lasting/deaktiverte tilstander, og en fungerende Modal åpne/lukke rendret alle korrekt fra én theme.js token-fil - klart mer systematisk enn en ad-hoc baseline. Fanget en ekte feil i ferdighetens egne referansedokumenter: component-specs.md dokumenterer Box-props (display, flexDirection, alignItems, justifyContent, gap) som den bokstavelige Box()-boilerplate i vanilla-templates.md aldri anvender på el.style, så å følge den malen ordrett bryter stille flex-layoutene til du legger merke til det og lapper det.
Testet på: 2026-07-16 · Claude Code 2.x (agent harness)
Installer
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 pluss en live side-ved-side sammenligningsside.
Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen 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