How do I install the Nuxt UI skill?

Run npx skillmds@latest add tomevault-io/nuxt-ui-7 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Nuxt UI safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Nuxt UI?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Nuxt UI free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Nuxt UI?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Nuxt UI by tomevault-io — Agent Skill

Name: Nuxt UI
Author: tomevault-io

Nuxt UI

Use when building styled UI with @nuxt/ui v4 components (Button, Modal, Form, Table, etc.) - provides ready-to-use components with Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.

tomevault-io Updated Sep 17, 2026

File contents

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

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: nuxt-ui-7description: Use when building styled UI with @nuxt/ui v4 components (Button, Modal, Form, Table, etc.) - provides ready-to-use components with Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.---# Nuxt UI v4Component 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](references/installation.md)** | Nuxt/Vue setup, pnpm gotchas, UApp wrapper, module options || **[references/theming.md](references/theming.md)** | Semantic colors, CSS variables, app.config.ts, Tailwind Variants || **[references/components.md](references/components.md)** | Component index by category (121 components) || **components/\*.md** | Per-component details (button.md, modal.md, etc.) || **[references/forms.md](references/forms.md)** | Form components, validation (Zod/Valibot), useFormField || **[references/overlays.md](references/overlays.md)** | Toast, Modal, Slideover, Drawer, CommandPalette || **[references/composables.md](references/composables.md)** | useToast, useOverlay, defineShortcuts, useScrollspy |## Usage Pattern**Load based on context:**- Installing Nuxt UI? → [references/installation.md](references/installation.md)- Customizing theme? → [references/theming.md](references/theming.md)- Component index → [references/components.md](references/components.md)- Specific component → [components/button.md](components/button.md), [components/modal.md](components/modal.md), etc.- Building forms? → [references/forms.md](references/forms.md)- Using overlays? → [references/overlays.md](references/overlays.md)- Using composables? → [references/composables.md](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```ts// nuxt.config.tsexport default defineNuxtConfig({ modules: ['@nuxt/ui'], css: ['~/assets/css/main.css']})``````css/* assets/css/main.css */@import 'tailwindcss';@import '@nuxt/ui';``````vue<template> <UApp> <NuxtPage /> </UApp></template>```## Resources- [Nuxt UI Docs](https://ui.nuxt.com)- [Component Reference](https://ui.nuxt.com/components)- [Theme Customization](https://ui.nuxt.com/getting-started/theme)---_Token efficiency: Main skill ~300 tokens, each sub-file ~800-1200 tokens_---> Converted and distributed by [TomeVault](https://tomevault.io/claim/velidonmez) — claim your Tome and manage your conversions.

Frequently asked questions