Usar con IA

Tres piezas, generadas de los mismos datos de este sitio, así que nunca lo contradicen. La skill enseña las convenciones de antemano (las props compartidas, cómo funciona el valor de cada componente, qué componente elegir) y trae un archivo de referencia por componente. El servidor MCP responde en vivo: busca en los docs y lee las props, los ejemplos y las notas de accesibilidad de cualquier componente. El plugin instala ambos de una vez en Claude Code.

Añade este repositorio como marketplace e instala el plugin. Instala la skill y conecta el servidor MCP:

/plugin marketplace add vaiperliotech/vaiperui
/plugin install vaiperui@vaiperui

La skill se carga sola cuando trabajas con vaiperui; también puedes llamarla con /vaiperui:vaiperui. Si no aparece de inmediato, ejecuta /reload-plugins.

El servidor está alojado en este sitio, así que nada corre en tu máquina: es público, de solo lectura y no necesita cuenta. Añádelo a Claude Code con:

claude mcp add --transport http vaiperui https://vaiperui.vercel.app/mcp

Otros clientes usan la misma URL. Cursor y VS Code quedan así; en cualquier otro cliente, añade un servidor MCP remoto (HTTP) con la URL https://vaiperui.vercel.app/mcp en sus ajustes de MCP. Revisa la documentación de tu cliente, porque los nombres de archivo cambian entre versiones.

{
  "mcpServers": {
    "vaiperui": { "url": "https://vaiperui.vercel.app/mcp" }
  }
}

{
  "servers": {
    "vaiperui": { "type": "http", "url": "https://vaiperui.vercel.app/mcp" }
  }
}

Abrir https://vaiperui.vercel.app/mcp en el navegador también muestra estas instrucciones.

Cuatro herramientas de solo lectura. Cada una acepta un locale opcional (en, pt o es):

• list_components: Todos los componentes con una línea de descripción, por grupo.
• search_docs: Encuentra el componente para una necesidad (dropdown, scroll infinito en un select, máscara de teléfono). Busca en componentes, props, ejemplos, notas de accesibilidad y guías.
• get_component: La referencia completa de un componente: import, uso, cada prop con valores y valor por defecto, accesibilidad y, bajo petición, todos los ejemplos. El nombre es flexible: Button, DatePicker, date-picker.
• get_setup: Comando de instalación, imports de CSS, modo oscuro y tema.

Cada componente también es un recurso (vaiperui://component/slug) para clientes que adjuntan documentos como contexto.

Sin el plugin, copia la skill que viene dentro del paquete a tu proyecto, o a ~/.claude/skills para usarla en todos los proyectos:

mkdir -p .claude/skills
cp -r node_modules/vaiperui/skills/vaiperui .claude/skills/

mkdir -p ~/.claude/skills
cp -r node_modules/vaiperui/skills/vaiperui ~/.claude/skills/

Funciona con cualquier agente que soporte Agent Skills. En los demás, apunta al agente hacia SKILL.md y los archivos de references/: son Markdown simple.

Pide pantallas enteras: el agente consulta cada componente en lugar de adivinar sus props.

• Crea un formulario de reserva con vaiperui: teléfono con máscara, select de país con búsqueda, un rango de fechas con atajos y un toast de éxito.
• Añade una tabla de usuarios con avatar, badge de estado, un menú de acciones por fila, un modal de confirmación de borrado y paginación.
• Haz que el select cargue usuarios de mi API, con scroll infinito y búsqueda en el servidor.