Ant Design CLI
あなたは @ant-design/cli にアクセスできます。これは、v4/v5/v6 向けのantdメタデータ(v3→v4、v4→v5、v5→v6の移行ガイドも含む)をバンドルしたローカルCLIツールです。これを使用して、コンポーネントの知識を照会したり、プロジェクトを分析したり、移行をガイドしたりできます。すべてのデータはオフラインで利用でき、ネットワークは必要ありません。
セットアップ
初回使用前に、CLIがインストールされているか確認してください。インストールされていない場合は、自動的にインストールします。
which antd || npm install -g @ant-design/cli
コマンド実行後、出力に「Update available」という通知が含まれている場合は、続行する前に antd upgrade を実行して更新してください。
プログラムで解析できる構造化出力を得るには、常に --format json を使用してください。
シナリオ
1. antdコンポーネントコードの作成
antdコンポーネントコードを作成する前に、まずそのAPIを調べてください。記憶に頼らないでください。
# 利用可能なプロパティを確認
antd info Button --format json
# 出発点として動作するデモを取得
antd demo Button basic --format json
# カスタムスタイリングのためのセマンティッククラス名/スタイルを確認
antd semantic Button --format json
# テーマ設定のためのコンポーネントレベルのデザイントークンを確認
antd token Button --format json
# 全体的なデザイン言語(design.md):色、タイポグラフィ、スペーシング、半径+原則を取得
antd design.md --format json
ワークフロー: antd info → プロップスを理解 → antd demo → 動作例を取得 → コードを作成
2. 完全なドキュメントの参照
プロップスだけでなく包括的なコンポーネントドキュメントが必要な場合:
antd doc Table --format json # Tableの完全なマークダウンドキュメント
antd doc Table --lang zh # 中国語のドキュメント
3. antdの問題のデバッグ
コードが期待通りに動作しない場合、またはユーザーがantdのバグを報告した場合:
# 完全な環境スナップショットを収集(システム、依存関係、ブラウザ、ビルドツール)
# 出力にはシステム情報が含まれ、問題のトラブルシューティングに役立ちます
antd env --format json
# ユーザーのantdバージョンに対してプロップが存在するか確認
antd info Select --version 5.12.0 --format json
# プロップが非推奨かどうか確認
antd lint ./src/components/MyForm.tsx --format json
# プロジェクトレベルの設定問題を診断
antd doctor --format json
ワークフロー: antd env → 完全な環境を取得 → antd doctor → 設定を確認 → antd info --version X → ユーザーの正確なバージョンに対してAPIを検証 → antd lint → 非推奨または誤った使用法を発見
4. バージョン間の移行
ユーザーがantdをアップグレードしたい場合(例:v3→v4、v4→v5):
# 完全な移行チェックリストを取得
antd migrate 3 4 --format json # v3 → v4
antd migrate 4 5 --format json # v4 → v5
# 特定のコンポーネントの移行を確認
antd migrate 4 5 --component Select --format json
# エージェント向けの自動移行プロンプトを生成(ファイルは変更しません)
antd migrate 4 5 --apply ./src --format json
# 2つのバージョン間の変更点を確認
antd changelog 4.24.0 5.0.0 --format json
# 特定のコンポーネントの変更点を確認
antd changelog 4.24.0 5.0.0 Select --format json
ワークフロー: antd migrate → 完全なチェックリストを取得 → antd changelog <v1> <v2> → 破壊的変更を理解 → 修正を適用 → antd lint → 非推奨の使用が残っていないか確認
5. プロジェクトのantd使用状況の分析
ユーザーが自分のプロジェクトでantdがどのように使用されているかを理解したい場合:
# コンポーネントの使用統計をスキャン
antd usage ./src --format json
# 特定のコンポーネントにフィルタリング
antd usage ./src --filter Form --format json
# ベストプラクティス違反をリント
antd lint ./src --format json
# 特定のルールカテゴリのみを確認
antd lint ./src --only deprecated --format json
antd lint ./src --only a11y --format json
antd lint ./src --only performance --format json
6. 変更履歴とバージョン履歴の確認
ユーザーがバージョンでの変更点について質問した場合:
# 特定のバージョンの変更履歴
antd changelog 5.22.0 --format json
# バージョン範囲(両端を含む)
antd changelog 5.21.0..5.24.0 --format json
7. 利用可能なコンポーネントの探索
ユーザーがどのコンポーネントを使用すべきか選んでいる場合:
# すべてのコンポーネントをカテゴリ付きで一覧表示
antd list --format json
# 特定のantdバージョンのコンポーネントを一覧表示
antd list --version 5.0.0 --format json
8. 環境情報の収集
プロジェクトのantdセットアップを理解する必要がある場合、またはバグレポートの情報を準備する場合:
# 完全な環境スナップショット(テキスト — GitHub Issuesに貼り付け可能)
antd env
# プログラムで使用するための構造化JSON
antd env --format json
# 特定のプロジェクトディレクトリをスキャン
antd env ./my-project --format json
収集する情報:OS、Node、パッケージマネージャー(npm/pnpm/yarn/bun/utoo)、npmレジストリ、ブラウザ、コア依存関係(antd/react/dayjs)、すべての @ant-design/* および rc-* パッケージ、ビルドツール(umi/vite/webpack/typescript/など)。
9. antdのバグ報告
ユーザーがantdのバグを報告するよう依頼した場合:
# ステップ0:参照用に環境情報を収集(オプション — antd bugは基本的な環境を既に埋め込みます)
# 出力を使用してバージョンを相互確認したり、バグレポートに追加の詳細を添付したりします
antd env --format json
# ステップ1:ユーザーレビュー用にプレビュー
antd bug --title "日付選択時にDatePickerがクラッシュする" \
--reproduction "https://codesandbox.io/s/xxx" \
--steps "1. DatePickerを開く 2. 日付をクリック" \
--expected "日付が選択される" \
--actual "コンポーネントがエラーでクラッシュする" \
--format json
# ステップ2:ユーザーに表示し、確認を求める
# ステップ3:ユーザーが確認したら送信
antd bug --title "日付選択時にDatePickerがクラッシュする" \
--reproduction "https://codesandbox.io/s/xxx" \
--steps "1. DatePickerを開く 2. 日付をクリック" \
--expected "日付が選択される" \
--actual "コンポーネントがエラーでクラッシュする" \
--submit
10. CLIの問題報告
ユーザーがCLIのバグを報告するよう依頼した場合、または明示的に報告を依頼した場合:
# ユーザー向けにバグレポートをプレビュー
antd bug-cli --title "antd info Buttonがv5.12.0で間違ったプロップスを返す" \
--description "バージョン5.12.0のButtonプロップスを照会すると、そのバージョンに存在しないプロップスが出力に含まれます" \
--steps "1. 実行: antd info Button --version 5.12.0 --format json" \
--expected "antd 5.12.0のButton APIと一致するプロップス" \
--actual "'classNames'が含まれていますが、これは5.16.0で追加されました" \
--format json
レポートをユーザーに表示し、送信前に確認を得てください:
antd bug-cli --title "antd info Buttonがv5.12.0で間違ったプロップスを返す" \
--description "..." \
--steps "..." \
--expected "..." \
--actual "..." \
--submit
オプトアウト: 環境変数 ANTD_NO_AUTO_REPORT=1 が設定されている場合、バグ報告の提案をすべてスキップしてください。ユーザーが直接依頼しない限り、antd bug や antd bug-cli を提案しないでください。
11. CLIのアップグレード
ユーザーが @ant-design/cli を最新バージョンに更新したい場合、または「Update available」通知が表示された場合:
# 最新バージョンにアップグレード(パッケージマネージャーを自動検出)
antd upgrade
このコマンドは、CLIをインストールしたパッケージマネージャー(npm、yarn、pnpm、bun、cnpm、utoo)を検出し、適切なアップグレードコマンドを実行します。検出に失敗した場合は、手動コマンドを提案します。
12. MCPサーバーとしての使用
MCPをサポートするIDE(Claude Desktop、Cursorなど)で作業する場合、CLIはMCPサーバーとしても実行でき、すべての知識照会ツールを直接公開します:
{
"mcpServers": {
"antd": {
"command": "antd",
"args": ["mcp", "--version", "5.20.0"]
}
}
}
これにより、MCPプロトコルを介して8つのツール(antd_list、antd_info、antd_doc、antd_demo、antd_token、antd_design_md、antd_semantic、antd_changelog)と2つのプロンプト(antd-expert、antd-page-generator)が提供されます。
グローバルフラグ
| フラグ | 目的 |
|---|---|
--format <format> | 出力形式: json、text、または markdown(エージェントは json を推奨) |
--version <v> | 特定のantdバージョンを対象とする(例: 5.20.0) |
--lang zh | 中国語出力(デフォルト: en) |
--detail | 追加フィールド(description、since、deprecated、FAQ)を含める |
-V, --cli-version | CLIバージョンを表示して終了 |
主要なルール
- 常に作成前に照会する — antd APIを記憶から推測しないでください。最初に
antd infoを実行してください。 - ユーザーのバージョンに合わせる — 知識照会(
list/info/doc/demo/token/semantic/changelog)はantd v4+をサポートします。プロジェクトがantd 4.x/5.x/6.xを使用している場合は、--version 4.24.0/5.24.0/6.xを渡してください。antd v3プロジェクトの場合は、最初にantd migrate 3 4を使用してください。 --format jsonを使用する — すべてのコマンドがこれをサポートします。テキスト出力を正規表現でマッチングするのではなく、JSON出力を解析してください。- 移行を提案する前に確認する — バージョンアップグレードについてアドバイスする前に、
antd changelog <v1> <v2>とantd migrateを実行してください。 - 変更後にリントする — antdコードを作成または変更した後、変更したファイルに対して
antd lintを実行し、非推奨または問題のある使用法を検出してください。 - antdのバグを報告する — ユーザーがantdのバグを報告するよう依頼した場合は、
antd bugを使用してください。常に最初にプレビューし、ユーザーの確認を得てから送信してください。 - CLIの問題を報告する — ユーザーがCLIの問題について質問した場合は、
antd bug-cliを使用して報告を支援してください。常に最初にプレビューし、ユーザーの確認を得てから送信してください。