ant-design

ant-design

热门

antd 6.x、Ant Design Pro 5/ProComponents、Ant Design X v2 以及离线 `@ant-design/cli` 的决策指南。用于组件选择、主题/令牌、SSR、无障碍、性能、路由/权限/CRUD、AI/聊天界面模式、本地 API 查询、调试、迁移和用量分析。

123Star
12Fork
更新于 2026/3/27
SKILL.md
readonly只读
name
ant-design
description

antd 6.x、Ant Design Pro 5/ProComponents、Ant Design X v2 以及离线 `@ant-design/cli` 的决策指南。用于组件选择、主题/令牌、SSR、无障碍、性能、路由/权限/CRUD、AI/聊天界面模式、本地 API 查询、调试、迁移和用量分析。

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;避免全局覆盖。
  • 提供者:一个根 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),然后按以下顺序请求文档(优先中文,英文备用):
    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 - 流程

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,英文备用)。

3) 决策

  • 提供者基线:CSR -> ConfigProvider;SSR -> ConfigProvider + StyleProvider
  • 主题基线:全局令牌 -> 组件令牌 -> classNames/styles
  • 输出建议 + 风险 + 验证点(SSR/无障碍/性能),如果使用了 CLI,引用其发现。

O - 输出

  • 提供简短的决策理由(1-3 句话)。
  • 包含最简的提供者/主题策略。
  • 包含具体的 SSR/无障碍/性能检查。
  • 对于 Pro:包含路由/菜单/权限和 CRUD 模式方向。
  • 对于 X:包含消息/工具模式和流式状态方向。

参考

文件 使用场景
references/antd-cli.md 需要精确的离线 CLI 工作流进行 API 查询、示例、代码检查、医生检查、迁移、更新日志审查、用量分析或错误报告时。

回归检查清单

  • [ ] 一个根 ConfigProvider;SSR 样式顺序/水合已验证。
  • [ ] 优先使用令牌;没有广泛的全局 .ant-* 覆盖。
  • [ ] Table 有稳定的 rowKey;排序/筛选/分页入口统一。
  • [ ] Select 远程模式在使用远程搜索时禁用本地筛选。
  • [ ] Upload 受控/非受控模式明确,包含失败/重试路径。
  • [ ] Pro 路由/菜单/权限与后端实施保持一致。
  • [ ] X 流式支持停止/重试和确定性工具渲染。
  • [ ] 如果使用了 antd CLI,命令以 --format json 运行,任何 CLI 缺陷通过 antd bug-cli 预览上报。