ant-to-shadcn
将Ant Design项目迁移至shadcn/ui和Tailwind CSS的指导规则集。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：ant-to-shadcn。 它的用途是：将Ant Design项目迁移至shadcn/ui和Tailwind CSS的指导规则集。 完整的 Skill 内容见：https://321skill.com/skills/ant-to-shadcn/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在将一个使用Ant Design的Vite React应用迁移到Next.js 14和shadcn/ui，请根据ant-to-shadcn Skill的规则，帮我规划第一步的详细任务清单，并解释如何设置‘遗留停放区’。” 它会基于Skill的指导，为你列出升级AntD版本、安装Tailwind和shadcn、扫描项目依赖、创建隔离目录等具体步骤，并说明如何配置CSS作用域来防止样式污染。
介绍
本Skill专为解决将现有基于Ant Design（CRA/Vite/React）的Web应用，平滑、高效地迁移到Next.js App Router架构，并采用shadcn/ui组件库与Tailwind CSS样式方案这一复杂工程问题。它提供了一套完整的迁移规则、最佳实践和操作指南，覆盖从项目初始化、主题令牌映射、组件替换到性能优化的全链路。
使用本Skill时，您将遵循一个清晰的“概念性”快速启动流程：首先升级Ant Design到6.x版本并修复警告；然后进行基线设置，安装Tailwind和shadcn，并启用MCP服务器以便组件发现；接着对现有项目进行全面盘点，包括组件、样式、路由和资产；之后将旧UI隔离到特定目录，逐步重建响应式布局、替换表单、表格等核心组件，并确保新老代码在迁移期间能够无样式冲突地共存。
它非常适合那些正在计划或正在进行技术栈升级的前端团队，特别是需要从Ant Design转向更现代、更定制化的shadcn/ui + Tailwind组合，同时希望保持应用原有业务逻辑、身份验证流程和API端点行为不变的开发者。
使用建议：建议在迁移前仔细阅读SKILL.md文件，理解迁移顺序和规则映射。特别注意“共存”阶段的管理，避免新旧组件样式污染。充分利用shadcn的MCP工具来安装组件，可以极大提升效率并保证代码一致性。
核心特点
与通用的UI重构指南不同，它提供了从Ant Design到shadcn/ui的精准组件映射和主题令牌转换规则，并特别设计了“遗留UI停放区”策略，支持新旧UI在同一个项目中无样式冲突地并行运行，实现渐进式、可逆的平滑迁移。
注意事项
不适用于非React项目或非Ant Design技术栈的迁移，也不直接提供一键自动转换代码的功能。
常见问题
这个Skill能自动把我的Ant Design代码转换成shadcn/ui代码吗？
不能。它提供的是指导规则、最佳实践和迁移路径，你需要根据规则手动或半自动地重构代码，但它能极大降低迁移的认知负担和出错风险。
迁移期间，我的老Ant Design页面还能正常工作吗？
可以。通过“遗留UI停放区”策略，将旧组件和CSS隔离到特定目录，可以确保在迁移过渡期内，新旧界面并存且互不干扰。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ant-to-shadcn/raw/index.md 读取 ant-to-shadcn 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ant-to-shadcn/raw/index.md（查看排版版本）