Agent skill
ant-design
Decision guide for antd 6.x, Ant Design Pro 5/ProComponents, Ant Design X v2, and the offline `@ant-design/cli`. Use for component selection, theming/tokens, SSR, a11y, performance, routing/access/CRUD, AI/chat UI patterns, local API lookup, debugging, migration, and usage analysis.
Install this agent skill to your Project
npx add-skill https://github.com/ant-design/antd-skill/tree/main/skills/ant-design
SKILL.md
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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
antd
Use when the user's task involves Ant Design (antd) — writing antd components, debugging antd issues, querying antd APIs/props/tokens/demos, migrating between antd versions, or analyzing antd usage in a project. Triggers on antd-related code, imports from 'antd', or explicit antd questions.
git-guardrails-claude-code
Set up Claude Code hooks to block dangerous git commands (push, reset --hard, clean, branch -D, etc.) before they execute. Use when user wants to prevent destructive git operations, add git safety hooks, or block git push/reset in Claude Code.
handoff
Compact the current conversation into a handoff document for another agent to pick up.
scaffold-exercises
Create exercise directory structures with sections, problems, solutions, and explainers that pass linting. Use when user wants to scaffold exercises, create exercise stubs, or set up a new course section.
setup-pre-commit
Set up Husky pre-commit hooks with lint-staged (Prettier), type checking, and tests in the current repo. Use when user wants to add pre-commit hooks, set up Husky, configure lint-staged, or add commit-time formatting/typechecking/testing.
edit-article
Edit and improve articles by restructuring sections, improving clarity, and tightening prose. Use when user wants to edit, revise, or improve an article draft.
Didn't find tool you were looking for?