mcpField
A
ant-design-react

ant-design-react

github.com/full-stack-skills开发260 次安装4 周前更新
代码仓库

关于 ant-design-react

面向使用 Ant Design 构建 React 界面的开发者提供文档指导。它按主题指向组件示例、API 参考和模板，涵盖常见组件及进阶用法。

主要功能

  1. 01Ant Design 组件示例
  2. 02主题与设计令牌指导
  3. 03国际化与 TypeScript 指导
  4. 04API 参考和项目模板

适用场景

  1. 01构建带校验的表单
  2. 02创建数据表格与布局
  3. 03定制主题和语言设置

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/full-stack-skills/antd-skills --skill ant-design-react

安装后在 Claude Code 中输入/ant-design-react确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

LICENSE.txt
agents/
openai.yaml
api/
components.md
config-provider.md
examples/advanced/
internationalization.md
theme-customization.md
examples/components/
button.md
date-picker.md
form.md
icon.md
input.md
layout.md
menu.md
modal.md
select.md
table.md
examples/getting-started/
basic-usage.md
installation.md
templates/
component-template.md
project-setup.md

详细介绍

何时使用此技能

在用户希望执行以下操作时使用此技能：

  • 使用 Ant Design 组件构建 React 应用
  • 使用 Ant Design UI 组件（Button、Form、Table、Input、Select 等）
  • 自定义 Ant Design 主题和样式
  • 使用 Ant Design 实现国际化（i18n）
  • 将 Ant Design 与 TypeScript 配合使用
  • 创建带验证的表单
  • 在表格和列表中显示数据
  • 实现导航和布局
  • 使用 Ant Design 图标
  • 处理用户反馈（Modal、Message、Notification）
  • 实现数据可视化组件
  • 使用 Ant Design 设计令牌和设计系统

如何使用此技能

此技能的组织结构与 Ant Design React 官方文档一致（https://4x-ant-design.antgroup.com/docs/react/introduce-cn，https://4x-ant-design.antgroup.com/components/overview-cn/）。使用 Ant Design React 时：

  1. 根据用户的请求确定主题：

    • Getting started/快速开始 → examples/getting-started/installation.md 或 examples/getting-started/basic-usage.md
    • Button/按钮 → examples/components/button.md
    • Form/表单 → examples/components/form.md
    • Table/表格 → examples/components/table.md
    • Input/输入框 → examples/components/input.md
    • Select/选择器 → examples/components/select.md
    • DatePicker/日期选择器 → examples/components/date-picker.md
    • Modal/对话框 → examples/components/modal.md
    • Layout/布局 → examples/components/layout.md
    • Menu/菜单 → examples/components/menu.md
    • Theme customization/主题定制 → examples/advanced/theme-customization.md
    • Internationalization/国际化 → examples/advanced/internationalization.md
    • TypeScript/类型支持 → examples/advanced/typescript.md

  2. 从 examples/ 目录加载适当的示例文件：

    入门（快速开始）- examples/getting-started/：

    • examples/getting-started/installation.md - 安装 Ant Design 并进行基本设置
    • examples/getting-started/basic-usage.md - 基本组件用法

    组件 - examples/components/：

    • examples/components/button.md - Button 组件
    • examples/components/input.md - Input 组件
    • examples/components/form.md - 带验证的 Form 组件
    • examples/components/table.md - Table 组件
    • examples/components/select.md - Select 组件
    • examples/components/date-picker.md - DatePicker 组件
    • examples/components/modal.md - Modal 组件
    • examples/components/layout.md - Layout 组件
    • examples/components/menu.md - Menu 组件
    • examples/components/icon.md - Icon 组件
    • examples/components/typography.md - Typography 组件
    • examples/components/grid.md - Grid 组件
    • examples/components/space.md - Space 组件
    • examples/components/card.md - Card 组件
    • examples/components/tabs.md - Tabs 组件
    • examples/components/pagination.md - Pagination 组件
    • examples/components/upload.md - Upload 组件
    • examples/components/upload.md - Upload 组件
    • examples/components/message.md - Message 组件
    • examples/components/notification.md - Notification 组件
    • examples/components/alert.md - Alert 组件
    • examples/components/spin.md - Spin 组件
    • examples/components/progress.md - Progress 组件

    高级 - examples/advanced/：

    • examples/advanced/theme-customization.md - 自定义主题
    • examples/advanced/internationalization.md - 国际化设置
    • examples/advanced/typescript.md - TypeScript 支持

  3. 遵循该示例文件中的具体说明，了解语法、结构和最佳实践

    重要说明：

    • 所有示例均采用 Ant Design React 4.x API
    • 适用时，示例会同时提供 JavaScript 和 TypeScript 版本
    • 每个示例文件都包含关键概念、代码示例和要点
    • 务必查看示例文件，了解最佳实践和常见模式

  4. 需要时参考 api/ 目录中的 API 文档：

    • api/components.md - 组件 API 参考
    • api/config-provider.md - ConfigProvider API
    • api/design-tokens.md - Design tokens API

  5. 使用 templates/ 目录中的模板：

    • templates/project-setup.md - 项目设置模板
    • templates/component-template.md - 组件用法模板
文档映射（一一对应官方文档）

指南（指南）：

组件（组件）：

示例和模板

此技能包含详细示例，按官方文档结构组织。所有示例都位于 examples/ 目录中（参见上方映射）。

使用示例：

  • 根据用户请求确定主题
  • 从上方映射中加载相应的示例文件
  • 遵循该文件中的说明、语法和最佳实践
  • 根据具体用例调整代码示例

使用模板：

  • 参考 templates/ 目录中的模板，了解常见的脚手架结构
  • 根据具体需求和编码风格调整模板

API 参考

详细的 API 文档位于 api/ 目录中，其组织结构与官方 Ant Design React API 文档一致：

组件 API（api/components.md）
  • 所有组件属性和 API
  • 组件方法和事件
  • 组件类型和接口
ConfigProvider API（api/config-provider.md）
  • ConfigProvider 组件 API
  • 全局配置选项
  • 区域设置配置
设计令牌 API（api/design-tokens.md）
  • 设计令牌参考
  • 主题自定义令牌
  • CSS 变量

使用 API 参考：

  1. 确定需要查询的 API
  2. 从 api/ 目录加载对应的 API 文件
  3. 查找 API 签名、参数、返回类型和示例
  4. 参考链接的示例文件，了解详细用法
  5. 所有 API 文件都包含指向 examples/ 目录中相关示例文件的链接

最佳实践

  1. 导入样式：在入口文件中导入 Ant Design CSS
  2. 使用 ConfigProvider：使用 ConfigProvider 包裹应用，以进行全局配置
  3. 表单验证：使用带有验证规则的 Form 组件
  4. TypeScript：使用 TypeScript 提高类型安全性
  5. 主题自定义：使用设计令牌实现一致的主题
  6. 国际化：使用带有区域设置的 ConfigProvider 实现 i18n
  7. 组件组合：组合组件以构建复杂的 UI
  8. 性能：使用 React.memo 和 useMemo 进行优化
  9. 无障碍访问：遵循 Ant Design 无障碍访问指南
  10. 响应式设计：使用 Grid 和响应式工具

资源

关键词

Ant Design、Ant Design React、antd、React UI 库、组件、Button、Form、Table、Input、Select、DatePicker、Modal、Layout、Menu、主题、自定义、国际化、i18n、TypeScript、设计系统、组件库、按钮、表单、表格、输入框、选择器、日期选择器、对话框、布局、菜单、主题、国际化、类型支持

评论

支持 Markdown