Saltar al contenido principal

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-usage
El 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-cli-developmentsource ↗

Use when modifying or extending CLI commands, prompts, build configurations, or API integrations in packages/cli.

npx skills add github:figueroaignacio/ui-skills/skills/nachui-cli-development
nachui-component-developmentsource ↗

Use when creating, modifying, or refactoring React components in the packages/ui directory of NachUI.

npx skills add github:figueroaignacio/ui-skills/skills/nachui-component-development
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-components
nachui-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-design
nachui-docs-managementsource ↗

Use when modifying documentation pages, routing, next-intl translations, MDX schemas, or AI functionality in apps/docs.

npx skills add github:figueroaignacio/ui-skills/skills/nachui-docs-management
nachui-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-usage
Se sincronizan desde github.com/figueroaignacio/ui-skills, que es donde se editan.

Cuál te sirve

La mayoría de las veces te alcanza con la primera.
  • nachui-usage es para consumir NachUI en una app. Rutas de importación, qué primitivo usar en cada caso, cómo componerlos. Es la que querés si estás construyendo con los componentes y no sobre ellos.
  • nachui-component-development es para escribir o refactorizar los primitivos: estructura de archivos, configs de CVA, refs, display names.
  • nachui-compound-components cubre el patrón de dot notation, el contexto compartido y cómo agregar un sub componente sin romper el tipado.
  • nachui-design cubre tokens, espaciado, tipografía y las reglas visuales, para que un asistente deje de inventar valores hex.
  • nachui-cli-development es para trabajar dentro de packages/cli, en comandos, prompts y llamadas al registro.
  • nachui-docs-management es para la app de documentación: esquemas MDX, ruteo, traducciones.

Cómo funcionan

Cada skill declara en su frontmatter cuándo debería usarse:
1---
2name: 'nachui-compound-components'
3description: 'Use when building, extending, or consuming compound components.'
4---
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.

Crear un Issue
Anteriorllms.txt
SiguienteAccordion
Ctrl+I