ant-design▌
ant-design/antd-skill · updated Apr 24, 2026
Comprehensive decision guide for Ant Design 6.x, Pro 5, ProComponents, and Ant Design X v2 integration.
- ›Covers component selection, theming with tokens, SSR setup, accessibility, performance optimization, and routing/access patterns across all three libraries
- ›Includes mandatory rules for API usage, official documentation mapping, and provider configuration (ConfigProvider for CSR, StyleProvider for SSR)
- ›Provides regression checklist covering ConfigProvider setup, token-first theming,
Ant Design
S - Scope
- Target:
antd@^6+ React 18-19, withant-design-pro@^5/@ant-design/pro-componentsand@ant-design/x@^2when needed. - Tooling:
@ant-design/clifor offline component metadata, demos, changelogs, migrations, linting, doctor checks, and usage analysis. - Focus: decision guidance only; no end-user tutorials.
- Source policy: official docs only; no undocumented APIs or internal
.ant-*coupling.
Default assumptions
- Language: TypeScript.
- Styling: tokens first, then
classNames/styles; avoid global overrides. - Provider: one root
ConfigProviderunless strict isolation is required.
Mandatory rules
- Before writing or changing antd component code, query the component API first with
antd info <Component> --format json. Do not rely on memory when the CLI can answer it offline. - Always use
--format jsonwithantdCLI commands. - If the project version matters, match it with
--version <x.y.z>or let the CLI auto-detect from localnode_modules. - After changing antd code, run
antd lint <changed-path> --format json. - If an
antdCLI command crashes, returns wrong data, or violates its documented behavior, prepare anantd bug-clipreview for user confirmation instead of silently working around it. - For component questions, first map the component name to the official route slug
{components}(lowercase kebab-case, e.g.TreeSelect -> tree-select,Button -> button), then request docs in this order (CN first, EN fallback):https://ant.design/components/{components}-cnhttps://ant.design/components/{components}
- Examples:
tree-select-cn -> tree-select,button-cn -> button.
- Use only documented antd/Pro/X APIs.
- Do not invent props/events/component names.
- Do not rely on internal DOM or
.ant-*selectors. - Theme priority: global tokens -> component tokens -> alias tokens.
P - Process
1) Classify
- Identify layer: core antd, Pro, or X.
- Confirm version, rendering mode (CSR/SSR/streaming), data scale, and whether
@ant-design/clishould be the primary lookup path.
2) Query authoritative sources
- Prefer local
@ant-design/clifirst for structured lookup:antd infofor props/APIantd demofor a working baselineantd docfor full docsantd token/antd semanticfor theming and styling hooksantd doctor,antd lint,antd usage,antd migrate,antd changelogwhen debugging or upgrading
- Then request the official component docs (
-cnfirst, EN fallback) when narrative docs or cross-checking are needed.
3) Decide
- Provider baseline: CSR ->
ConfigProvider; SSR ->ConfigProvider+StyleProvider. - Theming baseline: global tokens -> component tokens ->
classNames/styles. - Output recommendation + risk + verification points (SSR/a11y/perf), citing CLI findings when used.
O - Output
- Provide short decision rationale (1-3 sentences).
- Include minimal provider/theming strategy.
- Include concrete SSR/a11y/perf checks.
- For Pro: include route/menu/access and CRUD schema direction.
- For X: include message/tool schema and streaming state direction.
References
| File | Use when |
|---|---|
references/antd-cli.md |
You need the exact offline CLI workflow for API lookup, demos, linting, doctor checks, migration, changelog review, usage analysis, or bug reporting. |
Regression checklist
- One root
ConfigProvider; SSR style order/hydration verified. - Tokens first; no broad global
.ant-*overrides. - Table has stable
rowKey; sort/filter/pagination entry is unified. - Select remote mode disables local filter when using remote search.
- Upload controlled/uncontrolled mode is explicit with failure/retry path.
- Pro route/menu/access remain consistent with backend enforcement.
- X streaming supports stop/retry and deterministic tool rendering.
- If
antdCLI was used, commands ran with--format jsonand any CLI defect was escalated viaantd bug-clipreview.
Discussion
Product Hunt–style comments (not star reviews)- No comments yet — start the thread.
Ratings
4.7★★★★★72 reviews- ★★★★★Isabella Zhang· Dec 28, 2024
ant-design fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
- ★★★★★Ava Ramirez· Dec 24, 2024
ant-design reduced setup friction for our internal harness; good balance of opinion and flexibility.
- ★★★★★Min Agarwal· Dec 20, 2024
Keeps context tight: ant-design is the kind of skill you can hand to a new teammate without a long onboarding doc.
- ★★★★★Dhruvi Jain· Dec 8, 2024
ant-design has been reliable in day-to-day use. Documentation quality is above average for community skills.
- ★★★★★Mia Sharma· Dec 4, 2024
ant-design has been reliable in day-to-day use. Documentation quality is above average for community skills.
- ★★★★★Oshnikdeep· Nov 27, 2024
ant-design reduced setup friction for our internal harness; good balance of opinion and flexibility.
- ★★★★★Xiao Kapoor· Nov 23, 2024
ant-design is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
- ★★★★★Ira Diallo· Nov 23, 2024
ant-design reduced setup friction for our internal harness; good balance of opinion and flexibility.
- ★★★★★Isabella Singh· Nov 19, 2024
We added ant-design from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
- ★★★★★Aditi Brown· Nov 15, 2024
ant-design has been reliable in day-to-day use. Documentation quality is above average for community skills.
showing 1-10 of 72