← ClaudeAtlas

nuxt-uilisted

Use when building styled UI with @nuxt/ui v4 components — forms, data tables, modals, theming. Use vue for raw patterns, reka-ui for headless.
YuDefine/nuxt-supabase-starter · ★ 45 · Web & Frontend · score 83
Install: claude install-skill YuDefine/nuxt-supabase-starter
<!-- 🔒 LOCKED — managed by clade · auto-generated by sync-to-agents; edit source in .claude/ then re-run sync --> # 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" } } } ``` **AI Agent**: ```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