@vexa/mcp

MCP y Design Skill

VEXA es nativo para IA. El servidor @vexa/mcp expone el registry en vivo, los tokens, los temas y las reglas de diseño a los agentes mediante el Model Context Protocol; la Design Skill enseña a un agente a construir al estilo VEXA.

Las siete herramientas MCP

Todas las herramientas son de solo lectura y leen el propio código de VEXA en tiempo de petición, así que el catálogo nunca está hardcodeado.

list_componentsEntrada: sin entrada
Cada item del registry con su tipo, título, descripción, frameworks, límite RSC y nota de accesibilidad. Empieza aquí para descubrir qué existe.
get_componentEntrada: name
El payload Open Code completo: el contenido inline de cada archivo y su ruta destino, dependencias npm y del registry @vexa, metadatos, un ejemplo e instrucciones de copiado.
search_componentsEntrada: query
Busca en el registry por palabra clave en nombre, título, descripción, tipo, frameworks, límite RSC, variantes y notas de accesibilidad.
get_tokensEntrada: theme?
Tokens semánticos parseados de VEXA Core: tripletes HSL de color por tema más las escalas de radio, espaciado, movimiento, sombra y controles.
list_themesEntrada: sin entrada
Los temas Light, Obsidian y Graphite con etiquetas, descripciones, el valor por defecto y cómo activar cada uno.
get_design_guidanceEntrada: topic?
Guía accionable: principios, el flujo Open Code, límites RSC, estilos con tokens, estándares de API, accesibilidad WCAG 2.2 AA y el brief para agentes.
get_registry_urlEntrada: name?
El endpoint canónico del registry, el namespace @vexa, una URL por item y el comando shadcn add.

Conéctalo

El servidor habla stdio. Compílalo una vez y apunta cualquier cliente MCP al entry.

Compila el servidor

pnpm --filter @vexa/mcp build

Añádelo a Claude Code

.mcp.json

{
  "mcpServers": {
    "vexa": {
      "command": "node",
      "args": ["/absolute/path/to/vexa/packages/mcp/dist/index.js"]
    }
  }
}

claude mcp add vexa -- node /absolute/path/to/vexa/packages/mcp/dist/index.js

El servidor corre dentro de un checkout de VEXA y no hace llamadas de red. Define VEXA_REPO_ROOT para fijar el repo explícitamente.

El ciclo del agente

1
list_components o search_components para encontrar un primitivo.
2
get_component para obtener su código, dependencias y metadatos.
3
Escribe cada archivo en su destino; resuelve las dependencias del registry igual.
4
get_tokens y list_themes para aplicar estilos con tokens semánticos.
5
get_design_guidance para aplicar reglas de RSC, API y accesibilidad.

La Design Skill

vexa-design es una skill de agente que enseña la forma VEXA de construir UI — más allá del acceso al catálogo.

Se activa cuando un agente trabaja en un proyecto VEXA o se le pide añadir un componente al estilo VEXA, y codifica:

El flujo Open Code — copia el código que posees, prefiere editarlo antes que una API de props enorme.
Estilos con tokens semánticos — nunca colores a mano; compón variantes con cva y cn.
Límites RSC / 'use client' — mantén la estructura estática renderizable en servidor.
Accesibilidad WCAG 2.2 AA — modelos de teclado, foco, etiquetas y errores asociados.
Los estándares de API y estados de VEXA — cada estado aplicable recibe un tratamiento visible.