ant-design
Decision guide for antd 6.x, Ant Design Pro 5/ProComponents, Ant Design X v2, and the offline `@ant-design/cli`. Use for component selection, theming/tokens, SSR, a11y, performance, routing/access/CRUD, AI/chat UI patterns, local API lookup, debugging, migration, and usage analysis.
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o ant-design.zip https://jpskill.com/download/22445.zip && unzip -o ant-design.zip && rm ant-design.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/22445.zip -OutFile "$d\ant-design.zip"; Expand-Archive "$d\ant-design.zip" -DestinationPath $d -Force; ri "$d\ant-design.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
ant-design.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
ant-designフォルダができる - 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
- 同梱ファイル
- 3
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
Ant Design
S - スコープ
- ターゲット:
antd@^6+ React 18-19、必要に応じてant-design-pro@^5/@ant-design/pro-componentsおよび@ant-design/x@^2を使用します。 - ツール:
@ant-design/cliを使用して、オフラインのコンポーネントメタデータ、デモ、変更履歴、移行、リンティング、ドクターチェック、および使用状況分析を行います。 - 焦点: 意思決定のガイダンスのみであり、エンドユーザー向けのチュートリアルは提供しません。
- ソースポリシー: 公式ドキュメントのみを使用し、未公開のAPIや内部の
.ant-*結合は使用しません。
デフォルトの前提事項
- 言語: TypeScript です。
- スタイリング: まずトークンを使用し、次に
classNames/stylesを使用します。グローバルなオーバーライドは避けてください。 - プロバイダー: 厳密な分離が必要な場合を除き、1つのルート
ConfigProviderを使用します。
必須ルール
- antd コンポーネントコードを記述または変更する前に、
antd info <Component> --format jsonでコンポーネントAPIを照会してください。CLIがオフラインで回答できる場合、記憶に頼らないでください。 antdCLIコマンドでは常に--format jsonを使用してください。- プロジェクトのバージョンが重要な場合は、
--version <x.y.z>で一致させるか、CLIにローカルのnode_modulesから自動検出させてください。 - antd コードを変更した後、
antd lint <changed-path> --format jsonを実行してください。 antdCLIコマンドがクラッシュしたり、間違ったデータを返したり、ドキュメント化された動作に違反したりした場合は、黙って回避するのではなく、ユーザー確認のためにantd bug-cliプレビューを準備してください。- コンポーネントに関する質問については、まずコンポーネント名を公式ルートスラッグ
{components}(小文字のケバブケース、例:TreeSelect -> tree-select、Button -> button) にマッピングし、次にこの順序でドキュメントを要求してください (CNが最初、ENがフォールバック):https://ant.design/components/{components}-cnhttps://ant.design/components/{components}
- 例:
tree-select-cn -> tree-select、button-cn -> button。
- ドキュメント化された antd/Pro/X APIのみを使用してください。
- props/イベント/コンポーネント名を独自に作成しないでください。
- 内部DOMまたは
.ant-*セレクターに依存しないでください。 - テーマの優先順位: グローバルトークン -> コンポーネントトークン -> エイリアストークン。
P - プロセス
1) 分類
- レイヤーを特定します: コア antd、Pro、または X。
- バージョン、レンダリングモード (CSR/SSR/ストリーミング)、データ規模、および
@ant-design/cliが主要なルックアップパスであるべきかどうかを確認します。
2) 信頼できる情報源を照会する
- 構造化されたルックアップには、まずローカルの
@ant-design/cliを優先します:antd info(props/API用)antd demo(動作するベースライン用)antd doc(完全なドキュメント用)antd token/antd semantic(テーマ設定とスタイリングフック用)antd doctor、antd lint、antd usage、antd migrate、antd changelog(デバッグまたはアップグレード時)
- 次に、解説ドキュメントや相互参照が必要な場合は、公式コンポーネントドキュメント (
-cnが最初、ENがフォールバック) を要求します。
3) 決定
- プロバイダーのベースライン: CSR ->
ConfigProvider; SSR ->ConfigProvider+StyleProvider。 - テーマ設定のベースライン: グローバルトークン -> コンポーネントトークン ->
classNames/styles。 - 推奨事項 + リスク + 検証ポイント (SSR/a11y/パフォーマンス) を出力し、CLIの調査結果を使用した場合はそれを引用します。
O - 出力
- 短い意思決定の根拠 (1〜3文) を提供します。
- 最小限のプロバイダー/テーマ設定戦略を含めます。
- 具体的なSSR/a11y/パフォーマンスチェックを含めます。
- Proの場合: ルート/メニュー/アクセスおよびCRUDスキーマの方向性を含めます。
- Xの場合: メッセージ/ツールスキーマおよびストリーミング状態の方向性を含めます。
参照
| ファイル | 使用する場合 |
|---|---|
references/antd-cli.md |
APIルックアップ、デモ、リンティング、ドクターチェック、移行、変更履歴の確認、使用状況分析、またはバグ報告のための正確なオフラインCLIワークフローが必要な場合。 |
回帰チェックリスト
- [ ] 1つのルート
ConfigProvider; SSRスタイル順序/ハイドレーションが検証済みです。 - [ ] トークンが優先され、広範なグローバル
.ant-*オーバーライドはありません。 - [ ] テーブルには安定した
rowKeyがあり、ソート/フィルター/ページネーションのエントリが統一されています。 - [ ] Select のリモートモードは、リモート検索を使用する場合にローカルフィルターを無効にします。
- [ ] Upload の制御/非制御モードは、失敗/再試行パスで明示的です。
- [ ] Pro のルート/メニュー/アクセスは、バックエンドの強制と一貫しています。
- [ ] X のストリーミングは、停止/再試行と決定論的なツールレンダリングをサポートしています。
- [ ]
antdCLIが使用された場合、コマンドは--format jsonで実行され、CLIの欠陥はantd bug-cliプレビューを介してエスカレートされました。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Ant Design
S - Scope
- Target:
antd@^6+ React 18-19, withant-design-pro@^5/@ant-design/pro-componentsand@ant-design/x@^2when needed. - Tooling:
@ant-design/clifor offline component metadata, demos, changelogs, migrations, linting, doctor checks, and usage analysis. - Focus: decision guidance only; no end-user tutorials.
- Source policy: official docs only; no undocumented APIs or internal
.ant-*coupling.
Default assumptions
- Language: TypeScript.
- Styling: tokens first, then
classNames/styles; avoid global overrides. - Provider: one root
ConfigProviderunless strict isolation is required.
Mandatory rules
- Before writing or changing antd component code, query the component API first with
antd info <Component> --format json. Do not rely on memory when the CLI can answer it offline. - Always use
--format jsonwithantdCLI commands. - If the project version matters, match it with
--version <x.y.z>or let the CLI auto-detect from localnode_modules. - After changing antd code, run
antd lint <changed-path> --format json. - If an
antdCLI command crashes, returns wrong data, or violates its documented behavior, prepare anantd bug-clipreview for user confirmation instead of silently working around it. - For component questions, first map the component name to the official route slug
{components}(lowercase kebab-case, e.g.TreeSelect -> tree-select,Button -> button), then request docs in this order (CN first, EN fallback):https://ant.design/components/{components}-cnhttps://ant.design/components/{components}
- Examples:
tree-select-cn -> tree-select,button-cn -> button.
- Use only documented antd/Pro/X APIs.
- Do not invent props/events/component names.
- Do not rely on internal DOM or
.ant-*selectors. - Theme priority: global tokens -> component tokens -> alias tokens.
P - Process
1) Classify
- Identify layer: core antd, Pro, or X.
- Confirm version, rendering mode (CSR/SSR/streaming), data scale, and whether
@ant-design/clishould be the primary lookup path.
2) Query authoritative sources
- Prefer local
@ant-design/clifirst for structured lookup:antd infofor props/APIantd demofor a working baselineantd docfor full docsantd token/antd semanticfor theming and styling hooksantd doctor,antd lint,antd usage,antd migrate,antd changelogwhen debugging or upgrading
- Then request the official component docs (
-cnfirst, EN fallback) when narrative docs or cross-checking are needed.
3) Decide
- Provider baseline: CSR ->
ConfigProvider; SSR ->ConfigProvider+StyleProvider. - Theming baseline: global tokens -> component tokens ->
classNames/styles. - Output recommendation + risk + verification points (SSR/a11y/perf), citing CLI findings when used.
O - Output
- Provide short decision rationale (1-3 sentences).
- Include minimal provider/theming strategy.
- Include concrete SSR/a11y/perf checks.
- For Pro: include route/menu/access and CRUD schema direction.
- For X: include message/tool schema and streaming state direction.
References
| File | Use when |
|---|---|
references/antd-cli.md |
You need the exact offline CLI workflow for API lookup, demos, linting, doctor checks, migration, changelog review, usage analysis, or bug reporting. |
Regression checklist
- [ ] One root
ConfigProvider; SSR style order/hydration verified. - [ ] Tokens first; no broad global
.ant-*overrides. - [ ] Table has stable
rowKey; sort/filter/pagination entry is unified. - [ ] Select remote mode disables local filter when using remote search.
- [ ] Upload controlled/uncontrolled mode is explicit with failure/retry path.
- [ ] Pro route/menu/access remain consistent with backend enforcement.
- [ ] X streaming supports stop/retry and deterministic tool rendering.
- [ ] If
antdCLI was used, commands ran with--format jsonand any CLI defect was escalated viaantd bug-clipreview.
同梱ファイル
※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。
- 📄 SKILL.md (4,352 bytes)
- 📎 LICENSE (1,099 bytes)
- 📎 references/antd-cli.md (3,764 bytes)