naive-ui-skills

Naive UI スキルライブラリ

Naive UI フレームワーク向けの包括的なスキルライブラリです。AI エージェントが Naive UI コンポーネントを効果的に理解し、活用できるように設計されています。

呼び出すタイミング

次の場合にこのスキルを呼び出します。

• ユーザーが Naive UI コンポーネントを実装する必要がある場合
• ユーザーが Naive UI の設定やセットアップについて質問した場合
• ユーザーがテーマをカスタマイズしたり、ダークモードを使用したりしたい場合
• ユーザーが国際化（i18n）への対応を必要としている場合
• ユーザーがデザイン仕様（色、境界線、タイポグラフィ）について質問した場合
• ユーザーが Naive UI コンポーネントで問題に遭遇した場合

スキルライブラリの概要

このライブラリには107 個のスキルがあり、以下のカテゴリに分類されています。

カテゴリ	数	説明	パスのパターン
コンポーネントスキル	95	各コンポーネントのドキュメント	./components/n-{name}/SKILL.md
デザイン仕様	5	境界線、色、レイアウト、タイポグラフィ、概要	./naive-ui-design-{name}/SKILL.md
基礎スキル	6	クイックスタート、テーマ設定、i18n、ダークモード、SSR、コンポーネント	./naive-ui-{name}/SKILL.md

スキルの場所を確認する方法

1. コンポーネントスキル（95 個）

すべてのコンポーネントスキルは n-{component-name} という命名規則に従い、components/ ディレクトリにあります。

パスのパターン：

./components/n-{component-name}/SKILL.md

例：

• Button：./components/n-button/SKILL.md
• Form：./components/n-form/SKILL.md
• DataTable：./components/n-data-table/SKILL.md
• Dialog：./components/n-dialog/SKILL.md

2. デザイン仕様スキル（5 個）

デザインスキルでは、Naive UI のデザインシステムに関するガイダンスを提供します。

スキル名	パス	説明
境界線	./naive-ui-design-border/SKILL.md	境界線のスタイル、角丸、シャドウ
色	./naive-ui-design-color/SKILL.md	カラーパレットと色の意味
レイアウト	./naive-ui-design-layout/SKILL.md	グリッドシステムとレイアウト
タイポグラフィ	./naive-ui-design-typography/SKILL.md	フォントの規則
概要	./naive-ui-design-overview/SKILL.md	デザインシステムの概要

3. 基礎スキル（6 個）

基礎スキルでは、コアとなるセットアップと設定を扱います。

スキル名	パス	説明
クイックスタート	./naive-ui-quickstart/SKILL.md	インストールとセットアップ
テーマ設定	./naive-ui-theming/SKILL.md	テーマのカスタマイズ
i18n	./naive-ui-i18n/SKILL.md	国際化
ダークモード	./naive-ui-dark-mode/SKILL.md	ダークモードの実装
SSR	./naive-ui-ssr/SKILL.md	サーバーサイドレンダリング
コンポーネント	./naive-ui-components/SKILL.md	コンポーネントの概要インデックス

スキル呼び出しガイド

ステップ 1：ユーザーの意図を特定する

ユーザーのリクエストを分析し、必要なスキルカテゴリを判断します。

ユーザーのリクエストのパターン	スキルカテゴリ	スキルの例
「ボタン／フォーム／テーブルを作成して……」	コンポーネント	n-button、n-form、n-data-table
「Naive UI のセットアップ方法」	基礎	naive-ui-quickstart
「テーマの色をカスタマイズする」	基礎	naive-ui-theming
「多言語対応を追加する」	基礎	naive-ui-i18n
「ダークモードを実装する」	基礎	naive-ui-dark-mode
「どのような色が使えますか？」	デザイン	naive-ui-design-color
「グリッドはどのように機能しますか？」	デザイン	naive-ui-design-layout

ステップ 2：スキルファイルを探す

上記のパスのパターンを使って、適切なスキルファイルを探します。

# For component skills
./components/n-{component-name}/SKILL.md

# For design skills
./naive-ui-design-{name}/SKILL.md

# For foundation skills
./naive-ui-{name}/SKILL.md

ステップ 3：スキルの内容を読み、適用する

各スキルファイルには、以下が含まれています。

• 呼び出すタイミング：スキルを使用する具体的な条件
• 機能：コンポーネントの機能とオプション
• API リファレンス：属性、イベント、スロット、公開機能
• 使用例：一般的なパターンのコードスニペット
• ベストプラクティス：推奨される実装ガイドライン

コンポーネントスキルのインデックス

共通コンポーネント（15）

