ant-to-shadcn-migration_skill

This skill migrates Ant Design components to shadcn/ui with Tailwind, generating layout skeletons and guiding aggressive CSS cleanup for Next.js App Router.

1

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill uzhussain/ant-to-shadcn --skill ant-to-shadcn-migration

SKILL.md16.2 KB

Overview

This skill helps migrate Ant Design frontends to shadcn/ui + Tailwind while moving apps from React (CRA/Vite) to Next.js App Router. It generates layout and page skeletons, maps Ant components to shadcn patterns, and provides aggressive guidance for legacy CSS and bundle cleanup. The goal is a phased, safe migration that preserves UX and reduces bundle size.

How this skill works

The skill scans the codebase for Ant imports, ConfigProvider usage, global LESS/CSS, inline Ant tokens, routes, and common Ant patterns (forms, tables, overlays). It produces a prioritized migration plan with rules for setup, theming, layout, forms, data display, overlays, accessibility, and testing. It can scaffold App Router layouts/pages (optionally role-aware), recommend component mappings, and flag CSS and z-index conflicts to remove legacy styles safely.

When to use it

Migrating a CRA or Vite React app that heavily uses Ant Design to Next.js App Router.
Replacing Ant components with shadcn/ui and Tailwind while consolidating design tokens.
When you need automated layout/page skeletons to accelerate refactor and reduce legacy cruft.
Cleaning global LESS, inline styles, and z-index stacks that conflict with Tailwind.
Phasing a large UI rewrite while running Ant and shadcn side-by-side safely.

Best practices

Upgrade Ant to the latest 6.x before mapping, then remove Ant CSS only after verification.
Bridge Ant tokens to CSS variables and Tailwind theme scales; add dark-mode guardrails.
Use react-hook-form + zod for form conversions and tanstack table for complex tables.
Scaffold role-aware App Router layouts and migrate routes incrementally to avoid big-bang swaps.
Run visual/a11y scans and bundle-size checks after each stage; virtualize large lists.

Example use cases

Auto-generate an App Router layout with sidebar, top nav, and mobile drawer replacing Layout.Sider and Menu.
Replace Form.Item patterns with shadcn inputs wired to react-hook-form and zod validation.
Map Ant Table to tanstack Table with skeleton states, pagination, and virtualized rows.
Convert Modal/Popconfirm to Dialog/AlertDialog and replace message/notification with sonner toasts.
Remove global Ant LESS, flag inline style tokens, and apply Tailwind resets and z-index tokens.

FAQ

Yes. Phase by phase coexistence is supported: scaffold new routes with shadcn while keeping legacy Ant views isolated until fully migrated.

How do I handle Ant tokens and theming?

Map Ant tokens to CSS variables and Tailwind theme keys, add dark-mode guardrails, and replace theme.useToken usages with the new token bridge.