jpskill.com
💬 コミュニケーション コミュニティ

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.

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
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
🪟 Windows (PowerShell)
$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. 1. 下の青いボタンを押して ant-design.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → ant-design フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

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がオフラインで回答できる場合、記憶に頼らないでください。
  • antd CLIコマンドでは常に --format json を使用してください。
  • プロジェクトのバージョンが重要な場合は、--version <x.y.z> で一致させるか、CLIにローカルの node_modules から自動検出させてください。
  • antd コードを変更した後、antd lint <changed-path> --format json を実行してください。
  • antd CLIコマンドがクラッシュしたり、間違ったデータを返したり、ドキュメント化された動作に違反したりした場合は、黙って回避するのではなく、ユーザー確認のために antd bug-cli プレビューを準備してください。
  • コンポーネントに関する質問については、まずコンポーネント名を公式ルートスラッグ {components} (小文字のケバブケース、例: TreeSelect -> tree-selectButton -> button) にマッピングし、次にこの順序でドキュメントを要求してください (CNが最初、ENがフォールバック):
    1. https://ant.design/components/{components}-cn
    2. https://ant.design/components/{components}
    • 例: tree-select-cn -> tree-selectbutton-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 doctorantd lintantd usageantd migrateantd 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 のストリーミングは、停止/再試行と決定論的なツールレンダリングをサポートしています。
  • [ ] antd CLIが使用された場合、コマンドは --format json で実行され、CLIの欠陥は antd bug-cli プレビューを介してエスカレートされました。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Ant Design

S - Scope

  • Target: antd@^6 + React 18-19, with ant-design-pro@^5 / @ant-design/pro-components and @ant-design/x@^2 when needed.
  • Tooling: @ant-design/cli for 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 ConfigProvider unless 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 json with antd CLI commands.
  • If the project version matters, match it with --version <x.y.z> or let the CLI auto-detect from local node_modules.
  • After changing antd code, run antd lint <changed-path> --format json.
  • If an antd CLI command crashes, returns wrong data, or violates its documented behavior, prepare an antd bug-cli preview 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):
    1. https://ant.design/components/{components}-cn
    2. https://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/cli should be the primary lookup path.

2) Query authoritative sources

  • Prefer local @ant-design/cli first for structured lookup:
    • antd info for props/API
    • antd demo for a working baseline
    • antd doc for full docs
    • antd token / antd semantic for theming and styling hooks
    • antd doctor, antd lint, antd usage, antd migrate, antd changelog when debugging or upgrading
  • Then request the official component docs (-cn first, 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 antd CLI was used, commands ran with --format json and any CLI defect was escalated via antd bug-cli preview.

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。