Ant Design CLI

オフラインで v4/v5/v6 の antd メタデータをバンドルしたローカル CLI ツールである @ant-design/cli にアクセスできます。コンポーネント知識のクエリ、プロジェクトの分析、マイグレーションのガイドに使用します。すべてのデータはオフラインで、ネットワークは不要です。

セットアップ

初回使用前に、CLI がインストール済みかどうか確認します。インストールされていない場合は自動的にインストールします:

which antd || npm install -g @ant-design/cli

コマンド実行後、出力に「Update available」という通知が表示される場合は、続ける前に npm install -g @ant-design/cli を実行して更新します。

プログラム的に解析できる構造化された出力には、常に --format json を使用してください。

シナリオ

1. antd コンポーネントコードの作成

antd コンポーネントコードを作成する前に、メモリに頼らず、まずその API を調べます。

# 利用可能な props を確認
antd info Button --format json

# 開始点として機能するデモを取得
antd demo Button basic --format json

# カスタムスタイリング用のセマンティック classNames/styles を確認
antd semantic Button --format json

# テーマ適用用のコンポーネントレベルデザイントークンを確認
antd token Button --format json

ワークフロー: antd info → props を理解 → antd demo → 動作例を取得 → コードを作成

2. 完全ドキュメントの確認

props だけでなく包括的なコンポーネントドキュメントが必要な場合:

antd doc Table --format json        # Table の完全な markdown ドキュメント
antd doc Table --lang zh            # 中国語ドキュメント

3. antd の問題をデバッグ

コードが期待通りに動作しない、またはユーザーが antd バグを報告する場合:

# ユーザーの antd バージョンで prop が存在するか確認
antd info Select --version 5.12.0 --format json

# prop が非推奨かどうか確認
antd lint ./src/components/MyForm.tsx --format json

# プロジェクトレベルの設定の問題を診断
antd doctor --format json

ワークフロー: antd doctor → 環境を確認 → antd info --version X → ユーザーの正確なバージョンに対して API を検証 → antd lint → 非推奨または不適切な使用法を検出

4. バージョン間のマイグレーション

ユーザーが antd をアップグレード (例: v4 → v5) したい場合:

# 完全なマイグレーションチェックリストを取得
antd migrate 4 5 --format json

# 特定のコンポーネントのマイグレーションを確認
antd migrate 4 5 --component Select --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 バグの報告

確認済みの antd コンポーネントバグをローカルで解決できない場合:

# ステップ 1: ユーザーレビュー用のプレビュー
antd bug --title "DatePicker crashes when selecting date" \
  --reproduction "https://codesandbox.io/s/xxx" \
  --steps "1. Open DatePicker 2. Click a date" \
  --expected "Date is selected" \
  --actual "Component crashes with error" \
  --format json

# ステップ 2: ユーザーに表示して確認を取る

# ステップ 3: ユーザーが確認した後に送信
antd bug --title "DatePicker crashes when selecting date" \
  --reproduction "https://codesandbox.io/s/xxx" \
  --steps "1. Open DatePicker 2. Click a date" \
  --expected "Date is selected" \
  --actual "Component crashes with error" \
  --submit

9. CLI の問題を自動報告

重要: antd CLI コマンドを使用したときに問題が発生した場合は、antd bug-cli を使用してプロアクティブにバグレポートを開始する必要があります。

CLI バグをレポートすべきトリガー条件 — 次のいずれかを観察した場合:

• コマンドがクラッシュするか予期しないエラーで終了する
• コマンドが明らかに不正なデータを返す (例: antd info Button が間違った props を表示、欠落した props、または間違ったバージョンの props を表示)
• コマンドの出力がドキュメント化された動作と一致しない (例: --format json が非 JSON を返す、--version X が無視される)
• コマンドがそうすべきでないのに空またはデータが不足している (例: antd demo Button がデモを返さない、antd token Button が v5+ でトークンを返さない)
• コマンド間の矛盾 (例: antd list がコンポーネントを表示するが antd info はそれが存在しないと言う)

ワークフロー:

1. CLI を使用中に何か問題があることに気付く
2. 証拠を収集: 実行したコマンド、返された内容、期待した内容
3. バグレポートをプレビューしてユーザーに表示:

antd bug-cli --title "antd info Button returns wrong props for v5.12.0" \
  --description "When querying Button props for version 5.12.0, the output includes props that don't exist in that version" \
  --steps "1. Run: antd info Button --version 5.12.0 --format json" \
  --expected "Props matching antd 5.12.0 Button API" \
  --actual "Props include 'classNames' which was added in 5.16.0" \
  --format json

4. ユーザーにレポートを表示: 「CLI を使用中に問題に気付きました。こちらはバグレポートです — 送信しましょうか?」
5. ユーザーが確認した後に送信:

antd bug-cli --title "antd info Button returns wrong props for v5.12.0" \
  --description "..." \
  --steps "..." \
  --expected "..." \
  --actual "..." \
  --submit

主要原則: あなたは CLI の品質フィードバックループです。CLI の問題を黙って回避しないでください — 修正されるようにレポートしてください。常にユーザーに確認してから送信してください。

10. MCP サーバーとして使用

MCP をサポートする IDE (Claude Desktop、Cursor など) で作業している場合、CLI は MCP サーバーとして実行でき、すべての知識クエリツールを直接公開できます:

{
  "mcpServers": {
    "antd": {
      "command": "antd",
      "args": ["mcp", "--version", "5.20.0"]
    }
  }
}

これにより、MCP プロトコルを通じて 7 つのツール (antd_list, antd_info, antd_doc, antd_demo, antd_token, antd_semantic, antd_changelog) と 2 つのプロンプト (antd-expert, antd-page-generator) が提供されます。

グローバルフラグ

フラグ	目的
--format json	構造化された出力 — 常に使用します
--version <v>	特定の antd バージョンをターゲット (例: 5.20.0)
--lang zh	中国語出力 (デフォルト: en)
--detail	追加フィールドを含める (description、since、deprecated、FAQ)

主要ルール

1. 常にクエリしてから作成 — メモリから antd API を推測しないでください。先に antd info を実行してください。
2. ユーザーのバージョンに合わせる — プロジェクトが antd 4.x を使用する場合、--version 4.24.0 を渡します。フラグがない場合、CLI は node_modules から自動的に検出します。
3. --format json を使用 — すべてのコマンドがサポートしています。テキスト出力に対して正規表現マッチングを使用するのではなく、JSON 出力をパースしてください。
4. マイグレーションを提案する前に確認 — バージョンアップグレードに関するアドバイスをする前に、antd changelog <v1> <v2> と antd migrate を実行してください。
5. 変更後にリント — antd コードを作成または変更した後、変更されたファイルで antd lint を実行して、非推奨またはその他の問題のある使用法を検出してください。
6. antd バグを報告 — antd コンポーネントバグに遭遇した場合、antd bug を使用してレポートしてください。必ず先にプレビューして、ユーザーの確認を取ってから送信してください。
7. CLI の問題を自動報告 — antd コマンドがクラッシュするか、間違ったデータを返すか、矛盾した動作をする場合、プロアクティブに antd bug-cli を使用してレポートしてください。あなたは CLI の品質フィードバックループです — 黙って問題を回避しないでください。