diff --git a/.claude/skills/antd-to-shadcn/SKILL.md b/.claude/skills/antd-to-shadcn/SKILL.md
index 39c8e80875..5f51beb855 100644
--- a/.claude/skills/antd-to-shadcn/SKILL.md
+++ b/.claude/skills/antd-to-shadcn/SKILL.md
@@ -19,11 +19,15 @@ description: Vue 3 项目从 Ant Design Vue 迁移到 shadcn-vue 的专业技能
### 抵制过时设计
**拒绝老气 UI**：
-- ❌ 粗重边框、多重边框嵌套
+- ❌ 粗重边框、多重边框嵌套（边框重叠）
- ❌ 灰暗沉闷的配色
- ❌ 过度装饰的渐变和阴影
- ❌ 拥挤无呼吸感的布局
- ❌ 间距混乱、缺乏层级
+- ❌ **老旧 Tabs 设计**（下方粗线、方块按钮感）
+- ❌ **Element UI 风格组件**（el-tabs、el-form 等）
+- ❌ **密集表单**（label 左对齐、无间距）
+- ❌ **重阴影卡片**（shadow-lg 以上）
**拥抱现代设计**：
- ✅ 轻量边框或无边框设计
@@ -31,6 +35,20 @@ description: Vue 3 项目从 Ant Design Vue 迁移到 shadcn-vue 的专业技能
- ✅ 克制的阴影（shadow-sm 为主）
- ✅ 充足留白，呼吸感
- ✅ 清晰的视觉层级（8px 间距递进）
+- ✅ **现代 Tabs**（胶囊式、underline 轻量）
+- ✅ **宽松表单**（label 上方、垂直布局）
+
+### 老旧组件识别与替换
+
+| 老旧模式 | 现代替代 |
+|---------|---------|
+| `a-tabs` / `el-tabs` 底部粗线 | shadcn `Tabs` 胶囊式 |
+| `a-segmented` | 自定义 pill 按钮 |
+| 密集 `a-form` | 宽松 `Form` 垂直布局 |
+| `a-card` 重阴影 | `Card` 无边框或轻边框 |
+| `a-descriptions` | 自定义 grid 布局 |
+| `a-breadcrumb` | shadcn `Breadcrumb` |
+| `a-pagination` | shadcn `Pagination` |
### 颜色设计原则
diff --git a/.claude/skills/antd-to-shadcn/references/STYLES.md b/.claude/skills/antd-to-shadcn/references/STYLES.md
index fdbea1227e..9bf424b627 100644
--- a/.claude/skills/antd-to-shadcn/references/STYLES.md
+++ b/.claude/skills/antd-to-shadcn/references/STYLES.md
@@ -482,3 +482,189 @@ Tailwind 使用 4px 基准：
```
+
+---
+
+## 老旧组件识别与现代化
+
+### 老旧 Tabs 设计
+
+**❌ 拒绝的老旧模式**：
+- 底部粗线指示器（2-3px 实线）
+- 方块按钮感，无圆角
+- 灰色背景分割条
+- 拥挤的标签间距
+
+**✅ 现代替代方案**：
+
+```vue
+
+
+
+
+
+
+
+
+
+
+ 标签一
+
+
+ 标签二
+
+
+ 内容一
+ 内容二
+
+```
+
+### 老旧表单设计
+
+**❌ 拒绝的老旧模式**：
+- Label 左对齐，密集排列
+- 表单项间距过小（<16px）
+- 边框重叠，视觉混乱
+- 灰暗的禁用状态
+
+**✅ 现代替代方案**：
+
+```vue
+
+
+```
+
+### 老旧卡片设计
+
+**❌ 拒绝的老旧模式**：
+- 重阴影（shadow-lg 以上）
+- 多重边框嵌套
+- 灰暗的头部背景
+- 拥挤的内边距
+
+**✅ 现代替代方案**：
+
+```vue
+
+
+
+
+
+
+
+```
+
+### 老旧按钮设计
+
+**❌ 拒绝的老旧模式**：
+- 方角按钮
+- 过重的渐变背景
+- 灰暗的 hover 状态
+
+**✅ 现代替代方案**：
+
+```vue
+
+
+
+
+
+
+
+
+```
+
+### 老旧表格设计
+
+**❌ 拒绝的老旧模式**：
+- 斑马纹背景（过时）
+- 粗重的边框线
+- 拥挤的单元格
+- 灰色的表头背景
+
+**✅ 现代替代方案**：
+
+```vue
+
+
+
+
+ 列名
+
+
+
+
+ 内容
+
+
+
+```
+
+### 边框重叠问题
+
+**识别边框重叠**：
+- 多个卡片紧挨，边框叠加成2px
+- 表格单元格边框重叠
+- 嵌套容器边框累积
+
+**解决方案**：
+```vue
+
+
+
+
+
+
+
+
+```
+
+---
+
+## 设计审查清单
+
+迁移时检查以下问题：
+
+- [ ] Tabs 是否使用现代胶囊式设计？
+- [ ] 表单是否有足够间距（space-y-6）？
+- [ ] 卡片阴影是否克制（shadow-sm）？
+- [ ] 边框是否避免重叠？
+- [ ] 颜色是否有活力（非灰暗）？
+- [ ] 按钮是否有圆角（rounded-lg）？
+- [ ] 表格是否简洁无斑马纹？
+- [ ] 整体是否有呼吸感？