Skills
Instrucciones instalables que le enseñan a un asistente de IA cómo se construyen, componen y documentan los componentes de NachUI, para que el código que escribe se parezca al resto del proyecto.
Un asistente que puede leer tus componentes igual no conoce tus convenciones. Con un archivo suelto no se entera de que una
Card se compone con dot notation, de que las variantes van en una config de CVA declarada fuera del componente, o de que los colores siempre pasan por un token en vez de un hex. Va a adivinar, y lo que adivine va a quedar casi bien.Las skills cubren ese hueco. Cada una es un archivo markdown que instalás en tu proyecto y que describe cómo se trabaja una parte específica de NachUI. El asistente carga la que corresponde a lo que estás haciendo.
Instalación
Cada skill se instala por separado con el CLI de skills:
npx skills add github:figueroaignacio/ui-skills/skills/nachui-usageEl archivo queda en
.agents/skills/<nombre>/SKILL.md dentro de tu proyecto y se registra en skills-lock.json, así que se commitea junto con todo lo demás y todo tu equipo recibe las mismas instrucciones.Skills disponibles
nachui-compound-componentssource ↗
Use when building, extending, or consuming compound components, meaning components made of multiple sub-parts assembled via dot notation (e.g. Dialog.Trigger, Card.Header, Accordion.Item).
npx skills add github:figueroaignacio/ui-skills/skills/nachui-compound-componentsnachui-designsource ↗
Use when styling, designing, or adjusting UI layout, colors, variables, typography, and visual assets in NachUI.
npx skills add github:figueroaignacio/ui-skills/skills/nachui-designnachui-usagesource ↗
Use when consuming, importing, or integrating NachUI components inside apps/web or any app that depends on @repo/ui.
npx skills add github:figueroaignacio/ui-skills/skills/nachui-usageSe sincronizan desde github.com/figueroaignacio/ui-skills, que es donde se editan.
Cuál te sirve
Tres skills, un trabajo cada una. La mayoría de los proyectos quiere la primera, y las otras dos cuando el asistente empieza a tocar la parte visual.
- nachui-usage es la que instalás si construís con NachUI. Rutas de import, qué primitivo elegir, cómo se componen las piezas, qué pone el CLI y dónde.
- nachui-compound-components enseña el patrón de notación con punto:
Dialog.Trigger,Card.Header, el contexto compartido detrás, y cómo extender un componente con una parte nueva sin romper sus tipos. - nachui-design lleva los tokens, las reglas de espaciado y tipografía y el contrato de modo oscuro, para que un asistente deje de inventar hexadecimales y tamaños arbitrarios.
Están escritas para quien consume la librería. Las skills que usamos para desarrollar NachUI viven en el mismo repositorio pero no se listan acá, porque asumen el monorepo y solo molestarían en tu proyecto.
Cómo funcionan
Cada skill declara en su frontmatter cuándo debería usarse:
El asistente lee esas descripciones, las compara con lo que le pediste y carga el archivo que corresponde antes de empezar a escribir. No hace falta que nombres la skill vos, aunque nada te impide hacerlo.
Las skills y llms.txt hacen cosas distintas
llms.txt le da al asistente la documentación. Las skills le dan las
convenciones. Lo primero le dice qué es un
Dialog, lo segundo le dice cómo espera este
proyecto que se escriba un Dialog.Relacionado
- llms.txt para apuntar un agente a la documentación misma.
- Componentes compuestos para el patrón que la skill hace cumplir.
- CLI para los comandos que ponen los componentes en tu proyecto.
¿Encontraste algo que mejorar?
¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.