Nuxt UI v4 Skill | Agent Skills

Nuxt UI v4

Component library for Vue 3 and Nuxt 4+ built on Reka UI (headless) + Tailwind CSS v4 + Tailwind Variants.

When to Use

Installing/configuring @nuxt/ui
Using UI components (Button, Card, Table, Form, etc.)
Customizing theme (colors, variants, CSS variables)
Building forms with validation
Using overlays (Modal, Toast, CommandPalette)
Working with composables (useToast, useOverlay)

For Vue component patterns: use vue skill For Nuxt routing/server: use nuxt skill

Available Guidance

| File | Topics | | ------------------------------------------------------------ | ---------------------------------------------------------------- | | references/installation.md | Nuxt/Vue setup, pnpm gotchas, UApp wrapper, module options | | references/theming.md | Semantic colors, CSS variables, app.config.ts, Tailwind Variants | | references/components.md | Component index by category (121 components) | | components/*.md | Per-component details (button.md, modal.md, etc.) | | references/forms.md | Form components, validation (Zod/Valibot), useFormField | | references/overlays.md | Toast, Modal, Slideover, Drawer, CommandPalette | | references/composables.md | useToast, useOverlay, defineShortcuts, useScrollspy |

Usage Pattern

Load based on context:

Installing Nuxt UI? → references/installation.md
Customizing theme? → references/theming.md
Component index → references/components.md
Specific component → components/button.md, components/modal.md, etc.
Building forms? → references/forms.md
Using overlays? → references/overlays.md
Using composables? → references/composables.md

DO NOT read all files at once. Load based on context.

Key Concepts

| Concept | Description | | ----------------- | ---------------------------------------------------------- | | UApp | Required wrapper component for Toast, Tooltip, overlays | | Tailwind Variants | Type-safe styling with slots, variants, compoundVariants | | Semantic Colors | primary, secondary, success, error, warning, info, neutral | | Reka UI | Headless component primitives (accessibility built-in) |

For headless component primitives (API details, accessibility patterns, asChild): read the reka-ui skill

Quick Reference

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

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

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

Resources

Token efficiency: Main skill ~300 tokens, each sub-file ~800-1200 tokens

Agent Skills: Nuxt UI v4