Ant Design Skill: antd 6, Pro and X Decision Guide

What is the ant-design skill?

Before it writes any antd component code, the ant-design skill tells the agent to query the component API with antd info <Component> --format json. It is a decision guide for antd 6, Ant Design Pro 5 and Ant Design X v2, not a tutorial.

It lives at skills/ant-design in the ant-design/antd-skill repository, a small collection with a second skill named antd that focuses only on the offline @ant-design/cli workflow. Each is a single SKILL.md following one procedure.

Rules the agent must follow

• Query the component API first with antd info, and add --format json to every antd CLI command.
• Match the project version with --version, or let the CLI detect it from local node_modules.
• After changing antd code, run antd lint on the changed path.
• Use only documented antd, Pro and X APIs. Do not invent props, events or component names, and do not rely on internal DOM or .ant-* selectors.
• Map a component name to its official route slug in lowercase kebab-case, such as TreeSelect to tree-select, then read the docs in Chinese first with an English fallback.
• If a CLI command crashes or returns wrong data, prepare an antd bug-cli preview for you to confirm instead of silently working around it.

Three layers, one guide

Process and defaults

The agent first classifies the layer, core, Pro or X, then confirms version, rendering mode and data scale. It queries the CLI before official docs, then decides and returns a short rationale with risks and verification points.

Defaults are TypeScript, tokens first and then classNames and styles, and one root ConfigProvider. For server rendering the baseline adds StyleProvider. Theme priority runs from global to component to alias tokens. For general token thinking, see design-token.

The regression checklist

• One root ConfigProvider, with SSR style order and hydration verified.
• Tokens first, with no broad global .ant-* overrides.
• Tables have a stable rowKey, and sort, filter and pagination share one entry point.
• A remote Select disables local filtering when it uses remote search.
• Upload makes controlled or uncontrolled mode explicit, with a failure and retry path.
• X streaming supports stop and retry, with deterministic tool rendering.

Who the ant-design skill is for

Best for

• React teams on antd 6 who want the agent to stop guessing props and check them offline.
• Admin dashboards and CRUD screens built on Pro layouts, routing and access.
• AI chat interfaces built with Ant Design X, including streaming and tool rendering.
• Maintenance and upgrades, since the repository says v5 migration guidance is included.

Not for

• Beginners who want end-user tutorials. The README says the skill focuses on agent decisions instead.
• Projects using another component library. If you work with Tailwind and shadcn components, see shadcn.
• Building WordPress pages, since the output is React code.

Use it with UiChemy

The skill produces React code for antd, which WordPress does not run as it is. If your product UI uses antd and your marketing site runs on WordPress, share the same color and radius tokens between them.

Design the marketing pages in Figma with those tokens, then convert them with UiChemy Figma to WordPress. Click Get Started on uichemy.com. For an accessibility pass on the finished pages, see accessibility-audit.

How to install Ant Design Skill: antd 6, Pro and X Decision Guide

git clone https://github.com/ant-design/antd-skill.git

1. Clone the repository

   Run git clone https://github.com/ant-design/antd-skill.git. The skill sits in the skills/ant-design folder.

2. Copy the skill folder

   Copy skills/ant-design, with its LICENSE and references folder, to wherever your AI coding agent loads skills from. For Claude Code, use its skills location.

3. Make the CLI available

   The mandatory rules call the antd command from @ant-design/cli. The README does not show how to install it, so follow the CLI's own documentation.

4. Ask for antd work

   Request a component, a theme change, an SSR setup, a Pro CRUD page or an X chat interface from inside your antd project.

Check that it loaded

Ask the agent to add a TreeSelect to a form. It should run antd info for TreeSelect with --format json before writing code, then run antd lint on the changed file and keep one root ConfigProvider.

Read the official instructions on GitHub

Key features

• CLI-first API lookupantd info returns props and API as JSON, antd demo gives a working baseline, antd doc returns full docs, and antd token and antd semantic cover theming and styling hooks.
• Version matchingThe agent passes --version when the project version matters, or lets the CLI detect it from local node_modules.
• Lint after every changeAfter editing antd code the agent runs antd lint on the changed path with JSON output.
• Official docs orderA component name is mapped to its route slug, and the Chinese page is requested first with the English page as fallback.
• Layer classificationEach task is identified as core antd, Pro or X before advice is given, along with version, rendering mode and data scale.
• Provider and theming baselineCSR uses ConfigProvider. SSR adds StyleProvider. Theming moves from global tokens to component tokens to classNames and styles.
• Debug and upgrade commandsantd doctor, usage, migrate and changelog are named for debugging and upgrading, and the references folder holds a full offline CLI workflow.
• Output contractA short rationale of one to three sentences, a minimal provider and theming strategy, and concrete SSR, accessibility and performance checks.
• Pro and X directionPro answers include route, menu, access and CRUD schema direction. X answers include message and tool schema and streaming state.
• Regression checklistEight checks cover providers, tokens, tables, remote selects, uploads, Pro access, X streaming and CLI usage.

Frequently asked questions