Nuxt UI skill

O Claude escolhe o componente certo do Nuxt UI, segue as cores da sua marca e monta landing page, painel, login ou chat sem reinventar peça.

por NuxtPublicada pela própria empresa

instalações: 19,8 mil
estrelas no GitHub: 7.027
No skills.sh desde: fevereiro de 2026
Licença: MIT

Atualizada no GitHub em 26 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

Nuxt
nuxt-ui
O Claude escolhe o componente certo do Nuxt UI, segue as cores da sua marca e monta landing page, painel, login ou chat sem reinventar peça.OficialAuditada19,8 mil instalações, grátis

O que ela faz

Dá ao Claude as regras do Nuxt UI v4, a biblioteca de mais de 125 componentes Vue acessíveis feita sobre Reka UI e Tailwind CSS. Funciona em projetos Nuxt, Vue com Vite, Laravel e AdonisJS. Antes de escrever código, carrega só o guia da tarefa: landing page, painel administrativo, site de documentação, chat com IA ou editor de texto.

Segue regras fixas: envolve o app no UApp, usa cores semânticas em vez de cinza solto do Tailwind e lê os arquivos de tema gerados pra saber os slots de cada componente. Tem tabelas de decisão, como quando usar modal ou painel lateral, alerta ou toast, e receitas de tabela com filtro, login, cadastro e navegação.

Pros detalhes de cada componente (props, slots, eventos e exemplos), indica ligar o servidor MCP oficial do Nuxt UI, que no Claude Code entra com um comando só. Também traz o passo a passo pra instalar o pacote @nuxt/ui com o Tailwind no Nuxt e no Vue.

Nas palavras de quem fez

Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand,…

Nuxt, no SKILL.md

Quando usar

Montar o painel administrativo de um SaaS em Vue ou Nuxt
Criar landing page, página de preços ou changelog com a cara da marca
Fazer telas de login, cadastro e esqueci a senha com validação
Mostrar dados em tabela com filtro, paginação e ordenação
Colocar um chat com IA dentro do app

Depois de instalar, é só pedir assim

Monta um painel administrativo com menu lateral e uma tabela de clientes com filtro e paginação usando Nuxt UI
Troca as cores do tema do Nuxt UI pra seguir a minha marca: roxo #6B21A8 como cor principal
Cria as telas de login e cadastro com validação de formulário

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketPassou
SnykPassou

Perguntas

Como instalar a Nuxt UI no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Nuxt UI, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

Precisa de projeto em Nuxt ou Vue?

Sim. A skill trabalha com o pacote @nuxt/ui e o Tailwind CSS num projeto Nuxt, Vue com Vite, ou Laravel e AdonisJS com Inertia. Se o projeto ainda não tem o pacote, ela traz os comandos de instalação.

Precisa de chave de API ou conta?

Não. A skill é texto, e o servidor MCP que ela recomenda é público, em ui.nuxt.com/mcp, sem chave. Ele é opcional, mas dá ao Claude a documentação atualizada de cada componente. Só o chat com IA, feito com o Vercel AI SDK, vai pedir no seu app a chave do provedor do modelo.

Roda no Codex e no Antigravity?

Sim. É um SKILL.md com arquivos de referência, e qualquer agente que lê skills usa. O MCP do Nuxt UI também liga em outros agentes; a skill mostra o comando do Claude Code e o arquivo de configuração do Cursor.

Levar essa skill

1x nuxt-uiR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/nuxt/ui

Aprenda a usar

Criar site com IA: o passo a passo no Claude Code
Como eu crio site com IA pros clientes sem saber programar: no Claude Code, no Codex ou de graça no Antigravity. O passo a passo, sem cara de template.