Nuxt UI Skill: Vue Components, Themes and Layout Recipes

What is the nuxt-ui skill?

The nuxt-ui skill ships inside the Nuxt UI library repository itself, on the v4 branch. Its description covers building UIs with more than 125 accessible Vue components, theming them to a brand, building forms and composing dashboards, docs sites and chat screens.

The skill separates two jobs. The Nuxt UI MCP server answers what a component accepts. The skill answers which component to use and how to build well, and it loads only the reference files a task needs.

Five core rules that always apply

1. Wrap the app in UApp, which toasts, tooltips and programmatic overlays require, and which accepts a locale prop.
2. Use semantic colors such as text-default and border-muted, never raw palette colors like text-gray-500.
3. Read the generated theme file for a component to learn its slot names, variants and default classes.
4. Follow the override order: the ui or class prop wins, then global config, then theme defaults.
5. Write icons as i-collection-name, with lucide as the default collection.

Reference files grouped by job

• Guidelines: design system, component selection, conventions and forms.
• Layouts: landing, dashboard, docs, chat and editor.
• Recipes: data tables, auth, overlays and navigation.
• A categorized component index, for finding the right component name.

Who the nuxt-ui skill is for

Best for

• Vue and Nuxt projects that use, or will adopt, Nuxt UI v4. The skill also notes it works with Vue on Vite, Laravel with Inertia and AdonisJS.
• Settings pages, login forms, tables and dashboards where picking the right component, such as Modal versus Slideover, matters. Related form guidance is in form-design.
• Brand theming through semantic tokens. See design-token for the wider idea.

Not for

• Projects on another UI library or on React. If you are still choosing, pick-ui-library compares the options.
• Looking up exact props and events from memory. The skill sends you to the MCP server for component APIs.
• Pure Tailwind work with no component library. Try tailwind-design-system instead.

Use it with UiChemy

A Nuxt UI app is a Vue codebase, so it does not import into WordPress as code. If the interface is designed in Figma, UiChemy Figma to WordPress converts the frames. For an AI-made page, use AI to WordPress. Click Get Started on uichemy.com.

Planning a screen before building helps either route. The skill's layout files for landing pages, dashboards and docs give a ready structure, and a short component-spec makes the intended states and props explicit.

How to install Nuxt UI Skill: Vue Components, Themes and Layout Recipes

git clone https://github.com/nuxt/ui.git

1. Clone the repository

   Run git clone https://github.com/nuxt/ui.git. The skill is in skills/nuxt-ui on the v4 branch, which is the default branch.

2. Copy the skill folder

   Copy skills/nuxt-ui into the place your agent loads skills from, keeping the references folder with its guidelines, layouts and recipes beside SKILL.md.

3. Add the Nuxt UI MCP server

   For component details, the skill recommends the server at ui.nuxt.com. For Claude Code, run claude mcp add --transport http nuxt-ui https://ui.nuxt.com/mcp. For Cursor, add the same HTTP URL to .cursor/mcp.json.

4. Install the library in your project

   The skill's setup section uses pnpm add @nuxt/ui tailwindcss, then registers the module in nuxt.config.ts or the plugin in vite.config.ts, and imports Tailwind CSS and Nuxt UI in your main CSS file.

Check that it loaded

Ask the agent for a login form. It should wrap the app in UApp, use semantic color classes, follow the forms and auth references, and consult the MCP server for component props instead of guessing them.

Read the official instructions on GitHub

Key features

• UApp wrapper ruleEvery app is wrapped in UApp, which the skill calls required for toasts, tooltips and programmatic overlays, with a locale prop available for translation.
• Semantic color vocabularyNames such as text-default and border-muted replace raw Tailwind palette values, so the theme can change without rewriting every class.
• Theme file lookupFor slot names, the agent reads .nuxt/ui/<component>.ts in Nuxt or node_modules/.nuxt-ui/ui/<component>.ts in Vue, which list every slot, variant and default class.
• Override priorityThe ui prop or class prop has the highest priority, then the global configuration, then theme defaults, so the agent changes the narrowest layer that does the job.
• Task routing tableThirteen task types, from landing page to rich text editor, each list which reference files to load first. Nothing is loaded that the task does not need.
• Component selection matricesDecision guidance for pairs such as Modal versus Slideover, Select versus SelectMenu and Toast versus Alert, so the agent chooses by purpose and not by habit.
• Full page layoutsPatterns for landing pages with blog, changelog and pricing, admin dashboards with sidebar and panels, docs sites with navigation and table of contents, AI chat with the Vercel AI SDK, and editors.
• Common recipesTables with filters, pagination, sorting and selection, login, signup and forgot password forms, overlays including a command palette, and headers, sidebars, breadcrumbs and tabs.
• MCP companion toolsThe skill names six server tools: search-components, search-composables, search-icons, get-component, get-component-metadata and get-example. Icon search defaults to lucide.
• Setup for Nuxt and VueInstallation steps cover the Nuxt module, the Vite plugin for Vue, the Tailwind CSS imports, an isolate class on the root element and an Inertia router option.

Frequently asked questions