Agent Skills by ALSEL
Anthropic ClaudeLLM・AI開発⭐ リポ 0品質スコア 50/100

ant-design

antd 6.x、Ant Design Pro 5/ProComponents、Ant Design X v2、およびオフラインの `@ant-design/cli` に関する意思決定をサポートするガイド。コンポーネント選定、テーマ/トークン設定、SSR、アクセシビリティ、パフォーマンス、ルーティング/アクセス制御/CRUD、AI・チャットUIパターン、ローカルAPIの参照、デバッグ、マイグレーション、利用状況の分析など幅広い用途に活用できます。

description の原文を見る

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.

SKILL.md 本文

Ant Design

S - Scope

  • Target: 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。グローバルオーバーライドは回避。
  • プロバイダー: 厳密な分離が必要な場合を除き、ルート ConfigProvider は 1 つ。

必須ルール

  • antd コンポーネントコードを書き換える前に、antd info <Component> --format json でコンポーネント API を照会する。CLI でオフライン回答できる場合は記憶に頼らない。
  • antd CLI コマンドは常に --format json で実行する。
  • プロジェクトバージョンが重要な場合、--version <x.y.z> でマッチさせるか、ローカル node_modules から CLI に自動検出させる。
  • 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/events/コンポーネント名を発明しない。
  • 内部 DOM や .ant-* セレクターに依存しない。
  • テーマ優先順位: グローバルトークン -> コンポーネントトークン -> エイリアストークン。

P - Process

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
  • その後、ナラティブドキュメント or クロスチェックが必要な場合に公式コンポーネントドキュメント(CN 優先、EN フォールバック)をリクエスト。

3) 決定

  • プロバイダーベースライン: CSR -> ConfigProvider; SSR -> ConfigProvider + StyleProvider
  • テーミングベースライン: グローバルトークン -> コンポーネントトークン -> classNames/styles
  • 出力勧告 + リスク + 検証ポイント(SSR/a11y/perf)、CLI 検索結果を引用。

O - Output

  • 短い決定理由(1~3 文)を提供。
  • 最小プロバイダー/テーミング戦略を含める。
  • 具体的な SSR/a11y/perf チェックを含める。
  • Pro の場合: ルート/メニュー/アクセスおよび CRUD スキーマ方向を含める。
  • X の場合: メッセージ/ツールスキーマとストリーミング状態方向を含める。

References

ファイル使用場面
references/antd-cli.mdAPI 検索、デモ、リンティング、ドクターチェック、マイグレーション、チェンジログレビュー、使用分析、またはバグレポートの正確なオフライン CLI ワークフローが必要な場合。

Regression checklist

  • ルート ConfigProvider 1 つ; SSR スタイル順序/ハイドレーション検証済み。
  • トークン優先; 広範な グローバル .ant-* オーバーライドなし。
  • Table は安定した rowKey を持つ; sort/filter/pagination エントリは統一。
  • Select リモートモードはリモート検索使用時にローカルフィルターを無効化。
  • Upload 制御/非制御モードは明示的で失敗/リトライパス付き。
  • Pro ルート/メニュー/アクセスはバックエンド強制と一貫性を保つ。
  • X ストリーミングは停止/リトライをサポートし、決定論的なツールレンダリング。
  • antd CLI が使用された場合、コマンドは --format json で実行され、CLI 欠陥は antd bug-cli プレビュー経由でエスカレート。

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者
ant-design
リポジトリ
ant-design/antd-skill
ライセンス
MIT
最終更新
不明

Source: https://github.com/ant-design/antd-skill / ライセンス: MIT

本サイトは GitHub 上で公開されているオープンソースの SKILL.md ファイルをクロール・インデックス化したものです。 各スキルの著作権は原作者に帰属します。掲載に問題がある場合は info@alsel.co.jp または /takedown フォームよりご連絡ください。
原作者: ant-design · ant-design/antd-skill · ライセンス: MIT