uzhussain/ant-to-shadcn

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.