element-plus-skills

Element Plus スキルライブラリ

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

呼び出すタイミング

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

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

スキルライブラリの概要

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

カテゴリ	数	説明	パスのパターン
コンポーネントスキル	77	個々のコンポーネントのドキュメント	./components/el-{name}/SKILL.md
デザイン仕様	5	ボーダー、カラー、レイアウト、タイポグラフィ、概要	./element-plus-design-{name}/SKILL.md
基盤スキル	6	クイックスタート、テーマ、i18n、ダークモード、SSR、コンポーネント	./element-plus-{name}/SKILL.md

スキルの探し方

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

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

パスのパターン:

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

例:

• Button: ./components/el-button/SKILL.md
• Form: ./components/el-form/SKILL.md
• Table: ./components/el-table/SKILL.md
• Dialog: ./components/el-dialog/SKILL.md

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

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

スキル名	パス	説明
Border	./element-plus-design-border/SKILL.md	ボーダーのスタイル、角丸、シャドウ
Color	./element-plus-design-color/SKILL.md	カラーパレットとセマンティクス
Layout	./element-plus-design-layout/SKILL.md	24 カラムグリッドシステム
Typography	./element-plus-design-typography/SKILL.md	フォントの規約
Overview	./element-plus-design-overview/SKILL.md	デザインシステムの概要

3. 基盤スキル（6 スキル）

基盤スキルは、基本的なセットアップと設定をカバーしています。

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

スキル呼び出しガイド

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

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

ユーザーリクエストのパターン	スキルカテゴリ	スキルの例
「ボタン/フォーム/テーブルを作成して…」	コンポーネント	el-button、el-form、el-table
「Element Plus のセットアップ方法は？」	基盤	element-plus-quickstart
「テーマの色をカスタマイズする」	基盤	element-plus-theming
「多言語サポートを追加する」	基盤	element-plus-i18n
「ダークモードを実装する」	基盤	element-plus-dark-mode
「どのような色が利用できますか？」	デザイン	element-plus-design-color
「グリッドはどのように動作しますか？」	デザイン	element-plus-design-layout

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

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

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

# For design skills
./element-plus-design-{name}/SKILL.md

# For foundation skills
./element-plus-{name}/SKILL.md

ステップ 3: スキルの内容を読んで適用する

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

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

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

基本コンポーネント (14)

コンポーネント	スキルパス	説明
Affix	./components/el-affix/SKILL.md	スティッキー配置
Alert	./components/el-alert/SKILL.md	アラートメッセージ
Anchor	./components/el-anchor/SKILL.md	アンカーナビゲーション
Avatar	./components/el-avatar/SKILL.md	ユーザーアバター
Backtop	./components/el-backtop/SKILL.md	トップへ戻るボタン
Badge	./components/el-badge/SKILL.md	バッジとマーク
Breadcrumb	./components/el-breadcrumb/SKILL.md	パンくずナビゲーション
Button	./components/el-button/SKILL.md	ボタン
Card	./components/el-card/SKILL.md	カードコンテナ
Carousel	./components/el-carousel/SKILL.md	画像カルーセル
Collapse	./components/el-collapse/SKILL.md	折りたたみパネル
Divider	./components/el-divider/SKILL.md	区切り線
Icon	./components/el-icon/SKILL.md	SVG アイコン
Link	./components/el-link/SKILL.md	テキストリンク
Text	./components/el-text/SKILL.md	スタイル付きテキスト

フォームコンポーネント (24)

