Skip to main content
skill CX Codex

ant-design — Claude Code skill: antd answers without guesswork

A decision guide for antd 6.x, Ant Design Pro 5 and Ant Design X v2. It steers the agent through component choice, tokens and SSR.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add ant-design/antd-skill --skill ant-design -a claude-code
Open on GitHub

What ant-design does

The skill sets an order of operations for Ant Design work: ask the offline @ant-design/cli about the API before touching component code. Component props come from antd info <Component> --format json, a working baseline from antd demo, theming and styling hooks from antd token and antd semantic. After edits, antd lint <changed-path> --format json runs on the changed path. Pin a project version with --version <x.y.z> or let the CLI read the local node_modules.

What's inside is rules, not tutorials. One root provider per app: ConfigProvider for CSR, plus StyleProvider under SSR. Theming walks from global tokens to component tokens, and broad .ant-* overrides are off the table. Separate sections cover Pro routing, menus and access control, CRUD schemas, and for X the message and tool schemas with streaming state.

The regression checklist is the practical part: stable rowKey on tables, local filtering disabled in Select when remote search is on, explicit controlled or uncontrolled mode for Upload with a retry path. The skill targets React 18-19 and TypeScript and sticks to documented APIs. If an antd command crashes or returns bad data, the agent prepares an antd bug-cli preview for confirmation instead of quietly routing around it.

What it helps with

  • pick the right antd component for a screen
  • theme through tokens instead of global CSS overrides
  • build a table with sorting, filters and pagination
  • wire routes, menus and access control in Ant Design Pro
  • define streaming and tool rendering for a chat UI on Ant Design X

Example prompts for the agent

  • Look up the TreeSelect API with antd info and suggest a multi-select variant
  • Build a profile edit form on antd 6 using theme tokens, then run antd lint on the changed files
  • I need a chat with streamed replies — outline the message and tool schema for Ant Design X v2

How to install ant-design

1Skills CLI (Vercel)

npx skills add ant-design/antd-skill --skill ant-design -a claude-code

2Manually: put the files in place

~/.claude/skills/ant-design/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/ant-design/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about ant-design

How do I install ant-design in Claude?

Run npx skills add ant-design/antd-skill --skill ant-design -a claude-code. The skill file lands at ~/.claude/skills/ant-design/SKILL.md.

What does the ant-design skill do?

It gives the agent rules for component selection, theming, SSR, accessibility and performance across antd 6.x, Ant Design Pro and Ant Design X. It also requires checking APIs through the offline @ant-design/cli.

Which versions does it cover?

It targets antd@^6 with React 18-19, plus ant-design-pro@^5 and @ant-design/x@^2 when needed. For a specific release, pass --version <x.y.z>.

Source text

SKILL.md · MIT
---
name: ant-design
description: 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.
---

# Ant Design

## S - Scope
- Target: `antd@^6` + React 18-19, with `ant-design-pro@^5` / `@ant-design/pro-components` and `@ant-design/x@^2` when needed.
- Tooling: `@ant-design/cli` for 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 `ConfigProvider` unless 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 json` with `antd` CLI commands.
- If the project version matters, match it with `--version <x.y.z>` or let the CLI auto-detect from local `node_modules`.
- After changing antd code, run `antd lint <changed-path> --format json`.
- If an `antd` CLI command crashes, returns wrong data, or violates its documented behavior, prepare an `antd bug-cli` preview 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):
  1. `https://ant.design/components/{components}-cn`
  2. `https://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/cli` should be the primary lookup path.

### 2) Query authoritative sources
- Prefer local `@ant-design/cli` first for structured lookup:
  - `antd info` for props/API
  - `antd demo` for a working baseline
  - `antd doc` for full docs
  - `antd token` / `antd semantic` for theming and styling hooks
  - `antd doctor`, `antd lint`, `antd usage`, `antd migrate`, `antd changelog` when debugging or upgrading
- Then request the official component docs (`-cn` first, 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 `antd` CLI was used, commands ran with `--format json` and any CLI defect was escalated via `antd bug-cli` preview.

© ant-design · MIT · ant-design/antd-skill

Similar skills

Everything for Frontend and UI →

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor