AgentSkillsCN

ant-design-guide

包含 Ant Design (Antd) 所有核心组件的官方文档索引及最佳实践。适用于查询组件 API、Props 定义及最新特性时使用。

SKILL.md
--- frontmatter
name: ant-design-guide
description: 包含 Ant Design (Antd) 所有核心组件的官方文档索引及最佳实践。用于查询组件 API、Props 定义及最新特性。

Ant Design Component Guide

当用户询问有关 Ant Design 组件的使用、样式修改、或者需要编写特定 UI 功能时，请参考此指南。

⚠️ 关键指令 (Critical Instructions)

  1. •查阅文档: Ant Design 版本更新较快（当前主流为 v5/v6），遇到复杂的 Props（如 Table columns, Form rules, Upload customRequest）时，必须使用浏览工具 (Browsing Tool) 读取对应组件的 URL 以获取准确的类型定义。
  2. •V5/V6 风格: 默认使用 Functional Components + Hooks。优先使用 CSS-in-JS (Antd Style) 或 style 属性，避免使用旧版的 Less 导入方式，除非用户特定要求。
  3. •App 包裹: 在使用 message, modal, notification 的静态方法时，推荐使用 <App> 组件包裹应用，并使用 App.useApp() hook 获取实例，以确保样式和 Context 正确继承。

📚 常用框架集成 (Integration)

如果用户询问如何初始化项目或配置环境：

🧩 组件索引 (Component Index)

1. 通用与布局 (General & Layout)

构建页面骨架和基础元素

2. 导航 (Navigation)

页面跳转与层级导航

3. 数据录入 (Data Entry)

表单与交互控件

4. 数据展示 (Data Display)

核心展示组件

5. 反馈与交互 (Feedback)

交互反馈

6. 主题定制 (Theme)

💡 使用场景示例

  1. •表单场景: 结合 Form, Input, Select, Button。使用 Form.useForm() 获取实例。
  2. •后台列表: 结合 Table, Pagination, Space (操作栏)。
  3. •详情页: 结合 Descriptions 或 Card。
  4. •全局反馈: 使用 <App> 组件包裹根节点，在子组件中使用 App.useApp() 调用 message 或 modal。