Pular para o conteúdo
A
Get Pro
Plataformas

IA: MCP e skill

Peça “monte uma tela de login com o Aura UI” e o assistente usa os componentes certos, com o import certo, no tema certo.

Servidor MCP

O aura-ui-mcp roda local via npx (Node 18+) e entrega ao assistente o mesmo catálogo que gera este site:

list_componentsBusca no catálogo por nome, categoria ou plataforma (web/native).
get_componentAPI, exemplos e código-fonte, com as dependências resolvidas.
get_setupPasso a passo de instalação: pacote, CLI ou React Native.
list_themesOs 33 temas, claros e escuros.
get_design_tokensTokens, utilitários do Tailwind e classes aura-*.

Configure o seu cliente

bash
claude mcp add aura-ui -- npx -y aura-ui-mcp@latest

Skill do Aura UI (Claude Code)

A skill ensina as regras do design system — quando usar cada variante, tokens em vez de cores fixas, acessibilidade e receitas de telas. Baixe para a pasta de skills do projeto:

bash
mkdir -p .claude/skills/aura-ui/references
curl -fsSL https://aura.toolspace.com.br/skills/aura-ui/SKILL.md -o .claude/skills/aura-ui/SKILL.md
curl -fsSL https://aura.toolspace.com.br/skills/aura-ui/references/recipes.md -o .claude/skills/aura-ui/references/recipes.md
  • Use ~/.claude/skills/aura-ui para valer em todos os projetos.
  • Arquivos: SKILL.md e references/recipes.md.
  • Com o MCP configurado, a skill consulta o catálogo sozinha.

Experimente

  • “Monte uma página de preços com o Aura UI, três planos, o do meio em destaque.”
  • “Crie um formulário de cadastro com Field, InputOTP e validação.”
  • “Faça a tela de configurações do app em React Native com aura-ui-native.”
  • “Qual tema escuro combina com uma marca roxa? Aplique no projeto.”