Saltar al contenido
EspañolEnglish

Para agentes y herramientas

Un asistente de código que no conoce la biblioteca se inventa las props. Para que no tenga que adivinar, el paquete se describe a sí mismo en ficheros que una máquina lee, generados en cada build desde la API real.

Lo que viaja en el paquete

FicheroCómo se importaTamañoQué es
llms.txt@amset/ui/llms.txt59 KBEl índice para un modelo de lenguaje: las reglas y una línea por componente con sus props.
llms-full.txt@amset/ui/llms-full.txt917 KBLo mismo con cada prop, su tipo y su descripción.
AGENTS.md@amset/ui/AGENTS.md59 KBLas instrucciones para un asistente de código: reglas y resumen de cada componente.
api.json@amset/ui/api.json961 KBLas props reales de cada componente leídas del compilador, los iconos y las utilidades.
docs.json@amset/ui/docs.json1 MBEl texto de cada ficha: qué es, cuándo usarlo y cuándo no, teclado y accesibilidad.
props.en.json@amset/ui/props.en.json499 KBLa descripción en inglés de cada prop.
knobs.json@amset/ui/knobs.json36 KBLas variables CSS que se pueden tocar de cada componente.
examples.json@amset/ui/examples.json149 KBUn ejemplo de uso real por cada historia del banco de pruebas.
locales/en.json@amset/ui/locales/en.json123 KBTodas las claves de los textos de la biblioteca: la plantilla para traducirla a otro idioma.

llms.txt y llms-full.txt los sirve también esta web en su raíz, tal como salen del paquete de la versión 0.35.0:

El índice, para pegárselo a un modelo.
Con cada prop de cada componente.

AGENTS.md y la skill

AGENTS.md empieza por las reglas que no se discuten —no inventar componentes ni props, importar del índice, no escribir colores a mano— y sigue con un resumen de cada componente. Basta con decirle al asistente dónde está:

AGENTS.md (de tu proyecto)
Antes de escribir código con @amset/ui, lee node_modules/@amset/ui/dist/AGENTS.md.Si un componente o una prop no está en node_modules/@amset/ui/dist/api.json, no existe.

El paquete trae además una skill para Claude Code, skills/amset-ui/SKILL.md, con las mismas reglas y cuándo usarla: cópiala a .claude/skills/ de tu proyecto.

El servidor MCP

@amset/mcp le da a tu asistente herramientas para buscar componentes, leer sus props reales, ver ejemplos, compilar un fragmento contra la biblioteca instalada y generar un tema.

Las herramientas, cómo se instala y cómo se conecta.

Tokens en Figma

El repositorio de la biblioteca trae un plugin de Figma que mete los tokens como Variables: una colección de color con los modos claro y oscuro —cambiar de modo en un marco cambia el tema entero, como data-theme en el código— y otra con tipografía, espacio, radios, alturas de control, duraciones y curvas. Se vuelve a lanzar cuando cambian: actualiza los valores, no duplica.

Código
npm run export:figma   # en el repositorio de amset-ui: escribe dist/figma-tokens.jsonnpm run figma          # tokens y componentes juntos, en figma-export/
  • Los colores salen en hexadecimal (Figma no entiende OKLCH) y las medidas en píxeles.
  • Funciona en cualquier plan de Figma: escribir variables por la API de Figma exige el plan Enterprise, un plugin no.
Y los componentes
El plugin también dibuja los componentes. Cada historia del banco de pruebas se abre en un Chromium real y se copia lo que mide el navegador: caja, rellenos, bordes, sombras, textos y SVG. Queda un component set por componente, con una variante por historia, y cada color que coincide con una variable se engancha a ella. Las cajas son fijas, sin auto layout, y las imágenes salen como un rectángulo gris: es una foto fiel y editable de lo que se ve, no una maquetación rehecha.