Nuxt UI Skill: Build Vue and Nuxt Interfaces With Claude

nuxt-ui teaches Claude to build interfaces with Nuxt UI v4 (Vue and Tailwind), choosing components, theming, and laying out forms, dashboards, docs and chat.

Installs: 20K; on skills.sh
Stars: 7K; on GitHub
Files: 14; besides SKILL.md
Updated: Nov 2026; last repo commit

The skill loads when you create interfaces, customize a theme, build forms, or compose layouts like dashboards, docs sites and chat screens with Nuxt UI. SKILL.md sets five core rules: wrap the app in UApp, use semantic colors instead of raw Tailwind colors, read the generated theme files for slot names, know the override order, and use i-{collection}-{name} icons.

It then routes each task to the right reference files, so Claude loads only what it needs. These cover design system, component choice (such as Modal vs Slideover), conventions and forms, five page layouts, and four recipes for data tables, auth, overlays and navigation.

For exact props, slots and events, SKILL.md points Claude to the Nuxt UI MCP server, and shows how to add it. The skill supports Nuxt, plain Vue with Vite, Laravel and AdonisJS (both with Inertia).

Good for

Nuxt and Vue developers building apps with Nuxt UI v4
Teams building dashboards, landing pages, docs sites or chat screens
Developers matching a brand with theme colors

Install nuxt-ui

Claude Code

Copy this prompt.

Install the nuxt-ui skill in Claude Code. Run this command:

npx skills add https://github.com/nuxt/ui --skill nuxt-ui

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.

Sections in SKILL.md

MCP Server
Core rules (always apply)
How to use this skill
Reference files
Routing table
Installation
Nuxt
Vue (Vite)

Key facts

Author: Nuxt (GitHub: nuxt)
Repo: nuxt/ui
Installs on skills.sh: 20,039 as of 2026-11-02
GitHub stars (whole repo): 7,042 as of 2026-11-02
License: MIT
Last repo commit: 2026-11-01
Files in the skill folder: 15 files including SKILL.md
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass

What it includes

UApp, semantic colors, theme files, overrides, icons
Five rules that apply to all Nuxt UI work.
Core rules
Design system, component selection, conventions, forms
Decision matrices, slot naming and form validation with Standard Schema.
guidelines/
Landing, dashboard, docs, chat and editor pages
Full page structures. The chat layout uses the Vercel AI SDK.
layouts/
Data tables, auth forms, overlays, navigation
Complete patterns, such as login and signup forms and tables with filters and pagination.
recipes/
Index of 125+ components by category
Helps Claude find the right component name.
components.md
Which references to load per task
For example landing page: design-system, conventions, landing.
Routing table
search-components, get-component, get-example and more
Remote tools for component docs at https://ui.nuxt.com/mcp. SKILL.md shows how to add it for Cursor and Claude Code.
Network · Nuxt UI MCP server
Nuxt and Vue (Vite) setup
Shows pnpm add @nuxt/ui tailwindcss, the module or plugin config and the CSS imports.
Runs code · Installation steps

From the official docs

Permissions

Low risk

The skill is documentation, but it tells Claude to add a remote MCP server and install packages with pnpm. Approve each of those steps yourself.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It suggests adding a remote MCP server
SKILL.md shows claude mcp add --transport http nuxt-ui https://ui.nuxt.com/mcp. That adds a server to your Claude Code setup, so decide whether you want it. github.com
It installs packages in your project
The installation section uses pnpm add @nuxt/ui tailwindcss, and the chat guide adds the ai package and others. Review lockfile changes. github.com
The chat example calls an AI model
The chat guide's server endpoint example calls a model through Vercel AI Gateway (marked recommended) or a direct provider such as @ai-sdk/openai. chat.md does not describe how to authenticate, so check your provider's setup before you build that screen. github.com

Technical details

Talks to	https://ui.nuxt.com/mcp. npm registry (pnpm add)
Scopes	your Vue or Nuxt project Nuxt UI MCP server (read-only docs)

Questions

What does the nuxt-ui skill do?

It teaches Claude how to build with Nuxt UI v4: which component fits a task, how to theme with semantic colors, and how to structure forms, dashboards, docs, chat and editor pages.

How do I install it in Claude Code or Codex?

Use the install box above. SKILL.md also shows how to add the Nuxt UI MCP server to Claude Code, which is separate from installing the skill.

Do I need the Nuxt UI MCP server?

SKILL.md uses it for exact component details: props, slots, events and examples. The skill itself covers when to use which component. If the server is not configured, the skill tells Claude to add it.

Does it need an API key?

The skill itself names none. Only the chat layout calls a model, through Vercel AI Gateway (marked recommended) or a direct provider such as @ai-sdk/openai. chat.md does not say how to authenticate, so check your provider's docs if you build that screen.

Is it safe to install?

The folder is 15 markdown files with no scripts. Following it can make Claude add a remote MCP server and run pnpm to add packages, so approve those steps yourself.

Does it work outside Nuxt?

Yes. SKILL.md says Nuxt UI works with Nuxt, Vue (Vite), Laravel (Vite + Inertia) and AdonisJS (Vite + Inertia), and gives Vue setup steps.

Information

updated Nov 2, 2026

Repository: nuxt/ui
Folder: skills/nuxt-ui

nuxt/ui skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3

nuxt-ui SKILL.md · github.com
nuxt/ui README · github.com
nuxt-ui chat layout · github.com