ant-to-shadcn-migration

Migrate Ant Design UIs to shadcn/ui + Tailwind (React/CRA/Vite → Next.js App Router). Use for: component replacement (no wrappers), Tailwind-first styling, canonical component consolidation, global CSS cleanup, route/layout scaffolding, and migration gotchas.

Install with Tessl CLI

npx tessl i github:uzhussain/ant-to-shadcn --skill ant-to-shadcn-migration

What are skills?

1.05x

Quality

81%

Does it follow best practices?

Impact

96%

1.05x

Average score across 3 eval scenarios

SKILL.md

Review

Evals

Evaluation results

100%

User Profile Settings Form Migration

Form migration to react-hook-form + shadcn

Criteria

Without context

With context

react-hook-form used

100%

zod schema defined

100%

zodResolver applied

100%

shadcn Form components

100%

Sonner toast for feedback

50%

100%

FormMessage for field errors

100%

Submit disabled while loading

100%

No Ant Form imports

100%

No Ant wrapper pattern

100%

shadcn Input used

100%

try/catch error handling

100%

Without context: $0.2951 · 1m 5s · 16 turns · 17 in / 3,954 out tokens

With context: $0.4321 · 1m 13s · 23 turns · 111 in / 4,533 out tokens

88%

-4%

Order Management Table Rebuild

Data table migration with TanStack

Criteria

Without context

With context

TanStack table used

100%

shadcn Table components

100%

Columns defined separately

100%

Loading skeleton state

20%

80%

Empty state shown

100%

Error state with retry

100%

getCoreRowModel used

100%

No antd Table import

100%

Sorting support

100%

Pagination support

100%

No Ant wrapper

100%

Without context: $0.4676 · 1m 46s · 23 turns · 23 in / 7,007 out tokens

With context: $1.0595 · 4m 1s · 35 turns · 3,109 in / 12,932 out tokens

100%

12%

Internal Tool Layout Scaffolding

App Router layout scaffold and icon replacement

Criteria

Without context

With context

App Router structure

100%

loading.tsx present

100%

error.tsx present

100%

Kebab-case routes

100%

Named lucide imports

100%

h-4 w-4 icon sizing

100%

No @ant-design/icons

100%

Single globals.css

100%

CSS vars defined

100%

Z-index scale

100%

Tailwind content paths

100%

Nav config-driven

100%

shadcn Breadcrumb used

100%

Without context: $0.6339 · 3m 5s · 35 turns · 77 in / 8,751 out tokens

With context: $1.1141 · 3m 3s · 39 turns · 1,503 in / 12,948 out tokens

Evaluated: 6 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

User Profile Settings Form Migration Order Management Table Rebuild Internal Tool Layout Scaffolding

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.