Nuxt UI

Reka UI + Tailwind CSS + Tailwind Variants で構築された Vue コンポーネントライブラリ。Nuxt、Vue (Vite)、Laravel (Vite + Inertia)、AdonisJS (Vite + Inertia) に対応します。

MCP サーバー

コンポーネント API の詳細（props、slots、events、完全なドキュメント、例）については、Nuxt UI MCP サーバーを使用してください。まだ設定されていない場合は、以下を追加します。

Cursor — .cursor/mcp.json:

{ "mcpServers": { "nuxt-ui": { "type": "http", "url": "https://ui.nuxt.com/mcp" } } }

Claude Code:

claude mcp add --transport http nuxt-ui https://ui.nuxt.com/mcp

主な MCP ツール：

• search_components — 名前、説明、またはカテゴリでコンポーネントを検索（パラメータなし = すべてをリスト表示）
• search_composables — 名前または説明で composables を検索（パラメータなし = すべてをリスト表示）
• search_icons — Iconify アイコンを検索（デフォルトは lucide）、i-{prefix}-{name} 形式の名前を返す
• get_component — 使用例付きの完全なコンポーネントドキュメント
• get_component_metadata — props、slots、events（軽量、ドキュメント内容なし）
• get_example — 実践的なコード例

コンポーネントが受け付けるものや API がどのように動作するかを知る必要があるときは MCP を使用してください。このスキルはどのコンポーネントを使うべきかと堅牢に構築する方法を教えます。

コアルール（常に適用）

1. 常に UApp でアプリをラップ — トースト、ツールチップ、プログラマティックなオーバーレイに必須。i18n 用の locale prop を受け付けます。
2. 常にセマンティックカラーを使用 — text-default、bg-elevated、border-muted など。text-gray-500 のような生の Tailwind パレットカラーは使用しないでください。
3. 生成されたテーマファイルでスロット名を確認 — Nuxt: .nuxt/ui/<component>.ts、Vue: node_modules/.nuxt-ui/ui/<component>.ts。これらはすべてのスロット、バリアント、およびコンポーネントのデフォルトクラスを表示します。
4. オーバーライド優先度（高い順）: ui prop / class prop → グローバル設定 → テーマのデフォルト。
5. アイコンは i-{collection}-{name} 形式を使用 — lucide がデフォルトコレクション。MCP search_icons ツールでアイコンを検索するか、icones.js.org で閲覧できます。

このスキルの使い方

タスクに基づいて、コードを書く前に関連するリファレンスファイルを読み込みます。すべてを読み込まず、必要なもののみ読み込みます。

リファレンスファイル

ガイドライン — デザイン決定と規約：

• design-system — セマンティックカラー、テーマ、ブランドカスタマイズ、バリアント、ui prop
• component-selection — 決定マトリックス：Modal vs Slideover、Select vs SelectMenu、Toast vs Alert など、どのコンポーネントを使うべきか
• conventions — コーディングパターン、スロット命名、items 配列、composables、キーボードショートカット
• forms — フォームバリデーション、フィールドレイアウト、エラーハンドリング、Standard Schema

レイアウト — フルページ構造パターン：

• landing — ランディングページ、ブログ、チェンジログ、価格設定
• dashboard — サイドバーとパネル付き管理 UI
• docs — ナビゲーションと目次付きドキュメントサイト
• chat — Vercel AI SDK を使用した AI チャット
• editor — ツールバー付きリッチテキストエディタ

レシピ — 一般的なタスク用の完全なパターン：

• data-tables — フィルタ、ページネーション、ソート、選択機能付きテーブル
• auth — ログイン、サインアップ、パスワード忘れフォーム
• overlays — モーダル、スライドオーバー、ドロワー、コマンドパレット
• navigation — ヘッダー、サイドバー、ブレッドクラム、タブ

クイックリファレンス：

• components — 適切なコンポーネント名を見つけるためのカテゴリ分類されたコンポーネントインデックス

ルーティングテーブル

タスク	これらのリファレンスを読み込み
ランディングページを構築	design-system、conventions、landing
ダッシュボード / 管理 UI を構築	conventions、component-selection、dashboard
設定ページを追加	conventions、forms
ログイン / サインアップフォームを作成	conventions、forms、auth
テーブルにデータを表示	conventions、component-selection、data-tables
テーマ / ブランドカラーをカスタマイズ	design-system
チャットインターフェースを追加	conventions、chat
モーダル、スライドオーバー、またはドロワーを追加	conventions、component-selection、overlays
サイトナビゲーションを構築	conventions、component-selection、navigation
ドキュメントサイトを構築	conventions、docs
Markdown をレンダリング	component-selection、components、docs
リッチテキストエディタを追加	conventions、editor
一般的な UI 作業	conventions、component-selection

インストール

Nuxt

pnpm add @nuxt/ui tailwindcss

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})

/* app/assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";

<!-- app.vue -->
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

Vue (Vite)

pnpm add @nuxt/ui tailwindcss

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui()
  ]
})

// src/main.ts
import './assets/css/main.css'
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)
const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(ui)
app.mount('#app')

/* src/assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";

<!-- src/App.vue -->
<template>
  <UApp>
    <RouterView />
  </UApp>
</template>

index.html のルート <div id="app"> に class="isolate" を追加します。 Inertia の場合：vite.config.ts で ui({ router: 'inertia' }) を使用します。