skills.rest
ant-design
ant-designOFFICIAL
Explore all skills by this author →
Website𝕏@AntDesignUIGitHub

antd-migration

Migrate Ant Design projects from v4 to v5 with breaking change handling.

99.3k|54.7k|Updated Apr 24, 2015
Search Tags:#upgrade#breaking-changes#codemod#css-in-js#antd#reAct#Migration
One-click install
npx skills add https://github.com/ant-design/ant-design --skill antd-migration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: antd-migration
Source: https://github.com/ant-design/ant-design/tree/main/public/.well-known/agent-skills/antd-migration
Command: npx skills add https://github.com/ant-design/ant-design --skill antd-migration

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Upgrading Ant Design between major versions involves breaking API changes, removed components, and a shift from Less to CSS-in-JS styling, making manual migration error-prone and time-consuming.

Core Features & Use Cases

  • Version Upgrade Guidance: Walks through migrating from antd v4 to v5, including theme token replacement via ConfigProvider and hook API updates.
  • Component Replacement Mapping: Identifies removed components like BackTop and Comment and provides their modern equivalents.
  • Automated Codemod Support: Recommends the @ant-design/codemod-v5 tool for scripted transformations of deprecated patterns.
  • Use Case: A team maintaining a large React application needs to upgrade from antd v4 to v5 and wants a structured checklist of breaking changes and automated tooling to handle deprecated imports.

Quick Start

Use the antd-migration skill to plan the upgrade of my React project from antd v4 to v5 and list the breaking changes I need to address.

Frequently Asked Questions about antd-migration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate from antd v4 to v5?▼

Replace Less theme customization with ConfigProvider theme tokens, update removed components like BackTop to FloatButton.BackTop, and switch message, notification, and modal to their hook-based APIs. Use @ant-design/codemod-v5 to automate common transformations.

What changed in Ant Design v5?▼

Ant Design v5 drops Less in favor of CSS-in-JS, changes class name prefixes to dynamic values, and removes several legacy components. Deprecated props across many components require updates, and the migration guide documents each breaking change.

Does antd v5 support the old Less theme variables?▼

No, antd v5 replaces Less-based theme customization with ConfigProvider theme tokens using CSS-in-JS. Existing Less variable overrides must be converted to the new token-based configuration system.

What is @ant-design/codemod-v5?▼

@ant-design/codemod-v5 is an automated codemod tool that transforms antd v4 code patterns into v5-compatible syntax. It handles common breaking changes such as import updates and deprecated prop replacements across a codebase.

Why are my antd class names different after upgrading to v5?▼

Ant Design v5 uses dynamic CSS-in-JS class names instead of the static ant- prefix used in v4. If your code or tests reference the old prefix, update them to use the new dynamically generated class names.

Related Skills

Explore More Software Engineering Skills→
pure-golangpure-golang
2

x-antd

Standardize Ant Design customization with Tailwind CSS layer ordering and scoped overrides.

Official
Intermediate
krutikJainkrutikJain
14

android-testing-ui

Automate Compose UI tests and Espresso checks for Android applications.

Community
Advanced
oceanbaseoceanbase
51

oceanbase-design-usage

Standardize OceanBase Design adoption with ConfigProvider, design tokens, and codemod migrations.

Official
Intermediate
1k-off1k-off
1

migrate-static-to-wrapper

Migrate static dependency call sites to injected wrappers within a bounded code scope.

Community
Intermediate