mcpField
A
ant-design-mini

ant-design-mini

github.com/full-stack-skillsデザイン・UI256 回インストール4 週間前に更新
リポジトリ

ant-design-mini について

Ant Design Miniのドキュメントを案内するスキルです。Alipay Mini ProgramとWeChat Mini Program向けのUIコンポーネントライブラリについて、導入、コンポーネント、カスタマイズ、APIの例を探せます。

主な機能

  1. 01インストールとセットアップの案内
  2. 02コンポーネントの例とテンプレート
  3. 03コンポーネントAPIとイベントの参照
  4. 04テーマと国際化の案内
  5. 05AlipayとWeChatの構文メモ

活用シーン

  1. 01ミニプログラムのプロジェクトにAnt Design Miniを導入
  2. 02フォームやナビゲーションコンポーネントの使い方を確認
  3. 03テーマをカスタマイズしてコンポーネントイベントを処理
  4. 04コンポーネントAPIの利用方法を調べる

インストール

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

$npx skills add https://github.com/full-stack-skills/antd-skills --skill ant-design-mini

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

同梱ファイル

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

LICENSE.txt
agents/
openai.yaml
api/
component-api.md
props-and-events.md
examples/
getting-started.md
quick-start.md
examples/components/
action-sheet.md
avatar.md
badge.md
button.md
card.md
checkbox.md
date-picker.md
empty.md
form.md
input.md
list.md
loading.md
modal.md
nav-bar.md
overview.md
picker.md
popup.md
radio.md
stepper.md
switch.md
tabs.md
tag.md
toast.md
templates/
component-usage.md

詳細

このスキルを使用する場面

ユーザーが以下を希望する場合は、このスキルを使用します。

  • ミニプログラムプロジェクトに Ant Design Mini をインストールしてセットアップする
  • Alipay Mini Program で Ant Design Mini のコンポーネントを使用する
  • WeChat Mini Program で Ant Design Mini のコンポーネントを使用する
  • Ant Design Mini（テーマ、i18n など）を設定する
  • フォームコンポーネント（Button、Input、Form など）を使用する
  • データ表示コンポーネント（List、Card など）を使用する
  • フィードバックコンポーネント（Toast、Modal など）を使用する
  • ナビゲーションコンポーネント（Tabs、NavBar など）を使用する
  • コンポーネントのスタイルをカスタマイズする
  • コンポーネントのイベントを処理する
  • Ant Design Mini の API とメソッドを理解する
  • Ant Design Mini の問題をトラブルシューティングする

このスキルの使い方

このスキルは、Ant Design Mini の公式ドキュメントの構成（https://ant-design-mini.antgroup.com/guide/quick-start、https://ant-design-mini.antgroup.com/components/overview）に合わせて整理されています。Ant Design Mini を使用する場合は、次の手順に従います。

  1. ユーザーのリクエストからトピックを特定します。

    • はじめに／クイックスタート → examples/getting-started.md
    • コンポーネント／コンポーネント → examples/components/
    • API／API ドキュメント → api/

  2. examples/ ディレクトリから該当するサンプルファイルを読み込みます。

    はじめに（クイックスタート）：

    • examples/getting-started.md - インストールとセットアップ
    • examples/quick-start.md - クイックスタートガイド

    コンポーネント：

    • examples/components/overview.md - コンポーネントの概要
    • examples/components/button.md - Button コンポーネント
    • examples/components/input.md - Input コンポーネント
    • examples/components/form.md - Form コンポーネント
    • examples/components/list.md - List コンポーネント
    • examples/components/card.md - Card コンポーネント
    • examples/components/toast.md - Toast コンポーネント
    • examples/components/modal.md - Modal コンポーネント
    • examples/components/tabs.md - Tabs コンポーネント
    • examples/components/nav-bar.md - NavBar コンポーネント
    • examples/components/picker.md - Picker コンポーネント
    • examples/components/date-picker.md - DatePicker コンポーネント
    • examples/components/switch.md - Switch コンポーネント
    • examples/components/checkbox.md - Checkbox コンポーネント
    • examples/components/radio.md - Radio コンポーネント
    • examples/components/stepper.md - Stepper コンポーネント
    • examples/components/avatar.md - Avatar コンポーネント
    • examples/components/badge.md - Badge コンポーネント
    • examples/components/tag.md - Tag コンポーネント
    • examples/components/empty.md - Empty コンポーネント
    • examples/components/loading.md - Loading コンポーネント
    • examples/components/popup.md - Popup コンポーネント
    • examples/components/action-sheet.md - ActionSheet コンポーネント

  3. 構文、構成、ベストプラクティスについては、該当するサンプルファイルの指示に従います。

    重要な注意事項：

    • Ant Design Mini は Alipay Mini Program と WeChat Mini Program 向けです
    • コンポーネントではミニプログラムの構文（axml/json）を使用します
    • サンプルには Alipay と WeChat の両方の構文が含まれています
    • 各サンプルファイルには、主要な概念、コード例、重要なポイントが含まれています

  4. 必要に応じて、api/ ディレクトリの API ドキュメントを参照します。

    • api/component-api.md - コンポーネント API リファレンス
    • api/props-and-events.md - Props とイベントのリファレンス

  5. templates/ ディレクトリのテンプレートを使用します。

    • templates/installation.md - インストール用テンプレート
    • templates/component-usage.md - コンポーネント使用用テンプレート
