Ant Design

S - Scope

• Target: antd@^6 with React 18-19, plus ant-design-pro@^5 / @ant-design/pro-components and @ant-design/x@^2 when applicable.
• Cover: core components, theming/tokens, css-in-js, SSR, a11y, performance, Pro layouts/routing/access/CRUD, and X (AI/chat UI) patterns.
• Avoid: undocumented APIs, internal

  .ant-*

  class coupling, or cross-version mixing without explicit request.

Default assumptions (when not specified)

• Language: TypeScript.
• Styling: prefer tokens,

  classNames

  , and

  styles

  ; avoid global overrides.
• Provider: a single

  ConfigProvider

  at app root, unless isolation is required.
• Dependencies: do not add new packages unless required or requested.

Scope rules (must follow)

• Use only officially documented antd APIs and patterns.
• Do not invent props, events, or component names.
• Use only officially documented Pro/X APIs and patterns.
• Assume v6 by default; do not mix v5 APIs unless explicitly requested.
• Do not add global

  .ant-*

  overrides; prefer tokens and component tokens.
• Keep examples short; no long, multi-screen samples in the main skill.
• Do not rely on internal

  .ant-*

  classes or DOM details; if unavoidable, state risk and alternatives.
• Theme priority is fixed: global tokens -> component tokens -> alias tokens.
• For SSR, provide the minimal provider setup and verification points (hydration, style order, duplication).
• Route complex issues to

  Reference

  files; main skill gives only decisions and entry points.

Complex triggers (must open a

Reference

)

• More than 3 interaction states or cross-field linkage (Form).
• Remote search, large data, or custom rendering (Select).
• Server sorting/filtering/pagination, virtualization, fixed columns/headers (Table).
• Async load, checkStrictly, or virtualization (Tree).
• Controlled

  fileList

  ,

  customRequest

  , preview/auth edge cases (Upload).
• SSR style order, streaming/hydration errors, or performance bottlenecks.
• Pro layouts, route-driven menus, or access control (Layout/Access).
• ProTable/ProForm with request coupling, dynamic fields, or perf tuning.
• X streaming, tool rendering, or Markdown extensions beyond the defaults.

Reference

index (Chinese)

Reference

references/antd-v6.md

references/antd-v5.md

references/form-advanced.md

references/table-advanced.md

references/upload-advanced.md

references/select-advanced.md

references/tree-advanced.md

references/pro-v5.md

references/pro-layout-advanced.md

references/protable-advanced.md

references/proform-advanced.md

references/x-v2.md

references/x-components-advanced.md

references/x-sdk-advanced.md

references/x-markdown-advanced.md

Reference routing rule

• Do not expand advanced topics in the main skill.
• Jump to a

  Reference

  if any condition matches:
  • More than 3 interaction states.
  • Async flows or large data sets.
  • Virtualization or performance tuning.
  • Complex accessibility requirements.

P - Process

1) Identify the layer first

• Core antd UI, Pro admin app, or X chat/agent UI?
• If Pro or X is involved, route to the relevant

  Reference

  when complexity triggers match.

2) Clarify context before advising

• Framework and rendering: Next.js / Umi / Vite? CSR / SSR / streaming?
• antd version: confirm v6 if unclear.
• Theming depth: small token changes or component-level overrides?
• Data scale: large lists/tables/trees/selects?
• Interaction complexity: controlled state, linkage, async, auth, upload flows?

3) Provider minimal set

• CSR: usually

  ConfigProvider

  only.
• SSR or strict style order: add

  StyleProvider

  as per

  references/antd-v6.md

  .
• One app, one root provider; local themes only for isolation needs.

4) Component selection rules (core antd)

• Form: prefer

  Form

  as source of truth unless external state is required.
• Overlay:

  Modal

  for blocking flows;

  Drawer

  for side context or long content.
• Lists: structured data uses

  Table

  , light lists use

  List

  ;

  Table

  needs stable

  rowKey

  .
• Large data: use virtualization (see

  references/table-advanced.md

  ).
• Select: local filter uses

  filterOption

  ; remote search uses

  showSearch

  +

  filterOption={false}

  +

  onSearch

  (see

  references/select-advanced.md

  ).
• Upload: controlled flow uses

  fileList

  ; complex flow uses

  customRequest

  (see

  references/upload-advanced.md

  ).

5) Pro decision shortcuts (when Pro is in scope)

• Routes are the menu source of truth; avoid hand-built menus.
• Access control is page-first; UI hides are secondary; backend still enforces.
• CRUD uses ProTable/ProForm schemas as the source of truth (see Pro references).

6) X decision shortcuts (when X is in scope)

• Model messages/tools as serializable data; JSX is a pure view.
• Streaming needs stable keys, throttled updates, and scroll management (see X references).

7) Theming decision chain

1. Use global tokens for most cases.
2. Use component tokens or

   classNames

   /

   styles

   for differences.
3. Only if unavoidable, use scoped CSS overrides and state the risk.
4. Never rely on global

   .ant-*

   overrides.

8) Shunt complexity to

Reference

• If any complex trigger matches, provide decision + minimal skeleton +

  Reference

  path.
• Details live in the corresponding

  references/*.md

  .

9) a11y and performance checks

• a11y: keyboard access, focus management for overlays, icon buttons with

  aria-label

  , not color-only states.
• perf: stable keys, memoized columns, avoid frequent setState, use virtualization and throttling as needed.

O - Output

Output should include (as needed)

• Component and layout recommendations with 1-3 sentence rationale.
• Minimal provider and theming strategy.
• SSR, perf, and a11y risks with concrete mitigations.
• Pro: route/layout plan, access model, and ProTable/ProForm schema when relevant.
• X: message/tool schema and streaming state model when relevant.
• A

  Reference

  path when complex triggers match.
• Advice only (no code) when the request is selection or decision guidance.

Output forbidden

• Inventing antd APIs, tokens, or relying on internal classes without calling out risk.
• Replacing tokens with global CSS overrides.
• Vague SSR/hydration advice without verification points.

Regression checklist (prefer 5-10 items)

• Provider: one root

  ConfigProvider

  ; SSR style order is controlled.
• Theming: tokens first, no broad global

  .ant-*

  overrides.
• Form: validation and linkage are within

  Form

  and reproducible.
• Table: stable

  rowKey

  ; pagination/sort/filter entry points are consistent.
• Select: remote search disables local filter; a11y checks pass.
• Upload: controlled vs uncontrolled mode is clear; failure and retry flows defined.
• Overlays: close and destroy behavior is defined (

  destroyOnClose

  etc).
• Performance: stable keys and memoization; virtualization or throttling when needed.
• Pro: route-driven menus/access are consistent with backend enforcement.
• X: streaming state, stop/retry, and tool rendering are deterministic.