Build Your Own Component Library

Genera una biblioteca de UI de React o Vanilla-JS de 24 componentes, controlada por tokens, más una página de comparación en vivo lado a lado.

Por ethankongee · ethankongee/build-your-own-component

Probado · Funciona ★ 9.2/10

Build Your Own Component Library — Genera una biblioteca de UI de React o Vanilla-JS de 24 componentes, controlada por tokens, más una página de comparación en vivo lado a lado.

Qué hace

Recorre la construcción de una biblioteca completa de componentes de UI a partir de una base de composición Box/Text y un tema de tokens de diseño, en niveles ordenados por dependencia (Espaciado/Box/Text/Icon hasta Accordion/Modal/Select), para React o Vanilla JS, con 1-3 variaciones temáticas diferentes renderizadas en una página de comparación.html. Se activa cuando el usuario quiere una biblioteca de componentes, sistema de diseño o kit de UI construido desde cero.

Informe de la prueba

Construí un subconjunto representativo de Vanilla-JS (Box, Text, Icon, Button, Card, Overlay, Modal) en vivo en un navegador: las variaciones temáticas, los estados de carga/desactivado y un Modal funcional de abrir/cerrar se renderizaron correctamente a partir de un solo archivo de tokens theme.js - claramente más sistemático que una línea base ad-hoc. Detecté un error real en la propia documentación de referencia de la habilidad: component-specs.md documenta props de Box (display, flexDirection, alignItems, justifyContent, gap) que el boilerplate literal Box() en vanilla-templates.md nunca aplica a el.style, por lo que seguir esa plantilla textualmente rompe silenciosamente los diseños flex hasta que te das cuenta y lo parcheas.

Probado el: 2026-07-16 · Claude Code 2.x (agent harness)

Instalación

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

Comandos y prompts de ejemplo

/build-your-own-componentGenera una biblioteca de UI de React o Vanilla-JS de 24 componentes, controlada por tokens, más una página de comparación en vivo lado a lado.

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

Build me a token-driven component library starting from Box and Text
Generate a Vanilla-JS Modal and Accordion sharing one theme file
Create a comparison page showing three themed variants of my buttons

Informe completo →