skills.rest
ZHLX2005
ZHLX2005COMMUNITY
Explore all skills by this author →
GitHub

antd-reference

Provides Ant Design component usage, theming, and integration guidance for React projects.

3|1|Updated Apr 14, 2026
Search Tags:#theming#react#ui components#form#table#antd#configprovider
One-click install
npx skills add https://github.com/ZHLX2005/sl --skill antd-reference-zhlx2005
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: antd-reference
Source: https://github.com/ZHLX2005/sl/tree/main/skills/ui-component-library/references/antd
Command: npx skills add https://github.com/ZHLX2005/sl --skill antd-reference-zhlx2005

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires antd.

What problem does it solve? Developers working with Ant Design in React projects often need quick, accurate answers about component imports, props, theming, internationalization, and version compatibility without digging through the full official documentation. ## Core Features & Use Cases - Component Usage Reference: Covers installation, on-demand imports, and code examples for core components like Button, Form, Table, Modal, and DatePicker. - Theming & Internationalization: Explains ConfigProvider setup, dark/compact algorithms, CSS variables, and locale configuration for 150+ languages. - Troubleshooting & Compatibility: Answers common issues such as React 19 support, bundle size reduction, style priority, and message/notification context usage. - Use Case: When building a React admin dashboard, ask how to configure a dark theme with a custom primary color, and receive a working ConfigProvider snippet using antd v6 theme algorithms. ## Quick Start Ask how to use or configure a specific Ant Design component in a React project, such as setting up a themed Form with validation.

Frequently Asked Questions about antd-reference

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install and import Ant Design components in React?▼

Install antd via npm, pnpm, or yarn, then import components directly such as import { Button } from 'antd'. Antd v5/v6 supports tree-shaking by default, so importing only the components you need keeps bundle size small without extra plugins.

How do I configure a dark theme in Ant Design?▼

Wrap your app in ConfigProvider and set the theme algorithm to theme.darkAlgorithm. You can also customize tokens like colorPrimary and borderRadius, enable cssVar for CSS variable mode, and combine darkAlgorithm with compactAlgorithm.

Does Ant Design support React 19?▼

Antd v6 supports React 19 natively without patches. Newer v5 releases also support it; older v5 versions can use the @ant-design/v5-patch-for-react-19 package or upgrade antd.

Why are my Ant Design styles not working?▼

Confirm you imported 'antd/dist/reset.css' and that ConfigProvider wraps the outermost layer of your app. Also check style priority: ConfigProvider styles.root is lowest, followed by ConfigProvider style, then component-level styles and style props.

How do I use message and notification APIs in Ant Design v5?▼

Wrap your app content with antd's App component, then call App.useApp() to get message, notification, and modal instances. This provides proper context so feedback components render correctly with theme and locale.

When should I not use Ant Design?▼

Antd is designed for React mid/back-office applications. For Vue projects, use Element Plus or Naive UI instead, and it is not suited for non-UI requirements such as data fetching or state management.

Related Skills

Explore More Software Engineering Skills→
vobasevobase
59

shadcn-ui

Integrate shadcn/ui components into React projects with Tailwind CSS and TypeScript configuration.

Official
Intermediate
spuneiarturspuneiartur
1

admin-crud-scaffold

Scaffold admin CRUD features with API services, validation models, and pages.

Community
Advanced
NeptuneKitNeptuneKit
1

antd

Query Ant Design component APIs, demos, tokens, and migrations via the antd CLI.

Official
Intermediate
tranhieutttranhieutt
70

radix-ui-design-system

Build accessible Radix UI design systems with headless primitives.

Community
Advanced