コンポーネント	スキルパス	説明
アバター	./components/n-avatar/SKILL.md	ユーザーアバター
ボタン	./components/n-button/SKILL.md	さまざまな種類と状態のボタン
カード	./components/n-card/SKILL.md	カードコンテナ
カルーセル	./components/n-carousel/SKILL.md	画像カルーセル
折りたたみ	./components/n-collapse/SKILL.md	折りたたみ可能なパネル
区切り線	./components/n-divider/SKILL.md	区切り線
ドロップダウン	./components/n-dropdown/SKILL.md	ドロップダウンメニュー
省略表示	./components/n-ellipsis/SKILL.md	テキストの省略表示
フローティングボタン	./components/n-float-button/SKILL.md	フローティングボタン
グラデーションテキスト	./components/n-gradient-text/SKILL.md	グラデーションテキスト効果
アイコン	./components/n-icon/SKILL.md	アイコンラッパーコンポーネント
ページヘッダー	./components/n-page-header/SKILL.md	ページヘッダー
タグ	./components/n-tag/SKILL.md	タグとラベル
タイポグラフィ	./components/n-typography/SKILL.md	タイポグラフィコンポーネント
透かし	./components/n-watermark/SKILL.md	透かし

データ入力コンポーネント（21）

コンポーネント	スキルパス	説明
オートコンプリート	./components/n-auto-complete/SKILL.md	候補を表示する入力
カスケーダー	./components/n-cascader/SKILL.md	階層的な選択
チェックボックス	./components/n-checkbox/SKILL.md	チェックボックス
カラーピッカー	./components/n-color-picker/SKILL.md	カラーピッカー
日付ピッカー	./components/n-date-picker/SKILL.md	日付ピッカー
動的入力	./components/n-dynamic-input/SKILL.md	動的な入力フィールド
動的タグ	./components/n-dynamic-tags/SKILL.md	動的なタグ入力
フォーム	./components/n-form/SKILL.md	フォーム管理
入力	./components/n-input/SKILL.md	テキスト入力
数値入力	./components/n-input-number/SKILL.md	数値入力
OTP 入力	./components/n-input-otp/SKILL.md	OTP 入力
メンション	./components/n-mention/SKILL.md	メンション入力
ラジオ	./components/n-radio/SKILL.md	ラジオボタン
評価	./components/n-rate/SKILL.md	星評価
セレクト	./components/n-select/SKILL.md	ドロップダウン選択
スライダー	./components/n-slider/SKILL.md	スライダー入力
スイッチ	./components/n-switch/SKILL.md	トグルスイッチ
時刻ピッカー	./components/n-time-picker/SKILL.md	時刻ピッカー
転送	./components/n-transfer/SKILL.md	転送パネル
ツリーセレクト	./components/n-tree-select/SKILL.md	ツリー選択
アップロード	./components/n-upload/SKILL.md	ファイルアップロード

データ表示コンポーネント（21）

コンポーネント	スキルパス	説明
Calendar	./components/n-calendar/SKILL.md	カレンダー表示
Code	./components/n-code/SKILL.md	コード表示
Countdown	./components/n-countdown/SKILL.md	カウントダウンタイマー
Data Table	./components/n-data-table/SKILL.md	高度なデータテーブル
Descriptions	./components/n-descriptions/SKILL.md	説明リスト
Empty	./components/n-empty/SKILL.md	空の状態
Equation	./components/n-equation/SKILL.md	数式
Heatmap	./components/n-heatmap/SKILL.md	ヒートマップの可視化
Highlight	./components/n-highlight/SKILL.md	コードのハイライト
Image	./components/n-image/SKILL.md	プレビュー付き画像
Infinite Scroll	./components/n-infinite-scroll/SKILL.md	無限スクロール
List	./components/n-list/SKILL.md	リストコンテナ
Log	./components/n-log/SKILL.md	ログ表示
Number Animation	./components/n-number-animation/SKILL.md	数値アニメーション
QR Code	./components/n-qr-code/SKILL.md	QR コード生成
Statistic	./components/n-statistic/SKILL.md	統計表示
Table	./components/n-table/SKILL.md	基本的なテーブル
Thing	./components/n-thing/SKILL.md	Thing コンテナ
Time	./components/n-time/SKILL.md	時刻表示
Timeline	./components/n-timeline/SKILL.md	タイムライン表示
Tree	./components/n-tree/SKILL.md	ツリービュー

ナビゲーションコンポーネント（9）

コンポーネント	スキルパス	説明
Affix	./components/n-affix/SKILL.md	固定配置
Anchor	./components/n-anchor/SKILL.md	アンカーナビゲーション
Back Top	./components/n-back-top/SKILL.md	ページトップへ戻るボタン
Breadcrumb	./components/n-breadcrumb/SKILL.md	パンくずナビゲーション
Loading Bar	./components/n-loading-bar/SKILL.md	ローディングバー
Menu	./components/n-menu/SKILL.md	ナビゲーションメニュー
Pagination	./components/n-pagination/SKILL.md	ページネーション
Steps	./components/n-steps/SKILL.md	ステップガイド
Tabs	./components/n-tabs/SKILL.md	タブ

