Usar com IA

Três peças, geradas dos mesmos dados deste site, então nunca discordam dele. A skill ensina as convenções de antemão (as props compartilhadas, como funciona o valor de cada componente, qual componente escolher) e traz um arquivo de referência por componente. O servidor MCP responde ao vivo: busca nos docs e lê as props, os exemplos e as notas de acessibilidade de qualquer componente. O plugin instala os dois de uma vez no Claude Code.

Adicione este repositório como marketplace e instale o plugin. Ele instala a skill e conecta o servidor MCP:

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

A skill carrega sozinha quando você trabalha com o vaiperui; também dá para chamá-la com /vaiperui:vaiperui. Se ela não aparecer de imediato, rode /reload-plugins.

O servidor fica hospedado neste site, então nada roda na sua máquina: é público, somente leitura e não exige conta. Adicione ao Claude Code com:

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

Outros clientes usam a mesma URL. Cursor e VS Code ficam assim; em qualquer outro cliente, adicione um servidor MCP remoto (HTTP) com a URL https://vaiperui.vercel.app/mcp nas configurações de MCP. Confira a documentação do seu cliente, porque os nomes dos arquivos mudam entre versões.

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

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

Abrir https://vaiperui.vercel.app/mcp no navegador também mostra estas instruções.

Quatro ferramentas somente leitura. Cada uma aceita um locale opcional (en, pt ou es):

• list_components: Todos os componentes com uma linha de descrição, por grupo.
• search_docs: Acha o componente para uma necessidade (dropdown, scroll infinito num select, máscara de telefone). Busca em componentes, props, exemplos, notas de acessibilidade e guias.
• get_component: A referência completa de um componente: import, uso, cada prop com valores e padrão, acessibilidade e, sob pedido, todos os exemplos. O nome é flexível: Button, DatePicker, date-picker.
• get_setup: Comando de instalação, imports de CSS, modo escuro e tema.

Cada componente também é um recurso (vaiperui://component/slug) para clientes que anexam documentos como contexto.

Sem o plugin, copie a skill que vem dentro do pacote para o seu projeto, ou para ~/.claude/skills para usá-la em todos os projetos:

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 com qualquer agente que suporte Agent Skills. Nos outros, aponte o agente para o SKILL.md e para os arquivos de references/: são Markdown simples.

Peça telas inteiras: o agente consulta cada componente em vez de adivinhar as props.

• Monte um formulário de reserva com o vaiperui: telefone com máscara, select de país com busca, um período de datas com atalhos e um toast de sucesso.
• Adicione uma tabela de usuários com avatar, badge de status, um menu de ações por linha, um modal de confirmação de exclusão e paginação.
• Faça o select carregar usuários da minha API, com scroll infinito e busca no servidor.