antd

Ant Design CLI

@ant-design/cli を利用できます。これは v4／v5／v6 の antd メタデータをバンドルしたローカル CLI ツールです。コンポーネントの情報を検索したり、プロジェクトを分析したり、移行をガイドしたりするために使用します。データはすべてオフラインで利用でき、ネットワークは不要です。

セットアップ

初めて使用する前に、CLI がインストールされているか確認してください。インストールされていない場合は、自動的にインストールします。

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

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

プログラムで解析できる構造化出力には、必ず --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

ワークフロー： 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 の不具合が報告された場合：

# 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 doctor → 環境を確認する → antd info --version X → ユーザーが使用している正確なバージョンの API と照合する → antd lint → 非推奨または誤った使い方を見つける。

4. バージョン間の移行

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

# Get full migration checklist
antd migrate 4 5 --format json

# Check migration for a specific component
antd migrate 4 5 --component Select --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 の不具合の報告

ローカルで解決できない antd コンポーネントの不具合が確認された場合：

# 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

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	追加フィールド（説明、導入バージョン、非推奨情報、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 の品質フィードバックを担う存在として、問題を黙って回避しないでください。