mcpField
A
ant-design-vue

ant-design-vue

github.com/partme-ai開発716223 回インストール3 週間前に更新
リポジトリ

ant-design-vue について

ant-design-vue は、Vue 3 開発者向けに Ant Design Vue のコンポーネント、API、テーマ、国際化を案内するスキルです。公式ドキュメントの構成に沿った資料に加え、プロジェクト設定やコンポーネントのテンプレートを含みます。

主な機能

  1. 01UI コンポーネントをカテゴリ別に整理
  2. 02コンポーネントと ConfigProvider API の参照案内
  3. 03テーマカスタマイズと国際化を解説
  4. 04Vite のプロジェクト設定を案内
  5. 05コンポーネント実装テンプレートを提供

活用シーン

  1. 01Vue 3 の画面で UI コンポーネントを選び実装
  2. 02コンポーネントの Props やイベントを確認
  3. 03テーマまたは国際化を設定
  4. 04Vite でプロジェクトのエントリーポイントと構成を設定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/partme-ai/full-stack-skills --skill ant-design-vue

インストール後、Claude Code で/ant-design-vueを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LICENSE.txt
api/
components.md
config-provider.md
examples/advanced/
internationalization.md
theme-customization.md
examples/components/
data-display.md
data-entry.md
feedback.md
general.md
layout.md
navigation.md
other.md
examples/getting-started/
installation.md
usage.md
templates/
component-template.md
project-setup.md

詳細

このスキルを使用するタイミング

ユーザーが以下に言及した場合は、必ずこのスキルを使用してください:

  • 「Ant Design Vue」、「AntDV」、「Ant Design of Vue」
  • Ant Design を使用した Vue 3 アプリケーションの構築
  • Vue のコンテキストで Button、Table、Form、Modal、Menu などの UI コンポーネントを使用すること
  • 「Ant Design Vue 4.x」、「AntDV 4」
  • 「Ant Design Vue で [コンポーネント] を実装して」というリクエスト
  • Ant Design Vue の API または設定に関するリクエスト

このスキルの使用方法

このスキルは、Ant Design Vue 公式ドキュメントの構成に合わせて整理されています。

1. ユーザーのニーズを特定する
  • 導入/セットアップ → examples/getting-started/installation.md または templates/project-setup.md
  • コンポーネントの使用方法 → 以下のコンポーネントカテゴリを参照してください
  • API リファレンス → api/components.md または api/config-provider.md
  • テーマ/国際化 → examples/advanced/
  • テンプレート → templates/component-template.md
2. コンポーネントカテゴリ(一対一の対応)

汎用

  • 含まれるもの:Button、Icon、Typography
  • ファイル:examples/components/general.md

レイアウト

  • 含まれるもの:Divider、Grid、Layout、Space
  • ファイル:examples/components/layout.md

ナビゲーション

  • 含まれるもの:Anchor、Breadcrumb、Dropdown、Menu、Pagination、Steps
  • ファイル:examples/components/navigation.md

データ入力

  • 含まれるもの:AutoComplete、Cascader、Checkbox、DatePicker、Form、Input、InputNumber、Mentions、Radio、Rate、Select、Slider、Switch、TimePicker、Transfer、TreeSelect、Upload
  • ファイル:examples/components/data-entry.md

データ表示

  • 含まれるもの:Avatar、Badge、Calendar、Card、Carousel、Collapse、Descriptions、Empty、Image、List、Popover、QRCode、Segmented、Statistic、Table、Tabs、Tag、Timeline、Tooltip、Tour、Tree
  • ファイル:examples/components/data-display.md

フィードバック

  • 含まれるもの:Alert、Drawer、Message、Modal、Notification、Popconfirm、Progress、Result、Skeleton、Spin、Watermark
  • ファイル:examples/components/feedback.md

その他

  • 含まれるもの:Affix、App、BackTop、ConfigProvider、FloatButton
  • ファイル:examples/components/other.md
3. API と応用トピック
  • コンポーネント API:api/components.md(一般的なコンポーネントの Props、Events)
  • ConfigProvider API:api/config-provider.md(グローバル設定、テーマ)
  • テーマのカスタマイズ:examples/advanced/theme-customization.md(デザイントークン)
  • 国際化:examples/advanced/internationalization.md
4. テンプレート
  • コンポーネントテンプレート:templates/component-template.md(基本、フォーム、モーダルのパターン)
  • プロジェクトのセットアップ:templates/project-setup.md(Vite、Main.ts、App.vue のセットアップ)

コメント