antd
Use when the user's task involves Ant Design (antd) — writing antd components, debugging antd issues, querying antd APIs/props/tokens/demos, migrating between antd versions, or analyzing antd usage in a project. Triggers on antd-related code, imports from 'antd', or explicit antd questions.
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o antd.zip https://jpskill.com/download/22444.zip && unzip -o antd.zip && rm antd.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/22444.zip -OutFile "$d\antd.zip"; Expand-Archive "$d\antd.zip" -DestinationPath $d -Force; ri "$d\antd.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
antd.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
antdフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-18
- 取得日時
- 2026-05-18
- 同梱ファイル
- 1
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
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」という通知が含まれている場合は、続行する前に npm install -g @ant-design/cli を実行して更新してください。
プログラムで解析できる構造化された出力には、常に --format json を使用してください。
シナリオ
1. antd コンポーネントコードの記述
antd コンポーネントコードを記述する前に、まずその API を調べてください。記憶に頼らないでください。
# 利用可能なプロパティを確認する
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 → プロパティを理解する → antd demo → 動作する例を取得する → コードを記述する。
2. 完全なドキュメントの参照
包括的なコンポーネントのドキュメント(プロパティだけでなく)が必要な場合:
antd doc Table --format json # Table の完全な Markdown ドキュメント
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
# ベストプラクティス違反を lint する
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 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
10. CLI の問題の報告
ユーザーが CLI のバグを報告するように依頼した場合、または明示的にバグの提出を支援するように要求した場合:
# ユーザーのためにバグレポートをプレビューする
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" \
--forma 📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Ant Design CLI
You have access to @ant-design/cli — a local CLI tool with bundled antd metadata for v4/v5/v6 (plus migration guides for v3 → v4, v4 → v5, v5 → v6). Use it to query component knowledge, analyze projects, and guide migrations. All data is offline, no network needed.
Setup
Before first use, check if the CLI is installed. If not, install it automatically:
which antd || npm install -g @ant-design/cli
After running any command, if the output contains an "Update available" notice, run npm install -g @ant-design/cli to update before continuing.
Always use --format json for structured output you can parse programmatically.
Scenarios
1. Writing antd component code
Before writing any antd component code, look up its API first — don't rely on memory.
# 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
Workflow: antd info → understand props → antd demo → grab a working example → write code.
2. Looking up full documentation
When you need comprehensive component docs (not just props):
antd doc Table --format json # full markdown docs for Table
antd doc Table --lang zh # Chinese docs
3. Debugging antd issues
When code isn't working as expected or the user reports an antd bug:
# 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
Workflow: antd env → capture full environment → antd doctor → check configuration → antd info --version X → verify API against the user's exact version → antd lint → find deprecated or incorrect usage.
4. Migrating between versions
When the user wants to upgrade antd (e.g., v3 → v4 or 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
Workflow: antd migrate → get full checklist → antd changelog <v1> <v2> → understand breaking changes → apply fixes → antd lint → verify no deprecated usage remains.
5. Analyzing project antd usage
When the user wants to understand how antd is used in their project:
# 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. Checking changelogs and version history
When the user asks about what changed in a version:
# 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. Exploring available components
When the user is choosing which component to use:
# 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. Collecting environment info
When you need to understand the project's antd setup, or prepare info for a bug report:
# 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
Collects: OS, Node, package managers (npm/pnpm/yarn/bun/utoo), npm registry, browsers, core deps (antd/react/dayjs), all @ant-design/* and rc-* packages, and build tools (umi/vite/webpack/typescript/etc.).
9. Reporting antd bugs
When the user asks you to report an antd bug:
# 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. Reporting CLI issues
When the user asks you to report a CLI bug, or explicitly requests help filing one:
# 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
Show the report to the user and confirm before submitting:
antd bug-cli --title "antd info Button returns wrong props for v5.12.0" \
--description "..." \
--steps "..." \
--expected "..." \
--actual "..." \
--submit
Opt-out: If the environment variable ANTD_NO_AUTO_REPORT=1 is set, skip all bug-reporting suggestions entirely — do not suggest antd bug or antd bug-cli unless the user directly asks.
11. Using as MCP server
If working in an IDE that supports MCP (Claude Desktop, Cursor, etc.), the CLI can also run as an MCP server, exposing all knowledge-query tools directly:
{
"mcpServers": {
"antd": {
"command": "antd",
"args": ["mcp", "--version", "5.20.0"]
}
}
}
This provides 7 tools (antd_list, antd_info, antd_doc, antd_demo, antd_token, antd_semantic, antd_changelog) and 2 prompts (antd-expert, antd-page-generator) via MCP protocol.
Global Flags
| Flag | Purpose |
|---|---|
--format <format> |
Output format: json, text, or markdown (agents should prefer json) |
--version <v> |
Target a specific antd version (e.g. 5.20.0) |
--lang zh |
Chinese output (default: en) |
--detail |
Include extra fields (description, since, deprecated, FAQ) |
-V, --cli-version |
Print CLI version and exit |
Key Rules
- Always query before writing — Don't guess antd APIs from memory. Run
antd infofirst. - Match the user's version — Knowledge queries (
list/info/doc/demo/token/semantic/changelog) support antd v4+. If the project uses antd 4.x/5.x/6.x, pass--version 4.24.0/5.24.0/6.x. For antd v3 projects, useantd migrate 3 4first. - Use
--format json— Every command supports it. Parse the JSON output rather than regex-matching text output. - Check before suggesting migration — Run
antd changelog <v1> <v2>andantd migratebefore advising on version upgrades. - Lint after changes — After writing or modifying antd code, run
antd linton the changed files to catch deprecated or problematic usage. - Report antd bugs — When the user asks to report an antd bug, use
antd bug. Always preview first, get user confirmation, then submit. - Report CLI issues — When the user asks about a CLI problem, use
antd bug-clito help them file a report. Always preview first, get user confirmation, then submit.