コンポーネント	スキルパス	説明
Autocomplete	./components/el-autocomplete/SKILL.md	候補付き入力
Cascader	./components/el-cascader/SKILL.md	カスケード選択
Checkbox	./components/el-checkbox/SKILL.md	チェックボックス
ColorPicker	./components/el-color-picker/SKILL.md	カラーピッカー
ColorPicker Panel	./components/el-color-picker-panel/SKILL.md	カラーピッカーパネル
DatePicker	./components/el-date-picker/SKILL.md	日付ピッカー
DatePicker Panel	./components/el-date-picker-panel/SKILL.md	日付ピッカーパネル
DateTimePicker	./components/el-datetime-picker/SKILL.md	日時ピッカー
Form	./components/el-form/SKILL.md	フォーム管理
Input	./components/el-input/SKILL.md	テキスト入力
InputNumber	./components/el-input-number/SKILL.md	数値入力
InputTag	./components/el-input-tag/SKILL.md	タグ入力
Mention	./components/el-mention/SKILL.md	メンション入力
Radio	./components/el-radio/SKILL.md	ラジオボタン
Rate	./components/el-rate/SKILL.md	星評価
Select	./components/el-select/SKILL.md	ドロップダウン選択
Select V2	./components/el-select-v2/SKILL.md	仮想化選択
Slider	./components/el-slider/SKILL.md	スライダー入力
Switch	./components/el-switch/SKILL.md	トグルスイッチ
TimePicker	./components/el-time-picker/SKILL.md	時刻ピッカー
TimeSelect	./components/el-time-select/SKILL.md	時刻選択
Transfer	./components/el-transfer/SKILL.md	転送パネル
TreeSelect	./components/el-tree-select/SKILL.md	ツリー選択
Upload	./components/el-upload/SKILL.md	ファイルアップロード

データ表示コンポーネント (17)

コンポーネント	スキルパス	説明
Calendar	./components/el-calendar/SKILL.md	カレンダービュー
Descriptions	./components/el-descriptions/SKILL.md	説明リスト
Empty	./components/el-empty/SKILL.md	空の状態
Image	./components/el-image/SKILL.md	プレビュー付き画像
Pagination	./components/el-pagination/SKILL.md	ページネーション
Progress	./components/el-progress/SKILL.md	プログレスバー
Result	./components/el-result/SKILL.md	結果表示
Skeleton	./components/el-skeleton/SKILL.md	スケルトン
Table	./components/el-table/SKILL.md	テーブル
Table V2	./components/el-table-v2/SKILL.md	仮想化テーブル
Tag	./components/el-tag/SKILL.md	タグ
Timeline	./components/el-timeline/SKILL.md	タイムライン
Tree	./components/el-tree/SKILL.md	ツリービュー
Tree V2	./components/el-tree-v2/SKILL.md	仮想化ツリー
Statistic	./components/el-statistic/SKILL.md	統計表示
Segmented	./components/el-segmented/SKILL.md	セグメントコントロール

ナビゲーションコンポーネント (8)

コンポーネント	スキルパス	説明
Dropdown	./components/el-dropdown/SKILL.md	ドロップダウンメニュー
Menu	./components/el-menu/SKILL.md	ナビゲーションメニュー
PageHeader	./components/el-page-header/SKILL.md	ページヘッダー
Steps	./components/el-steps/SKILL.md	ステップガイド
Tabs	./components/el-tabs/SKILL.md	タブ

フィードバックコンポーネント (12)

コンポーネント	スキルパス	説明
Dialog	./components/el-dialog/SKILL.md	モーダルダイアログ
Drawer	./components/el-drawer/SKILL.md	ドロワーパネル
Loading	./components/el-loading/SKILL.md	ローディングオーバーレイ
Message	./components/el-message/SKILL.md	トーストメッセージ
MessageBox	./components/el-message-box/SKILL.md	メッセージボックス
Notification	./components/el-notification/SKILL.md	通知
Popconfirm	./components/el-popconfirm/SKILL.md	ポップ確認
Popover	./components/el-popover/SKILL.md	ポップオーバー
Tooltip	./components/el-tooltip/SKILL.md	ツールチップ
Tour	./components/el-tour/SKILL.md	プロダクトツアー

レイアウトコンポーネント (4)

