Build Your Own Component Library
Genererar ett 24-komponents, token-drivet React eller Vanilla-JS UI-bibliotek plus en live sid-vid-sida jämförelsesida.
Testad · Fungerar
Vad den gör
Går igenom att bygga ett komplett UI-komponentbibliotek från en Box/Text kompositionsbas och ett design-token-tema, i beroende-ordnade nivåer (Spacing/Box/Text/Icon upp till Accordion/Modal/Select), för React eller Vanilla JS, med 1-3 olika teman renderade på en jämförelsesida.html. Triggers när användaren vill ha ett komponentbibliotek, designsystem, eller UI-kit byggt från grunden.
Testrapport
Byggde en representativ Vanilla-JS-delmängd (Box, Text, Icon, Button, Card, Overlay, Modal) live i en webbläsare: teman-varianter, laddnings-/inaktiverade tillstånd, och en fungerande Modal öppen/stäng renderades korrekt från en enda theme.js token-fil - klart mer systematiskt än en ad-hoc baslinje. Fångade en verklig bugg i skillens egna referensdokumentation: component-specs.md dokumenterar Box-egenskaper (display, flexDirection, alignItems, justifyContent, gap) som den bokstavliga Box()-mallen i vanilla-templates.md aldrig tillämpar på el.style, så att följa den mallen ordagrant bryter tyst flex-layouter tills du märker och patchar den.
Testad: 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
Kommandon och exempelprompter
/build-your-own-componentGenererar ett 24-komponents, token-drivet React eller Vanilla-JS UI-bibliotek plus en live sid-vid-sida jämförelsesida.
Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):
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