Token导航 LogoToken导航TokenDH.com
中转站排行榜
研究检索需要联网github未标认证来源可访问clear审计未展示

ant-design-react（ANT 设计 React）

Agent Skill

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。

总安装

445

周安装

18

GitHub Stars

公开资料未说明

下载量

140
CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息，不托管安装包，也不代用户安装。

GitHub

来源数

2

许可证

MIT

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：ant-design-react（ANT 设计 React）
来源仓库：https://github.com/teachingai/agent-skills
仓库路径：skills/ant-design-react
安装命令：
npx skills add teachingai/agent-skills --skill "ant-design-react"
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

AgentSkills.tonpx skills
npx skills add teachingai/agent-skills --skill "ant-design-react"

简介

ant-design-react 用于辅助前端页面和组件开发，适合在 Codex、Claude、Cursor、Gemini CLI 中生成或审查 React 相关代码时使用。

  • 支持整理组件结构、检查布局和性能问题，适用于 Next.js、Vue、Tailwind 等框架项目。
  • 通过 npx skills add teachingai/agent-skills --skill "ant-design-react" 安装，需确认项目现有设计系统。
  • 建议配合本地预览和构建检查确认视觉效果，避免生成孤立片段。
  • 可结合原始 README 文档进一步验证功能边界和使用场景。

SKILL.md

When to use this skill

Use this skill whenever the user wants to:

  • Build React applications with Ant Design components
  • Use Ant Design UI components (Button, Form, Table, Input, Select, etc.)
  • Customize Ant Design theme and styles
  • Implement internationalization (i18n) with Ant Design
  • Use Ant Design with TypeScript
  • Create forms with validation
  • Display data in tables and lists
  • Implement navigation and layout
  • Use Ant Design icons
  • Handle user feedback (Modal, Message, Notification)
  • Implement data visualization components
  • Use Ant Design design tokens and design system

How to use this skill

This skill is organized to match the Ant Design React official documentation structure (https://4x-ant-design.antgroup.com/docs/react/introduce-cn, https://4x-ant-design.antgroup.com/components/overview-cn/). When working with Ant Design React:

  1. Identify the topic from the user's request:

- Getting started/快速开始 → examples/getting-started/installation.md or 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

  1. Load the appropriate example file from the examples/ directory: Getting Started (快速开始) - examples/getting-started/: Components (组件) - examples/components/: Advanced (高级) - examples/advanced/:

- examples/getting-started/installation.md - Installing Ant Design and basic setup - examples/getting-started/basic-usage.md - Basic component usage - examples/components/button.md - Button component - examples/components/input.md - Input component - examples/components/form.md - Form component with validation - examples/components/table.md - Table component - examples/components/select.md - Select component - examples/components/date-picker.md - DatePicker component - examples/components/modal.md - Modal component - examples/components/layout.md - Layout component - examples/components/menu.md - Menu component - examples/components/icon.md - Icon component - examples/components/typography.md - Typography component - examples/components/grid.md - Grid component - examples/components/space.md - Space component - examples/components/card.md - Card component - examples/components/tabs.md - Tabs component - examples/components/pagination.md - Pagination component - examples/components/upload.md - Upload component - examples/components/upload.md - Upload component - examples/components/message.md - Message component - examples/components/notification.md - Notification component - examples/components/alert.md - Alert component - examples/components/spin.md - Spin component - examples/components/progress.md - Progress component - examples/advanced/theme-customization.md - Customizing theme - examples/advanced/internationalization.md - Internationalization setup - examples/advanced/typescript.md - TypeScript support

  1. Follow the specific instructions in that example file for syntax, structure, and best practices Important Notes:

- All examples follow Ant Design React 4.x API - Examples include both JavaScript and TypeScript versions where applicable - Each example file includes key concepts, code examples, and key points - Always check the example file for best practices and common patterns

  1. Reference API documentation in the api/ directory when needed:

- api/components.md - Component API reference - api/config-provider.md - ConfigProvider API - api/design-tokens.md - Design tokens API

  1. Use templates from the templates/ directory:

- templates/project-setup.md - Project setup templates - templates/component-template.md - Component usage templates

Doc mapping (one-to-one with official documentation)

Guide (指南):

Components (组件):

Examples and Templates

This skill includes detailed examples organized to match the official documentation structure. All examples are in the examples/ directory (see mapping above).

To use examples:

  • Identify the topic from the user's request
  • Load the appropriate example file from the mapping above
  • Follow the instructions, syntax, and best practices in that file
  • Adapt the code examples to your specific use case

To use templates:

  • Reference templates in templates/ directory for common scaffolding
  • Adapt templates to your specific needs and coding style

API Reference

Detailed API documentation is available in the api/ directory, organized to match the official Ant Design React API documentation structure:

Components API (api/components.md)

  • All component props and APIs
  • Component methods and events
  • Component types and interfaces

ConfigProvider API (api/config-provider.md)

  • ConfigProvider component API
  • Global configuration options
  • Locale configuration

Design Tokens API (api/design-tokens.md)

  • Design tokens reference
  • Theme customization tokens
  • CSS variables

To use API reference:

  1. Identify the API you need help with
  2. Load the corresponding API file from the api/ directory
  3. Find the API signature, parameters, return type, and examples
  4. Reference the linked example files for detailed usage patterns
  5. All API files include links to relevant example files in the examples/ directory

Best Practices

  1. Import styles: Import Ant Design CSS in your entry file
  2. Use ConfigProvider: Wrap your app with ConfigProvider for global configuration
  3. Form validation: Use Form component with validation rules
  4. TypeScript: Use TypeScript for better type safety
  5. Theme customization: Use design tokens for consistent theming
  6. Internationalization: Use ConfigProvider with locale for i18n
  7. Component composition: Compose components for complex UIs
  8. Performance: Use React.memo and useMemo for optimization
  9. Accessibility: Follow Ant Design accessibility guidelines
  10. Responsive design: Use Grid and responsive utilities

Resources

Keywords

Ant Design, Ant Design React, antd, React UI library, components, Button, Form, Table, Input, Select, DatePicker, Modal, Layout, Menu, theme, customization, internationalization, i18n, TypeScript, design system, 组件库, 按钮, 表单, 表格, 输入框, 选择器, 日期选择器, 对话框, 布局, 菜单, 主题, 国际化, 类型支持

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

04

需要参考平台分布和安装热度时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

补充不同宿主或平台的使用分布数据

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Claude Code

27.09%
按下载量换算38

OpenCode

22.28%
按下载量换算31

Antigravity

18.87%
按下载量换算26

Codex

11.96%
按下载量换算17

windsurf

8.75%
按下载量换算12

Gemini CLI

3.5%
按下载量换算5

安全审计

暂无安全审计结果可展示。

权限和风险

需要联网

该 Skill 可能需要联网访问来源站点、仓库或外部 API；具体网络访问范围需要结合源码和 README 复核。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/teachingai/agent-skills

SKILL.md 来源

github.com

/teachingai/agent-skills/tree/main/skills/ant-design-react

agentskills-to

agentskills.to

/teachingai/agent-skills/ant-design-react

继续浏览同类 Skills

更多研究检索 Skills（73,675）返回 Skills 目录

上一个 Skill

ant-design-mobile（蚂蚁设计手机）

用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化。它适合让 Agent 根据产品场景整理页面结构、生成 UI 方案、检查视觉一致性或改进组件层级。使用时需要结合现有品牌、设计系统和用户任务，不应只堆装饰元素；涉及真实页面改动时，应通过截图或浏览器预览检查文本溢出、对齐和响应式表现。

下一个 Skill

ant-design-react（ANT 设计 React）

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。