antd

Ant Design CLI

@ant-design/cli を利用できます。これは v3/v4/v5/v6 の antd メタデータを同梱したローカル CLI ツールです。コンポーネントの知識を調べたり、プロジェクトを分析したり、移行を支援したりできます。データはすべてオフラインで利用でき、ネットワークは不要です。

セットアップ

この CLI は開発依存関係としてインストールされています。npx antd を使って実行してください。

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

シナリオ

1. antd コンポーネントのコードを書く

antd コンポーネントのコードを書く前に、必ず API を調べてください。記憶に頼らないでください。

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

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

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

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

ワークフロー： antd info → props を理解する → antd demo → 動作する例を取得する → コードを書く。

2. ドキュメント全体を調べる

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

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

3. antd の問題をデバッグする

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

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

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

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

# Diagnose project-level configuration issues
npx 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
npx antd migrate 3 4 --format json    # v3 → v4
npx antd migrate 4 5 --format json    # v4 → v5

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

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

# See changes for a specific component
npx 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
npx antd usage ./src --format json

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

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

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

6. 変更履歴とバージョン履歴を確認する

ユーザーが、あるバージョンで何が変更されたかを尋ねた場合：

# Specific version changelog
npx antd changelog 5.22.0 --format json

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

7. 利用可能なコンポーネントを確認する

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

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

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

8. 環境情報を収集する

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

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

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

# Scan a specific project directory
npx antd env ./my-project --format json

9. antd のバグを報告する

ユーザーから antd のバグを報告するよう依頼された場合：

# Step 0: Collect environment info for reference (optional)
npx antd env --format json

# Step 1: Preview for user review
npx 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
npx 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 のバグを報告するよう依頼された場合：

npx antd bug-cli --title "antd info Button returns wrong props" \
  --description "When querying Button props for version 5.12.0, the output includes props that don't exist" \
  --steps "1. Run: npx 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

レポートをユーザーに提示し、--submit を付けて送信する前に確認を取ってください。

オプトアウト： 環境変数 ANTD_NO_AUTO_REPORT=1 が設定されている場合、バグ報告の提案はすべて省略してください。

11. MCP サーバーとして使用する

MCP に対応した IDE（Claude Desktop、Cursor など）で作業している場合、この CLI は MCP サーバーとしても実行できます。

{
  "mcpServers": {
    "antd": {
      "command": "npx",
      "args": ["antd", "mcp"]
    }
  }
}

これにより、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 v6 を使用しています。フラグを指定しない場合、CLI は node_modules からバージョンを自動検出します。
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 を使用して報告を支援してください。必ず最初にプレビューし、ユーザーの確認を得てから送信してください。