Agent skill · design visual · onmax
nuxt-ui
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.
Why this skill is useful
Provides specific patterns and configurations for using @nuxt/ui components that the AI wouldn't reliably generate on its own.
What it needs
Requires @nuxt/ui, tailwindcss installed locally. About 3k tokens when loaded. Last updated 2026-07-27. 697 stars on the source repository.
What this skill does
Nuxt UI Vue component library built on Reka UI + Tailwind CSS + Tailwind Variants. 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. If not already configured, add it: Cursor — .cursor/mcp.json: Claude Code: 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: nodemodules/.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. 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills onmax/nuxt-ui