コンポーネント	スキルパス	説明
Container	./components/el-container/SKILL.md	レイアウトコンテナ
Space	./components/el-space/SKILL.md	スペーシング
Splitter	./components/el-splitter/SKILL.md	分割パネル

ユーティリティコンポーネント (5)

コンポーネント	スキルパス	説明
ConfigProvider	./components/el-config-provider/SKILL.md	グローバル設定
InfiniteScroll	./components/el-infinite-scroll/SKILL.md	無限スクロール
Scrollbar	./components/el-scrollbar/SKILL.md	カスタムスクロールバー
Watermark	./components/el-watermark/SKILL.md	ウォーターマーク

使用例

例 1: ユーザーがボタンの実装について質問

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

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

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

回答:

<template>
  <el-button type="primary" :loading="loading" @click="handleClick">
    {{ loading ? 'Loading...' : 'Submit' }}
  </el-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/el-form/SKILL.md
3. スキルの内容を読み取る
4. バリデーションの例を含む回答を提供

回答:

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="Name" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">Submit</el-button>
    </el-form-item>
  </el-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: ユーザーがテーマのカスタマイズについて質問する

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

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

1. 意図を特定: 基盤スキル - テーマ設定
2. スキルを特定: ./element-plus-theming/SKILL.md
3. スキルの内容を読み込む
4. CSS 変数の例を含む回答を提供する

回答:

:root {
  --el-color-primary: #409eff;
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: #909399;
}

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

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

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

1. 意図を特定: 基盤スキル - ダークモード
2. スキルを特定: ./element-plus-dark-mode/SKILL.md
3. スキルの内容を読み込む
4. 実装例を含む回答を提供する

回答:

<template>
  <el-config-provider :locale="locale" :size="size">
    <div :class="{ 'dark': isDark }">
      <App />
    </div>
  </el-config-provider>
</template>

<style>
.dark {
  color-scheme: dark;
}
</style>

設定要件

前提条件

このスキルライブラリを使用する前に、以下を確認してください:

1. Vue 3.3+ がインストールされている
2. Element Plus 2.4+ がインストールされている
3. 開発用に Node.js 18+ がある

インストール

npm install element-plus
npm install @element-plus/icons-vue

TypeScript サポート

tsconfig.json に追加します:

{
  "compilerOptions": {
    "types": ["element-plus/global"]
  }
}

入力パラメータ

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

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

出力形式

各スキルは以下を提供します:

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

重要な注意事項

1. スキルの優先順位

複数のスキルが該当する可能性がある場合は、次の順序で優先します:

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

2. 相互参照

多くのスキルは関連するスキルを参照しています。常に以下を確認してください:

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

3. バージョン互換性

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

4. 命名規則

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

5. ファイル構造

element-plus-skills/
├── SKILL.md                          # This file (main entry)
├── README.md                         # English documentation
├── README_CN.md                      # Chinese documentation
├── AGENTS.md                         # Agents documentation
├── components/                       # 77 component skills
│   ├── el-button/
│   │   └── SKILL.md
│   ├── el-form/
│   │   └── SKILL.md
│   └── ...
├── element-plus-quickstart/          # Foundation skills
├── element-plus-theming/
├── element-plus-i18n/
├── element-plus-dark-mode/
├── element-plus-ssr/
├── element-plus-components/
├── element-plus-design-border/       # Design skills
├── element-plus-design-color/
├── element-plus-design-layout/
├── element-plus-design-typography/
└── element-plus-design-overview/

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

1. ユーザーが Element Plus に言及したら、常にこのファイルから始める
2. ユーザーの意図に基づいて特定のスキルを探す
3. 回答する前にスキルファイル全体を読む
4. スキルのドキュメントからコード例を提示する
5. 該当する場合は関連スキルを参照する
6. スキルの内容からベストプラクティスを含める
7. ユーザーのコンテキストに関連する場合はよくある問題に言及する

関連リソース

• Element Plus ドキュメント
• Vue 3 ドキュメント
• Element Plus GitHub
• Element Plus アイコン