Build Your Own Component Library
Generuje 24-komponentową bibliotekę UI React lub Vanilla-JS sterowaną tokenami plus stronę porównawczą na żywo obok siebie.
Testowano · Działa
Co robi ten skill
Przeprowadza przez budowanie kompletnej biblioteki komponentów UI z podstawy kompozycji Box/Text i motywu tokenów projektowych, w kolejności zależności (Spacing/Box/Text/Icon aż do Accordion/Modal/Select), dla React lub Vanilla JS, z 1-3 różnie stylizowanymi wariantami renderowanymi na jednej stronie porównawczej.html. Wyzwalane, gdy użytkownik chce biblioteki komponentów, systemu projektowania lub zestawu UI zbudowanego od podstaw.
Raport z testu
Zbudowano reprezentatywny podzbiór Vanilla-JS (Box, Text, Icon, Button, Card, Overlay, Modal) na żywo w przeglądarce: stylizowane warianty, stany ładowania/wyłączone i działające otwieranie/zamykanie Modal wszystkie poprawnie renderowane z jednego pliku tokenów theme.js - wyraźnie bardziej systematyczne niż ad-hoc bazowa. Wykryto rzeczywisty błąd we własnej dokumentacji referencyjnej umiejętności: component-specs.md dokumentuje właściwości Box (display, flexDirection, alignItems, justifyContent, gap), których dosłowny boilerplate Box() w vanilla-templates.md nigdy nie stosuje do el.style, więc postępowanie zgodnie z tym szablonem dosłownie po cichu łamie układy flex, dopóki nie zauważysz i nie załatasz.
Testowano: 2026-07-16 · Claude Code 2.x (agent harness)
Instalacja
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
Komendy i przykładowe prompty
/build-your-own-componentGeneruje 24-komponentową bibliotekę UI React lub Vanilla-JS sterowaną tokenami plus stronę porównawczą na żywo obok siebie.
Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):
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