Build Your Own Component Library
Generuje 24komponentní, tokenově řízenou knihovnu UI React nebo Vanilla-JS plus živou stránku se srovnáním vedle sebe.
Otestováno · Funguje
Co umí
Prochází procesem sestavení kompletní knihovny UI komponent z báze kompozice Box/Text a tématu design tokenů, v závislostně uspořádaných úrovních (Spacing/Box/Text/Icon až po Accordion/Modal/Select), pro React nebo Vanilla JS, s 1-3 různě tematizovanými variantami vykreslenými na jedné stránce comparison.html. Spouští se, když uživatel chce knihovnu komponent, designový systém nebo UI kit sestavený od nuly.
Testovací report
Sestavil jsem reprezentativní podmnožinu Vanilla-JS (Box, Text, Icon, Button, Card, Overlay, Modal) živě v prohlížeči: tematizované varianty, stavy načítání/deaktivace a funkční otevření/zavření Modalu se správně vykreslily z jednoho souboru theme.js tokenů - jasně systematičtější než ad-hoc základní linie. Zachytil jsem skutečnou chybu v samotné referenční dokumentaci dovednosti: component-specs.md dokumentuje props Box (display, flexDirection, alignItems, justifyContent, gap), které doslovná šablona Box() v vanilla-templates.md nikdy neaplikuje na el.style, takže doslovné dodržování této šablony tiše rozbije flex rozložení, dokud si toho nevšimnete a neopravíte to.
Testováno: 2026-07-16 · Claude Code 2.x (agent harness)
Instalace
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
Příkazy a ukázkové prompty
/build-your-own-componentGeneruje 24komponentní, tokenově řízenou knihovnu UI React nebo Vanilla-JS plus živou stránku se srovnáním vedle sebe.
Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):
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