nuxt-ui
Use when building styled UI with @nuxt/ui v4 components - create forms with validation, implement data tables with sorting, build modal dialogs and overlays, configure Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.
100
Does it follow best practices?
Evaluation — 100%
↑ 1.16xAgent success when using this skill
Validation for skill structure
Nuxt UI v4
Component library for Vue 3 and Nuxt 4+ built on Reka UI (headless) + Tailwind CSS v4 + Tailwind Variants.
Current stable version: v4.4.0 (January 2026)
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, prefix, tree-shaking |
| references/theming.md | Semantic colors, CSS variables, app.config.ts, Tailwind Variants |
| references/components.md | Component index by category (125+ 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 |
Loading Files
Consider loading these reference files based on your task:
- references/installation.md - if installing or configuring @nuxt/ui
- references/theming.md - if customizing theme, colors, or Tailwind Variants
- references/components.md - if browsing component index or finding components by category
- references/forms.md - if building forms with validation (Zod/Valibot)
- references/overlays.md - if using Toast, Modal, Slideover, Drawer, or CommandPalette
- references/composables.md - if using useToast, useOverlay, or other composables
DO NOT load all files at once. Load only what's relevant to your current task.
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
- Repository
- popey/nuxt-skills
- Commit
6b12458
- Last updated
- Created
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.