Skills

Instale as skills do Nitro UI para dar aos agentes de IA de programação um conhecimento profundo dos componentes, da tematização e das boas práticas.

O que são Skills?

Skills são arquivos de conhecimento estruturados que dão aos agentes de IA de programação contexto sobre uma biblioteca, framework ou base de código. Diferentemente dos servidores MCP, que fornecem acesso a ferramentas em tempo real, as skills são carregadas diretamente no contexto do agente para que ele possa consultá-las ao longo da conversa.

O Nitro UI fornece uma skill de uso que ensina os agentes de IA a construir UIs com o Nitro UI: instalação, tematização, componentes, composables, formulários, overlays e layouts.

Uso

A skill de uso dá aos agentes de IA um conhecimento abrangente sobre como construir com o Nitro UI v4. Ela abrange:

  • Installation for Nuxt, Vue, Laravel, and AdonisJS
  • Theming and branding with semantic colors and CSS variables
  • All 125+ components with props and usage patterns
  • Composables (useToast, useOverlay, defineShortcuts)
  • Form validation with Standard Schema
  • Layout composition (Dashboard, Docs, Chat, Editor)
  • Official starter templates

A skill inclui referências adicionais que o agente de IA carrega sob demanda conforme a tarefa, mantendo as respostas focadas e eficientes em contexto.

Uma vez instalada, você pode invocar a skill digitando /nuxt-ui no chat do seu agente.

Skills CLI

A CLI skills é a maneira mais fácil de instalar a skill do Nitro UI. Ela suporta mais de 35 agentes, incluindo Cursor, Claude Code, Codex, Windsurf, Cline e outros.

npx skills add nuxt/ui

Você pode direcionar agentes específicos com a flag --agent:

npx skills add nuxt/ui --agent cursor
npx skills add nuxt/ui --agent claude-code

Ou instale globalmente para que a skill fique disponível em todos os seus projetos:

npx skills add nuxt/ui --global

Se clonar do GitHub estiver lento na sua rede, você pode instalar diretamente pelo site:

npx skills add https://ui.nitro.news
Acesse skills.sh para saber mais sobre o ecossistema de skills e explorar as skills disponíveis.

Cursor

Instalação rápida

Clique no botão abaixo para instalar a skill do Nitro UI diretamente no Cursor:

Install Skill

Configuração manual

  1. Abra o Cursor e vá em "Settings" > "Skills"
  2. Clique em "Add skill" e informe a seguinte URL:
https://github.com/nuxt/ui/tree/v4/skills/nuxt-ui

Claude Code

Ensure Claude Code is installed. Visit Anthropic's documentation for installation instructions.

Adicione a skill usando o comando da CLI:

claude skill add https://github.com/nuxt/ui/tree/v4/skills/nuxt-ui

Outras ferramentas de IA

Os arquivos da skill estão disponíveis publicamente no GitHub. Você pode referenciá-los diretamente em qualquer ferramenta de IA que suporte contexto ou instruções personalizadas:

LLMs.txt

Como fazer ferramentas de IA como Cursor, Windsurf, GitHub Copilot, ChatGPT e Claude entenderem os componentes, a tematização e as boas práticas do Nitro UI.