フィードバックコンポーネント（16）

コンポーネント	スキルパス	説明
Alert	./components/n-alert/SKILL.md	警告メッセージ
Badge	./components/n-badge/SKILL.md	バッジとマーク
Dialog	./components/n-dialog/SKILL.md	モーダルダイアログ
Drawer	./components/n-drawer/SKILL.md	ドロワーパネル
Marquee	./components/n-marquee/SKILL.md	マーキーアニメーション
Message	./components/n-message/SKILL.md	トーストメッセージ
Modal	./components/n-modal/SKILL.md	モーダルコンテナ
Notification	./components/n-notification/SKILL.md	通知
Popconfirm	./components/n-popconfirm/SKILL.md	ポップ確認
Popover	./components/n-popover/SKILL.md	ポップオーバー
Popselect	./components/n-popselect/SKILL.md	ポップオーバー選択
Progress	./components/n-progress/SKILL.md	プログレスバー
Result	./components/n-result/SKILL.md	結果ページ
Skeleton	./components/n-skeleton/SKILL.md	ローディングスケルトン
Spin	./components/n-spin/SKILL.md	ローディングスピナー
Tooltip	./components/n-tooltip/SKILL.md	ツールチップ

レイアウトコンポーネント（6）

コンポーネント	スキルパス	説明
Flex	./components/n-flex/SKILL.md	フレックスコンテナ
Grid	./components/n-grid/SKILL.md	グリッドシステム
Layout	./components/n-layout/SKILL.md	レイアウトコンテナ
Legacy Grid	./components/n-legacy-grid/SKILL.md	レガシーグリッド
Space	./components/n-space/SKILL.md	間隔
Split	./components/n-split/SKILL.md	分割パネル

設定コンポーネント（3）

コンポーネント	スキルのパス	説明
設定プロバイダー	./components/n-config-provider/SKILL.md	グローバル設定
Element	./components/n-element/SKILL.md	Element ラッパー
グローバルスタイル	./components/n-global-style/SKILL.md	グローバルスタイル

ユーティリティコンポーネント（4）

コンポーネント	スキルのパス	説明
折りたたみトランジション	./components/n-collapse-transition/SKILL.md	折りたたみアニメーション
Discrete	./components/n-discrete/SKILL.md	Discrete API
スクロールバー	./components/n-scrollbar/SKILL.md	カスタムスクロールバー
仮想リスト	./components/n-virtual-list/SKILL.md	仮想スクロールリスト

使用例

例 1：ユーザーがボタンの実装について質問する場合

ユーザーのリクエスト：「ローディング状態のプライマリボタンを作成するにはどうすればよいですか？」

エージェントのアクション：

1. 意図を特定する：コンポーネントスキル - Button
2. スキルを見つける：./components/n-button/SKILL.md
3. スキルの内容を読む
4. API リファレンスとコード例を含む回答を提供する

回答：

<template>
  <n-button type="primary" :loading="loading" @click="handleClick">
    {{ loading ? 'Loading...' : 'Submit' }}
  </n-button>
</template>

<script setup>
import { ref } from 'vue'

const loading = ref(false)

const handleClick = async () => {
  loading.value = true
  try {
    await submitData()
  } finally {
    loading.value = false
  }
}
</script>

例 2：ユーザーがフォームのバリデーションについて質問する場合

ユーザーのリクエスト：「バリデーション付きのフォームを作成するにはどうすればよいですか？」

エージェントのアクション：

1. 意図を特定する：コンポーネントスキル - Form
2. スキルを見つける：./components/n-form/SKILL.md
3. スキルの内容を読む
4. バリデーションの例を含む回答を提供する

回答：

<template>
  <n-form ref="formRef" :model="form" :rules="rules">
    <n-form-item label="Name" path="name">
      <n-input v-model:value="form.name" />
    </n-form-item>
    <n-form-item>
      <n-button type="primary" @click="submitForm">Submit</n-button>
    </n-form-item>
  </n-form>
</template>

<script setup>
import { ref, reactive } from 'vue'

const formRef = ref()
const form = reactive({
  name: ''
})

const rules = {
  name: [
    { required: true, message: 'Please input name', trigger: 'blur' }
  ]
}

const submitForm = async () => {
  await formRef.value?.validate()
  // Submit logic
}
</script>

例 3：ユーザーがテーマのカスタマイズについて質問する場合

ユーザーのリクエスト：「Naive UI のテーマカラーをカスタマイズするにはどうすればよいですか？」

エージェントのアクション：

