antd-skill
Two official Ant Design skills: a guide to antd 6, Pro 5 and X 2 plus an offline antd reference workflow for code and migrations
- 137 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The `antd` skill lets the agent install a global npm package and run `antd` commands, including code edits during migration.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/antd-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The `antd` skill lets the agent install a global npm package and run `antd` commands, including code edits during migration.
This is third-party code. Review the repository files before installing.
What it does
antd-skill gives an agent two skills from the Ant Design team. The `ant-design` skill is a guide to antd 6 with React 18–19, to Ant Design Pro 5 with ProComponents and to Ant Design X 2 for streaming chat interfaces. It relies only on official documentation, gives a scheme for choosing components, themes and tokens and reminds the agent to check SSR, accessibility and speed. The `antd` skill builds the offline `@ant-design/cli` reference with metadata for versions 4, 5 and 6 into the work. Before writing a component the agent requests its props with `antd info Button --format json`, takes a working example through `antd demo`, looks at tokens and semantic classes, and runs `antd lint` after edits. The same commands help find failures, review antd usage in a project and move between versions. For a component question the skill first sends the agent to the Chinese and then the English documentation page on ant.design. The agent states conclusions briefly: the decision, the provider and theme, and the SSR, accessibility and performance checks.
Who it is for. React front-end developers using Ant Design components who build interfaces with an agent and want no invented props.
Good fit when
- An agent writes a form or table on antd and has to check props against the reference.
- A project on antd 5 moves to version 6, and before edits you want the list of changes and migrations.
- An admin panel is built on Ant Design Pro: routes, access and CRUD follow the scheme in the skill.
- A chat with streaming replies and tool calls is built on Ant Design X.
- The interface theme needs tuning through global and component tokens without editing `.ant-*` classes.
Not a fit when
- The interface is built on another component library: the skill refers only to Ant Design.
- You need beginner tutorials: the skill gives the agent decisions and contains no tutorials.
- The project is stuck on antd 3 or earlier: the offline reference covers versions 4 to 6.
Example request
Build a login form on antd 6: check the Form and Input props through the reference first, then run lint on the changed files.Limitations
The skills rest on antd 6 with React 18–19, Pro 5 and X 2. The `antd` skill needs the global `@ant-design/cli` package, which the agent installs with `npm install -g @ant-design/cli` if it is missing. The reference works offline, but some steps send the agent to ant.design pages. If an `antd` command crashes or returns wrong data, the skill asks for an `antd bug-cli` report to be prepared and shown to the user. The last commit in the repository dates from March 2026.
How to disable. Delete the `skills/ant-design` and `skills/antd` folders from the agent skills directory. The `@ant-design/cli` package is removed separately with `npm uninstall -g @ant-design/cli`.
FAQ
How do I install antd-skill in Claude Code?
Run `pnpx skills add ant-design/antd-skill` or `npx skills add ant-design/antd-skill`. The command installs both skills, `ant-design` and `antd`, from the `skills/` folder.
How do the ant-design and antd skills differ?
`ant-design` holds decisions for antd 6, Pro 5 and X 2 in one `SKILL.md`. `antd` drives the offline `@ant-design/cli` reference: prop lookup, debugging, migration and usage analysis.
Which antd versions does the reference cover?
The metadata bundled with `@ant-design/cli` covers versions 4, 5 and 6. The commands detect the version from `node_modules`, and the `--version <x.y.z>` flag sets it by hand.
What does the agent do before editing a component?
It requests the API with `antd info <Component> --format json`, takes a working example through `antd demo` and after the edits runs `antd lint <path> --format json`. The skill forbids inventing props.
How do I add my own skill to the collection?
Fork the repository, copy the folder of an existing skill and edit its `SKILL.md`. Then update the tables in both README files so the list stays accurate.
Discussion
No questions or reviews yet.
Related
SkillsOffline Ant Design reference for agents: props, tokens, demos and changelogs for antd v3 to v6, queried by command.
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI
The skill teaches an agent to build an AI agent chat from 26 Agent Elements components: tool cards, input bar, streaming
35 skills for Cursor, Claude and Codex: design systems from HTML and mocks, image generation, plan interviews and handoff.
A skill based on the components.build specification: how to build composable, accessible and styleable UI components and publish them
README in short
The document briefly lists the two skills, the scope and the install commands. It ends with answers to three questions: how the collection differs from tutorials, which skill to choose and how to extend the set.
README badge
Original SKILL.md
---
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