antd

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 を調べてください。記憶に頼らないでください。

# Check what props are available
antd info Button --format json

# Get a working demo as starting point
antd demo Button basic --format json

# Check semantic classNames/styles for custom styling
antd semantic Button --format json

# Check component-level design tokens for theming
antd token Button --format json

# Get the overall design language (design.md): colors, typography, spacing, radius + principles
antd design.md --format json

ワークフロー： antd info → props を確認 → antd demo → 動作するサンプルを取得 → コードを記述。

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

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

antd doc Table --format json        # full markdown docs for Table
antd doc Table --lang zh            # Chinese docs

3. antd の問題のデバッグ

コードが期待どおりに動作しない場合や、ユーザーから antd のバグが報告された場合：

# Collect full environment snapshot (system, deps, browsers, build tools)
antd env --format json

# Check if the prop exists for the user's antd version
antd info Select --version 5.12.0 --format json

# Check if the prop is deprecated
antd lint ./src/components/MyForm.tsx --format json

# Diagnose project-level configuration issues
antd doctor --format json

ワークフロー： antd env → 環境全体を取得 → antd doctor → 設定を確認 → antd info --version X → ユーザーが実際に使用しているバージョンの API を確認 → antd lint → 非推奨または誤った使用方法を検出。

4. バージョン間の移行

ユーザーが antd のアップグレードを希望する場合（例：v3 → v4、または v4 → v5）：

# Get full migration checklist
antd migrate 3 4 --format json    # v3 → v4
antd migrate 4 5 --format json    # v4 → v5

# Check migration for a specific component
antd migrate 4 5 --component Select --format json

# Generate agent-friendly auto-migration prompt (does not modify files)
antd migrate 4 5 --apply ./src --format json

# See what changed between two versions
antd changelog 4.24.0 5.0.0 --format json

# See changes for a specific component
antd changelog 4.24.0 5.0.0 Select --format json

ワークフロー： antd migrate → チェックリスト全体を取得 → antd changelog <v1> <v2> → 破壊的変更を確認 → 修正を適用 → antd lint → 非推奨の使用方法が残っていないことを確認。

5. プロジェクトでの antd の使用状況を分析

ユーザーがプロジェクト内での antd の使用方法を把握したい場合：

# Scan component usage statistics
antd usage ./src --format json

# Filter to a specific component
antd usage ./src --filter Form --format json

# Lint for best practice violations
antd lint ./src --format json

# Check only specific rule categories
antd lint ./src --only deprecated --format json
antd lint ./src --only a11y --format json
antd lint ./src --only performance --format json

6. 変更履歴とバージョン履歴の確認

ユーザーが特定のバージョンでの変更点を尋ねた場合：

# Specific version changelog
antd changelog 5.22.0 --format json

# Version range (both ends inclusive)
antd changelog 5.21.0..5.24.0 --format json

7. 利用可能なコンポーネントの確認

ユーザーが使用するコンポーネントを選んでいる場合：

# List all components with categories
antd list --format json

# List components for a specific antd version
antd list --version 5.0.0 --format json

8. 環境情報の収集

プロジェクトの antd 設定を把握する必要がある場合や、バグ報告用の情報を準備する場合：

# Full environment snapshot (text — paste into GitHub Issues)
antd env

# Structured JSON for programmatic use
antd env --format json

# Scan a specific project directory
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 のバグ報告を依頼された場合：

# Step 0: Collect environment info for reference (optional — antd bug already embeds basic env)
# Use the output to cross-check versions or attach extra details to the bug report
antd env --format json

# Step 1: Preview for user review
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

# Step 2: Show to user, ask for confirmation

# Step 3: Submit after user confirms
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

10. CLI の問題を報告

ユーザーから CLI のバグ報告を依頼された場合、または報告の提出について明示的に支援を求められた場合：

# Preview the bug report for the user
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

報告内容をユーザーに提示し、送信前に確認を取ってください。

antd bug-cli --title "antd info Button returns wrong props for 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」という通知が表示された場合：

# Upgrade to the latest version (auto-detects package manager)
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 のバージョンを表示して終了

主要なルール

1. 書き込む前に必ず照会する — antd の API を記憶だけで推測しないでください。最初に antd info を実行してください。
2. ユーザーのバージョンに合わせる — ナレッジ照会（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 を実行してください。
3. --format json を使用する — すべてのコマンドで使用できます。テキスト出力を正規表現で照合するのではなく、JSON 出力を解析してください。
4. 移行を提案する前に確認する — バージョンアップを勧める前に、antd changelog <v1> <v2> と antd migrate を実行してください。
5. 変更後に lint を実行する — antd のコードを書き込んだり変更したりした後は、変更したファイルに対して antd lint を実行し、非推奨または問題のある使い方がないか確認してください。
6. antd のバグを報告する — ユーザーから antd のバグ報告を依頼された場合は、antd bug を使用してください。必ず最初にプレビューを表示し、ユーザーの確認を得てから送信してください。
7. CLI の問題を報告する — ユーザーから CLI の問題について尋ねられた場合は、報告の作成を支援するために antd bug-cli を使用してください。必ず最初にプレビューを表示し、ユーザーの確認を得てから送信してください。