Nuxt UI skill
Nuxt UI v4 skill: an agent builds Vue and Nuxt interfaces, picks components, sets up the theme and lays out forms and dashboards
- 7,057 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The agent writes and edits interface code and installs npm packages
- For component reference the agent calls the remote MCP server at ui.nuxt.com
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/nuxt-uiDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The agent writes and edits interface code and installs npm packages
- For component reference the agent calls the remote MCP server at ui.nuxt.com
This is third-party code. Review the repository files before installing.
What it does
The `nuxt-ui` skill from the Nuxt UI repository explains to an agent how to work with a library of more than 125 components built on Reka UI and Tailwind CSS. The agent takes component props and slots from the MCP server, while the skill answers which component to choose and how to assemble a page. Five rules always apply: wrap the app in `UApp`, use semantic colors such as `text-default` and `bg-elevated`, read slot names from the generated theme files, remember the override priority and write icons as `i-{collection}-{name}`. Reference files load by task: choosing between Modal and Slideover, forms with Standard Schema, layouts for landing, dashboard, docs, chat and editor, plus data tables, sign-in forms, overlays and navigation.
Who it is for. Developers on Nuxt, Vue, Laravel or AdonisJS who hand interface work on Nuxt UI to Claude Code, Cursor or Codex.
Good fit when
- An admin panel with a sidebar and tables is built from the ready dashboard layout
- A sign-up form is validated by a Standard Schema and errors show next to the fields
- The brand is defined by colors and the app theme is set through semantic colors and the `ui` prop
- The agent doubts between Select and SelectMenu, Toast and Alert, and takes the decision table
- An AI chat is assembled on the Vercel AI SDK from a ready layout
Not a fit when
- The project uses Nuxt UI 3 or older: the skill is written for version 4
- Exact component props and events are needed: the skill takes them from the MCP server and does not store them itself
- The interface is built on React or another non-Vue stack: the library and skill target Vue
Example request
Build a sign-in page with field validation on Nuxt UI and a dashboard with a sidebar and an orders tableLimitations
The skill targets Nuxt UI v4: the repository's main branch is named `v4`. It does not store exact props, slots and events and sends the agent to the MCP server at `https://ui.nuxt.com/mcp`, which works over the network. `npx skills add nuxt/ui` pulls skills from the repository by default, and on a slow network the docs offer `npx skills add https://ui.nuxt.com`. The skill is invoked with `/nuxt-ui` in the agent chat. It is updated with the docs, so reinstalling after a new library release is useful.
How to disable. Delete the `nuxt-ui` folder from the project's skills directory or the agent's global directory. The `@nuxt/ui` library stays in the dependencies.
FAQ
How do I install the Nuxt UI skill?
Run `npx skills add nuxt/ui`. The `--agent` flag selects the agent, for example `--agent claude-code`, and `--global` installs the skill for all projects. Cursor has a one-click install button and Claude Code accepts `claude skill add` with the skill folder address.
Do I need the MCP server alongside the skill?
It is recommended: the skill teaches component choice, while the agent gets exact props, slots and events through `get-component-metadata`. Connect the server with `claude mcp add --transport http nuxt-ui https://ui.nuxt.com/mcp`.
Why does the skill forbid colors like `text-gray-500`?
The Nuxt UI theme is built on semantic colors: `text-default`, `bg-elevated`, `border-muted`. Raw palette colors break dark mode and brand retuning.
Which frameworks does Nuxt UI work with?
Nuxt, Vue on Vite, Laravel with Vite and Inertia, and AdonisJS with Vite and Inertia. The skill describes installation for each.
How do I find the right icon?
Through the MCP server's `search-icons` tool: by default it searches the `lucide` collection and returns names like `i-lucide-search`. The icones.js.org site lets you browse collections.
Discussion
No questions or reviews yet.
Related
Skillsshadcn-vue skill for agents
shadcn-vue skill
The shadcn-vue skill reads your project settings and teaches an agent to add components, forms and themes of the Vue port of shadcn/ui by its rules
Bitrix24 UI skill for Vue and Nuxt
Bitrix24 UI
Bitrix24's official skill for its 130-plus b24ui-nuxt components: which component to reach for, semantic colors, forms and ready layouts
Four official Material UI skills: styling, theming, Next.js integration and working alongside Tailwind CSS
A skill that points the agent to ready VueUse composables for Vue 3 and Nuxt, with a usage and type reference for each function
A skill that picks and installs beUI animated React components through the public MCP or the shadcn registry instead of hand-built widgets
Preline UI skills for agents: assemble Tailwind CSS component interfaces and generate themes from tokens
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Nuxt UI (this card) | yes | 7,057 | ||
| shadcn-vue skill for agents | yes | 10,781 | a skill about shadcn-vue components, not Nuxt UI | |
| Nuxt MCP Dev | no | not required | 914 | an MCP plugin for Nuxt development: it reads app state but carries no component knowledge |
README in short
The README covers library features, installation and project templates. Agents are covered in the docs: the AI section has pages on the MCP server, `llms.txt` and skills. The skills page describes five install routes and what the skill contains.
README badge
Original SKILL.md
---
name: nuxt-ui
description: 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.
---
# Nuxt UI
Vue component library built on [Reka UI](https://reka-ui.com/) + [Tailwind CSS](https://tailwindcss.com/) + [Tailwind Variants](https://www.tailwind-variants.org/). Works with Nuxt, Vue (Vite), Laravel (Vite + Inertia), and AdonisJS (Vite + Inertia).
## MCP Server
For component API details (props, slots, events, full documentation, examples), use the [Nuxt UI MCP server](https://ui.nuxt.com/docs/getting-started/ai/mcp). If not already configured, add it:
**Cursor** — `.cursor/mcp.json`:
```json
{ "mcpServers": { "nuxt-ui": { "type": "http", "url": "https://ui.nuxt.com/mcp" } } }
```
**Claude Code**:
```bash
claude mcp add --transport http nuxt-ui https://ui.nuxt.com/mcp
```
Key MCP tools:
- `search-components` — find components by name, category, or intent (no params = list all)
- `search-composables` — find composables by name or description (no params = list all)
- `search-icons` — search Iconify icons (defaults to `lucide`), returns `i-{prefix}-{name}` names
- `get-component` — full component documentation with usage examples
- `get-component-metadata` — props, slots, events (lightweight, no docs content)
- `get-example` — real-world code examples
When you need to know **what a component accepts** or **how its API works**, use the MCP. This skill teaches you **when to use which component** and **how to build well**.
## Core rules (always apply)
1. **Always wrap the app in `UApp`** — required for toasts, tooltips, and programmatic overlays. Accepts a `locale` prop for i18n.
2. **Always use semantic colors** — `text-default`, `bg-elevated`, `border-muted`, etc. Never use raw Tailwind palette colors like `text-gray-500`.
3. **Read generated theme files for slot names** — Nuxt: `.nuxt/ui/<component>.ts`, Vue: `node_modules/.nuxt-ui/ui/<component>.ts`. These show every slot, variant, and default class for any component.
4. **Override priority** (highest wins): `ui` prop / `class` prop → global config → theme defaults.
5. **Icons use `i-{collection}-{name}` format** — `lucide` is the default collection. Use the MCP `search-icons` tool to find icons, or browse at [icones.js.org](https://icones.js.org).
## How to use this skill