nuxt-ui — Agent skill by nuxt

Nuxt UI is a large box of ready-made parts for Vue websites, and this says which part to reach for when putting together a dashboard, a sign-up form, a landing page or a chat window.

WHEN TO USE

SCOPE

USE FOR

Build an admin dashboard with a sidebar, panels, and data tables in Nuxt UI.
Build a login, signup, or forgot-password form with validation and error handling.
Build a landing page, blog, changelog, or pricing page for your product.
Add a modal, slideover, drawer, or command palette to your app.
Add an AI chat interface built with the Vercel AI SDK.
Customize Nuxt UI's theme and colors to match your brand.

NOT FOR

Look up a specific component's exact props, slots, or events — use the MCP server instead.

This is a saved copy of the skill's SKILL.md instructions. It may differ from the upstream file or the version you install.

In this document (5)

Nuxt UI

Vue component library built on Reka UI + Tailwind CSS + Tailwind Variants. Works with Nuxt, Vue (Vite), Laravel (Vite + Inertia), and AdonisJS (Vite + Inertia).

MCP Server

For component API details (props, slots, events, full documentation, examples), use the Nuxt UI MCP server. If not already configured, add it:

Cursor — .cursor/mcp.json:

{ "mcpServers": { "nuxt-ui": { "type": "http", "url": "https://ui.nuxt.com/mcp" } } }

Claude Code:

claude mcp add --transport http nuxt-ui https://ui.nuxt.com/mcp

Key MCP tools:

search-components — find components by name, category, or intent (no params = list all)
search-composables — find composables by name or description (no params = list all)
search-icons — search Iconify icons (defaults to lucide), returns i-{prefix}-{name} names
get-component — full component documentation with usage examples
get-component-metadata — props, slots, events (lightweight, no docs content)
get-example — real-world code examples

When you need to know what a component accepts or how its API works, use the MCP. This skill teaches you when to use which component and how to build well.

Core rules (always apply)

Always wrap the app in UApp — required for toasts, tooltips, and programmatic overlays. Accepts a locale prop for i18n.
Always use semantic colors — text-default, bg-elevated, border-muted, etc. Never use raw Tailwind palette colors like text-gray-500.
Read generated theme files for slot names — Nuxt: .nuxt/ui/<component>.ts, Vue: node_modules/.nuxt-ui/ui/<component>.ts. These show every slot, variant, and default class for any component.
Override priority (highest wins): ui prop / class prop → global config → theme defaults.
Icons use i-{collection}-{name} format — lucide is the default collection. Use the MCP search-icons tool to find icons, or browse at icones.js.org.

How to use this skill

Based on the task, load the relevant reference files before writing any code. Don't load everything — only what's needed.

Reference files

Guidelines — design decisions and conventions:

design-system — semantic colors, theming, brand customization, variants, the ui prop
component-selection — decision matrices: when to use Modal vs Slideover, Select vs SelectMenu, Toast vs Alert, etc.
conventions — coding patterns, slot naming, items arrays, composables, keyboard shortcuts
forms — form validation, field layout, error handling, Standard Schema

Layouts — full page structure patterns:

landing — landing pages, blog, changelog, pricing
dashboard — admin UI with sidebar and panels
docs — documentation sites with navigation and TOC
chat — AI chat with Vercel AI SDK
editor — rich text editor with toolbars

Recipes — complete patterns for common tasks:

data-tables — tables with filters, pagination, sorting, selection
auth — login, signup, forgot password forms
overlays — modals, slideovers, drawers, command palette
navigation — headers, sidebars, breadcrumbs, tabs

Quick reference:

components — categorized component index for finding the right component name

Routing table

Task	Load these references
Build a landing page	design-system, conventions, landing
Build a dashboard / admin UI	conventions, component-selection, dashboard
Add a settings page	conventions, forms
Create a login / signup form	conventions, forms, auth
Display data in a table	conventions, component-selection, data-tables
Customize theme / brand colors	design-system
Add a chat interface	conventions, chat
Add a modal, slideover, or drawer	conventions, component-selection, overlays
Build site navigation	conventions, component-selection, navigation
Build a documentation site	conventions, docs
Render markdown	component-selection, components, docs
Add a rich text editor	conventions, editor
General UI work	conventions, component-selection

Installation

Nuxt

pnpm add @nuxt/ui tailwindcss

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})

/* app/assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";

<!-- app.vue -->
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

Vue (Vite)

pnpm add @nuxt/ui tailwindcss

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui()
  ]
})

// src/main.ts
import './assets/css/main.css'
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)
const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(ui)
app.mount('#app')

/* src/assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";

<!-- src/App.vue -->
<template>
  <UApp>
    <RouterView />
  </UApp>
</template>

Add class="isolate" to your root <div id="app"> in index.html. For Inertia: use ui({ router: 'inertia' }) in vite.config.ts.

MCP connection required

2 FOR THE AGENT

All items below are required.

01
Install @nuxt/ui and Tailwind CSS in your project
Add the @nuxt/ui and tailwindcss packages with pnpm add @nuxt/ui tailwindcss, then register the @nuxt/ui module in nuxt.config.ts (Nuxt) or the @nuxt/ui Vite plugin (Vue).
02
Wrap your root component in UApp
Wrap the top-level app component (app.vue for Nuxt, App.vue for Vue) in <UApp> — required for toasts, tooltips, and programmatic overlays; UApp accepts a locale prop for i18n.

Listed as free: Connected services may require an account or charge fees.
Installation: One command — usually under 2 minutes.

Not standalone. This skill ships with nuxt/ui and only works together with that tool — install the tool first, then add this skill.

Run this outside your AI tool, using Node.js 22.20.0 or newer. Skills CLI 1.7.2 skips skill selection; prompts cancel installation without an interactive terminal. If choosing Project when asked about installation scope, open your project's folder before running this.

Install checklist

Check selected tools if a picker appears; Claude Code may be unchecked under Additional agents. ↑/↓ moves, Space toggles selections, Enter confirms.
Without a tool picker, check Installing to: for your intended tool. Stop if it names a different tool.
If asked, choose Symlink (Recommended) for shared files or Copy to all agents for separate copies; review the summary before confirming installation.
Install the find-skills skill? defaults to Yes, adding another skill for all projects. Choose No if you don't want that extra installation.

Skills CLI 1.7.2 sends install data to skills.sh by default, including the source, skill names, target tools and file details; GitHub sources are reported only when GitHub confirms the repository is public, while other remote sources can also be reported. Confirmed-public GitHub sources also trigger a security-audit request. Before installing, set the environment variable DO_NOT_TRACK=1 or DISABLE_TELEMETRY=1 to disable both.

npx skills add nuxt/ui --skill "nuxt-ui" --full-depth

After installing for Claude Code, open it in the installation project if you chose Project; Global makes the skill available across projects on this computer. Once Claude Code loads the skill, its description helps Claude decide when to use it.

If installation created a top-level skills folder that did not exist when your Claude Code session started, run /reload-skills in that session. Run it again after later changes in that folder.

What's inside

Files included with this skill.

View on GitHub

The repository is licensed under MIT — use, modification, and redistribution are allowed under that license’s terms.

View the repository’s license file on GitHub →