陌讯skills聚合平台

ant-design-guide

📁 smithery/ai 📅 8 days ago
1
总安装量
1
周安装量
#46738
全站排名
安装命令
npx skills add https://smithery.ai

Agent 安装分布

antigravity 1

Skill 文档

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。
← 返回陌讯 Skills 聚合平台
本页面由 陌讯 Skills 聚合平台 收录整理，数据定期更新。