ant-design-vue について
ant-design-vue は、Vue 3 開発者向けに Ant Design Vue のコンポーネント、API、テーマ、国際化を案内するスキルです。公式ドキュメントの構成に沿った資料に加え、プロジェクト設定やコンポーネントのテンプレートを含みます。
主な機能
- 01UI コンポーネントをカテゴリ別に整理
- 02コンポーネントと ConfigProvider API の参照案内
- 03テーマカスタマイズと国際化を解説
- 04Vite のプロジェクト設定を案内
- 05コンポーネント実装テンプレートを提供
活用シーン
- 01Vue 3 の画面で UI コンポーネントを選び実装
- 02コンポーネントの Props やイベントを確認
- 03テーマまたは国際化を設定
- 04Vite でプロジェクトのエントリーポイントと構成を設定
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ partme-ai/ full-stack-skills --skill ant-design-vueインストール後、Claude Code で/ant-design-vueを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
LICENSE.txtapi/components.mdconfig-provider.mdexamples/advanced/internationalization.mdtheme-customization.mdexamples/components/data-display.mddata-entry.mdfeedback.mdgeneral.mdlayout.mdnavigation.mdother.mdexamples/getting-started/installation.mdusage.mdtemplates/component-template.mdproject-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 のセットアップ)
コメント
Markdown 対応