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.
npx skills add ant-design/antd-skill --skill ant-design -a claude-codeWhat 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-code2Manually: put the files in place
~/.claude/skills/ant-design/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/ant-design/
1Skills CLI (Vercel)
npx skills add ant-design/antd-skill --skill ant-design -a codex2Manually: put the files in place
.agents/skills/ant-design/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add ant-design/antd-skill --skill ant-design -a cursor2Manually: put the files in place
.cursor/skills/ant-design/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install ant-design/antd-skill ant-design2Manually: put the files in place
.github/skills/ant-design/SKILL.md1Skills CLI (Vercel)
npx skills add ant-design/antd-skill --skill ant-design -a gemini-cli2Platform CLI
gemini skills install https://github.com/ant-design/antd-skill --path skills/ant-designManually: put the files in place
.devin/skills/ant-design/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add ant-design/antd-skill --skill ant-design -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
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