Skills

Install Nuxt UI skills to give AI coding agents deep knowledge of components, theming, and best practices.

What are Skills?

Skills are structured knowledge files that give AI coding agents context about a library, framework, or codebase. Unlike MCP servers that provide real-time tool access, skills are loaded directly into the agent's context so it can reference them throughout the conversation.

Nuxt UI provides two skills:

  • Usage skill — Teaches AI agents how to build UIs with Nuxt UI: installation, theming, components, composables, forms, overlays, and layouts.
  • Contributing skill — Guides AI agents through Nuxt UI's component structure, theming patterns, testing conventions, and documentation guidelines when contributing to the repository.

Usage Skill

The usage skill gives AI agents comprehensive knowledge about building with Nuxt UI v4. It covers:

  • 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

The skill includes additional references that the AI agent loads on demand based on the task, keeping responses focused and context-efficient.

Once installed, you can invoke the skill by typing /nuxt-ui in your agent's chat.

Skills CLI

The skills CLI is the easiest way to install the Nuxt UI skill. It supports 35+ agents including Cursor, Claude Code, Codex, Windsurf, Cline, and more.

npx skills add nuxt/ui

You can target specific agents with the --agent flag:

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

Or install globally so the skill is available across all your projects:

npx skills add nuxt/ui --global
Visit skills.sh to learn more about the skills ecosystem and browse available skills.

Cursor

Quick Install

Click the button below to install the Nuxt UI skill directly in Cursor:

Install Skill

Manual Setup

  1. Open Cursor and go to "Settings" > "Skills"
  2. Click "Add skill" and enter the following 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.

Add the skill using the CLI command:

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

Other AI Tools

The skill files are publicly available on GitHub. You can reference them directly in any AI tool that supports custom context or instructions:

Contributing Skill

The contributing skill helps AI agents assist with contributions to the Nuxt UI repository. It automatically guides through:

  • Component file structure and naming conventions
  • Tailwind Variants theming patterns
  • Vitest testing conventions
  • MDC documentation guidelines

This skill is located in the repository at .claude/skills/contributing/ and is automatically picked up when working in the Nuxt UI codebase with Claude Code or Cursor (when using a Claude model). You can also invoke it by typing /contributing in your agent's chat.

For more details on contributing to Nuxt UI, see the Contribution guide.

LLMs.txt

How to get AI tools like Cursor, Windsurf, GitHub Copilot, ChatGPT, and Claude to understand Nuxt UI components, theming, and best practices.