1. Ant Design Mini の概要

Ant Design Mini は、Ant Design のデザイン仕様に準拠した、Alipay Mini Program および WeChat Mini Program 向けの UI コンポーネントライブラリです。

主な概念：

  • ミニプログラムのサポート：Alipay と WeChat のミニプログラム
  • デザインシステム：Ant Design のデザイン言語に準拠
  • 豊富なコンポーネント：Button、Form、List、Modal など
  • テーマのカスタマイズ：テーマのカスタマイズに対応
  • i18n：国際化に対応
2. インストール

npm を使用する場合：

npm install antd-mini

yarn を使用する場合：

yarn add antd-mini

pnpm を使用する場合：

pnpm add antd-mini
3. 基本的なセットアップ
// app.json (Alipay Mini Program)
{
  "usingComponents": {
    "ant-button": "antd-mini/es/Button/index"
  }
}


<ant-button type="primary" onTap="handleTap">Button</ant-button>
ドキュメントの対応関係（公式ドキュメントと1対1で対応）

ガイド（指南）：

コンポーネント（组件）：

サンプルとテンプレート

このスキルには、公式ドキュメントの構成に合わせて整理された詳細なサンプルが含まれています。すべてのサンプルは examples/ ディレクトリにあります（上記の対応関係を参照）。

サンプルを使用するには：

  • ユーザーのリクエストからトピックを特定します
  • 上記の対応関係をもとに、適切なサンプルファイルを読み込みます
  • そのファイルの手順、構文、ベストプラクティスに従います
  • コードサンプルを具体的なユースケースに合わせて調整します

テンプレートを使用するには：

  • よくあるひな形については、templates/ ディレクトリのテンプレートを参照します
  • テンプレートを必要性やコーディングスタイルに合わせて調整します

API リファレンス

詳細な API ドキュメントは api/ ディレクトリにあり、公式の Ant Design Mini API ドキュメントの構成に合わせて整理されています。

コンポーネント API（api/component-api.md）
  • コンポーネントの props とイベント
  • コンポーネントのメソッド
  • コンポーネントのスロット
Props とイベント（api/props-and-events.md）
  • 共通の props
  • 共通のイベント
  • イベント処理

API リファレンスを使用するには：

  1. 確認が必要な API を特定します
  2. api/ ディレクトリから対応する API ファイルを読み込みます
  3. API のシグネチャ、パラメーター、戻り値の型、サンプルを確認します
  4. 詳細な使用パターンについては、リンク先のサンプルファイルを参照します
  5. すべての API ファイルには、examples/ ディレクトリ内の関連するサンプルファイルへのリンクが含まれています

ベストプラクティス

  1. コンポーネントを登録する：app.json または page.json にコンポーネントを登録します
  2. 正しい構文を使用する：Alipay では axml、WeChat では wxml を使用します
  3. イベントを処理する：Alipay では onTap、WeChat では bindtap を使用します
  4. テーマをカスタマイズする：カスタマイズにはテーマ変数を使用します
  5. デザイン仕様に従う：Ant Design のデザイン仕様に従います

リソース

キーワード

Ant Design Mini, ant-design-mini, antd-mini, ミニプログラム, Alipay ミニプログラム, WeChat ミニプログラム, 小程序, 支付宝小程序, 微信小程序, 组件库, UI コンポーネント, Button, Form, List, Modal, Toast, Tabs, NavBar, 按钮, 表单, 列表, 弹窗, 提示, 标签页, 导航栏

コメント

Markdown 対応