1. 意図を特定する：基盤スキル - テーマ設定
2. スキルを見つける：./naive-ui-theming/SKILL.md
3. スキルの内容を読む
4. テーマの上書き例を含む回答を提供する

回答：

<template>
  <n-config-provider :theme-overrides="themeOverrides">
    <App />
  </n-config-provider>
</template>

<script setup>
const themeOverrides = {
  common: {
    primaryColor: '#18a058',
    primaryColorHover: '#36ad6a',
    primaryColorPressed: '#0c7a43'
  },
  Button: {
    textColor: '#18a058'
  }
}
</script>

例 4：ユーザーがダークモードについて質問する場合

ユーザーのリクエスト：「Naive UI でダークモードを実装するにはどうすればよいですか？」

エージェントのアクション：

1. 意図を特定する：基盤スキル - ダークモード
2. スキルを見つける：./naive-ui-dark-mode/SKILL.md
3. スキルの内容を読む
4. 実装例を含む回答を提供する

回答：

<template>
  <n-config-provider :theme="isDark ? darkTheme : null">
    <App />
  </n-config-provider>
</template>

<script setup>
import { ref } from 'vue'
import { darkTheme } from 'naive-ui'

const isDark = ref(false)
</script>

設定要件

前提条件

このスキルライブラリを使用する前に、次の環境が整っていることを確認してください。

1. Vue 3.0+ がインストールされている
2. Naive UI 2.44+ がインストールされている
3. 開発用の Node.js 18+

インストール

npm install naive-ui
# or
pnpm add naive-ui

TypeScript のサポート

Naive UI は TypeScript で記述されており、すぐに使える完全な型定義を提供します。

入力パラメーター

スキルを呼び出す際は、次のパラメーターを考慮してください。

パラメーター	型	説明	必須
component	string	コンポーネント名（例：「button」、「form」）	はい
feature	string	必要な特定の機能（例：「validation」、「loading」）	いいえ
context	object	追加のコンテキスト（フレームワーク、TypeScript の使用状況）	いいえ

出力形式

各スキルでは、次の情報を提供します。

1. API リファレンス：属性、イベント、スロット、公開プロパティの完全な一覧
2. コード例：動作するコードスニペット
3. ベストプラクティス：推奨される実装パターン
4. 一般的な問題：トラブルシューティングのヒント
5. コンポーネント間の連携：他のコンポーネントとの使用方法

重要な注意事項

1. スキルの優先順位

複数のスキルが該当する場合は、次の順に優先してください。

1. コンポーネント固有のスキル（最も具体的）
2. 基盤スキル（設定）
3. デザイン仕様スキル（ガイドライン）

2. 相互参照

多くのスキルでは、関連するスキルを参照しています。次の項目を必ず確認してください。

• 同じカテゴリ内の関連コンポーネント
• 設定に関する基盤スキル
• スタイル設定のガイドラインに関するデザインスキル

3. バージョン互換性

このスキルライブラリは Naive UI 2.44+ に基づいています。それ以前のバージョンでは、一部の機能を利用できない場合があります。

4. 命名規則

• コンポーネントスキルは n-{name} 形式を使用します（Vue コンポーネントタグと一致します）
• 基盤スキルは naive-ui-{name} 形式を使用します
• デザインスキルは naive-ui-design-{name} 形式を使用します

5. ファイル構成

naive-ui-skills/
├── SKILL.md                          # This file (main entry)
├── README.md                         # English documentation
├── README_CN.md                      # Chinese documentation
├── AGENTS.md                         # Agents documentation
├── LICENSE                           # MIT License
├── components/                       # 95 component skills
│   ├── n-button/
│   │   └── SKILL.md
│   ├── n-form/
│   │   └── SKILL.md
│   └── ...
├── naive-ui-quickstart/              # Foundation skills
├── naive-ui-theming/
├── naive-ui-i18n/
├── naive-ui-dark-mode/
├── naive-ui-ssr/
├── naive-ui-components/
├── naive-ui-design-border/           # Design skills
├── naive-ui-design-color/
├── naive-ui-design-layout/
├── naive-ui-design-typography/
└── naive-ui-design-overview/

エージェント向けのベストプラクティス

1. ユーザーが Naive UI に言及した場合は、必ず最初にこのファイルを確認してください
2. ユーザーの意図に基づいて該当するスキルを特定してください
3. 回答する前にスキルファイルを最後まで読んでください
4. スキルのドキュメントからコード例を提示してください
5. 該当する場合は関連するスキルを参照してください
6. スキルの内容に基づくベストプラクティスを含めてください
7. ユーザーの状況に関連する場合はよくある問題に言及してください

関連リソース

• Naive UI ドキュメント
• Vue 3 ドキュメント
• Naive UI GitHub