Nuxt Ui
Ship accessible Vue interfaces faster with Nuxt UI v4, Tailwind theming, forms, and dashboard-style layouts.
Overview
nuxt-ui is an agent skill for the Build phase that guides creation of accessible Vue UIs with @nuxt/ui v4 and the Nuxt UI MCP for accurate component APIs.
Install
npx skills add https://github.com/nuxt/ui --skill nuxt-uiWhat is this skill?
- 125+ accessible Vue components on Reka UI with Tailwind Variants
- Brand theming and form patterns for dashboards, docs, and chat UIs
- Works across Nuxt, Vue Vite, Laravel Inertia, and AdonisJS Inertia
- Nuxt UI MCP server for props, slots, events, examples, and Iconify search
- Key MCP tools: search_components, get_component, get_example, search_icons
- 125+ accessible Vue components in @nuxt/ui v4
Adoption & trust: 12.4k installs on skills.sh; 6.6k GitHub stars; 2/3 security scanners passed (skills.sh audits); trending (+100% hot-view momentum).
What problem does it solve?
You are building a Vue or Nuxt product UI but waste time guessing component props, theme tokens, and layout patterns from outdated snippets.
Who is it for?
Solo builders shipping SaaS or content sites on Nuxt/Vue who want a consistent accessible component system with AI-assisted API lookup.
Skip if: React-only stacks, native mobile UI, or projects that refuse Tailwind-based design systems.
When should I use this skill?
Creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces with @nuxt/ui v4.
What do I get? / Deliverables
You compose on-brand forms and layouts using documented Nuxt UI components and MCP-backed examples ready for implementation in your repo.
- Component and layout implementation guidance
- Theme and form composition aligned to Nuxt UI patterns
Recommended Skills
Journey fit
Interface construction is core Build work—this skill targets the frontend shelf for Nuxt and Vue apps. Component selection, theming, and layout patterns are frontend subphase tasks before ship-ready polish.
How it compares
Pair this component-library skill with the Nuxt UI MCP server rather than raw web search for prop-level accuracy.
Common Questions / FAQ
Who is nuxt-ui for?
Indie developers and agent-assisted teams building Vue or Nuxt frontends who want Nuxt UI v4 patterns and MCP-backed documentation at coding time.
When should I use nuxt-ui?
Use it during Build frontend when designing dashboards, docs sites, forms, or chat interfaces, or when customizing themes to match your brand before Ship review.
Is nuxt-ui safe to install?
The skill is documentation and MCP configuration guidance—review the Security Audits panel on this page; enabling the remote MCP adds network calls to ui.nuxt.com only.
SKILL.md
READMESKILL.md - Nuxt Ui
# 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, description, or category (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 Based on the task, load the relevant reference files **before writing any code**. Don't load everything — only what's needed. ### Reference files **Guidelines** — design decisions and conventions: - [design-system](references/guidelines/design-system.md) — semantic colors, theming, brand customization, variants, the `ui` prop - [component-selection](references/guidelines/component-selection.md) — decision matrices: when to use Modal vs Slideover, Select vs SelectMenu, Toast vs Alert, etc. - [conventions](references/guidelines/conventions.md) — coding patterns, slot naming, items arrays, composables, keyboard shortcuts - [forms](references/guidelines/forms.md) — form validation, field layout, error handling, Standard Schema **Layouts** — full page structure patterns: - [landing](references/layouts/landing.md) — landing pages, blog, changelog, pricing - [dashboard](references/layouts/dashboard.md) — admin UI with sidebar and panels - [docs](references/layouts/docs.md) — documentation sites with navigation and TOC - [chat](references/layouts/chat.md) — AI chat with Vercel AI SDK - [editor](references/layouts/editor.md) — rich text editor with toolbars **Recipes** — complete patterns for common tasks: - [data-tables](references/recipes/data-tables.md) — tables with filters, pagination, sorting, selection - [auth](references/recipes/auth.md) — login, signup, forgot password forms - [overlays](references/recipes/overlays.md) — modals, slideovers, drawers, command palette - [navigation](references/recipes/naviga