feat: 优化技能编辑页UI布局 - 新增概览卡片、信息卡片重构

重构技能编辑页面为四层结构：技能概览卡片（两行布局）→ 详细信息卡片 → 操作按钮区 → 版本管理

主要改进：
- 技能概览卡片：左侧80x80图标，右侧两行结构（技能名称 + 关键指标）
- 关键指标图标化：👥 订阅数、📦 当前版本、⭐ 评分
- 详细信息卡片：网格布局展示状态、分类、标签、技能描述、版本说明
- 操作按钮区：独立区域，视觉层次更清晰
- 响应式设计：移动端自适应布局

openspec/config.yaml

@@ -12,4 +12,4 @@ context: |
     - 不做安全防御性编程，eval/dangerouslySetInnerHTML等按需使用
     - README.md是项目的开发文档，记录代码结构和关键开发模式，优先读取获取上下文
     - 涉及页面/路由/组件/功能模块变更或技术栈调整时，同步更新README.md
-    - Git提交: 仅中文; 格式为"类型: 简短描述",类型可选: feat(新功能)/fix(修复)/refactor(重构)/docs(文档)/style(格式)/test(测试)/chore(构建/工具); 多行描述空行后加详细说明
+    - Git提交: 仅中文; 格式为"类型: 简短描述",类型可选: feat(新功能)/fix(修复)/refactor(重构)/docs(文档)/style(格式)/test(测试)/chore(构建/工具); 多行描述空行后加详细说明; 禁创建git操作task

openspec/specs/developer-basic-info-editing/spec.md

@@ -1,7 +1,7 @@
 ## ADDED Requirements
 
 ### Requirement: 基本信息编辑表单
-UpdateSkillInfoPage SHALL 提供技能基本信息的编辑表单，预填当前数据。
+UpdateSkillInfoPage SHALL 提供技能基本信息的编辑表单，预填当前数据。表单功能保持不变，但技能详情页的UI布局已更新。
 
 #### Scenario: 表单预填展示
 - **WHEN** 用户从技能详情页点击"更新基本信息"进入 UpdateSkillInfoPage
@@ -13,11 +13,11 @@ UpdateSkillInfoPage SHALL 提供技能基本信息的编辑表单，预填当前
 
 #### Scenario: 提交基本信息修改
 - **WHEN** 用户填写完基本信息后点击"保存修改"按钮
-- **THEN** 页面展示成功提示"保存成功"，并返回技能详情页
+- **THEN** 页面展示成功提示"保存成功"，并返回技能详情页（使用新的UI布局）
 
 #### Scenario: 取消编辑
 - **WHEN** 用户在基本信息编辑页面点击"取消"按钮
-- **THEN** 返回技能详情页，不保存任何修改
+- **THEN** 返回技能详情页（使用新的UI布局），不保存任何修改
 
 ### Requirement: 技能图标选择
 UpdateSkillInfoPage 和 UploadSkillPage SHALL 提供技能图标的 emoji 选择器。
@@ -31,8 +31,12 @@ UpdateSkillInfoPage 和 UploadSkillPage SHALL 提供技能图标的 emoji 选择
 - **THEN** 该图标高亮选中，之前的选中项取消高亮
 
 ### Requirement: 技能图标显示
-技能详情页 SHALL 在头部区域展示技能图标。
+技能详情页 SHALL 在技能概览卡片中展示技能图标，并采用新的UI布局设计。
 
 #### Scenario: 图标展示
 - **WHEN** 用户打开技能详情页
-- **THEN** 技能头部区域的图标位置显示该技能选择的 emoji 图标
+- **THEN** 技能概览卡片的图标位置显示该技能选择的 emoji 图标，图标尺寸为80x80像素，圆角16像素
+
+#### Scenario: 图标背景样式
+- **WHEN** 用户查看技能概览卡片中的图标
+- **THEN** 图标具有渐变背景（从#8B5CF6到#EC4899），白色文字，与新的设计系统一致

openspec/specs/skill-info-collapsible-panel/spec.md

@@ -0,0 +1,35 @@
+## Purpose
+技能信息折叠面板用于组织技能详细信息，解决信息重复显示问题，提供更好的信息组织和用户体验。
+
+## ADDED Requirements
+
+### Requirement: 技能信息折叠面板
+技能编辑页面 SHALL 提供可折叠的信息面板，用于组织技能详细信息，解决信息重复显示问题。
+
+#### Scenario: 折叠面板默认状态
+- **WHEN** 用户打开技能编辑页面
+- **THEN** 基本信息折叠面板默认展开，显示技能分类、标签、当前版本、版本说明和技能描述
+
+#### Scenario: 折叠面板收起/展开交互
+- **WHEN** 用户点击折叠面板的"收起"按钮
+- **THEN** 面板内容隐藏，按钮文字变为"展开"
+
+#### Scenario: 折叠面板展开交互
+- **WHEN** 用户点击折叠面板的"展开"按钮
+- **THEN** 面板内容显示，按钮文字变为"收起"
+
+#### Scenario: 信息网格布局
+- **WHEN** 用户查看展开的折叠面板
+- **THEN** 信息以网格布局展示，包含分类、标签、当前版本、版本说明和技能描述字段
+
+#### Scenario: 标签显示格式
+- **WHEN** 用户查看折叠面板中的标签字段
+- **THEN** 标签以圆角标签样式显示，多个标签之间用空格分隔
+
+#### Scenario: 版本说明显示
+- **WHEN** 用户查看折叠面板中的版本说明字段
+- **THEN** 显示当前版本的说明文字
+
+#### Scenario: 技能描述显示
+- **WHEN** 用户查看折叠面板中的技能描述字段
+- **THEN** 显示完整的技能描述文字，支持多行显示

openspec/specs/skill-overview-card/spec.md

@@ -0,0 +1,35 @@
+## Purpose
+技能概览卡片用于在技能编辑页面顶部集中展示技能核心信息，提供更好的信息组织和视觉体验。
+
+## ADDED Requirements
+
+### Requirement: 技能概览卡片
+技能编辑页面 SHALL 在页面顶部显示技能概览卡片，集中展示技能核心信息。
+
+#### Scenario: 卡片布局结构
+- **WHEN** 用户打开技能编辑页面
+- **THEN** 页面顶部显示技能概览卡片，包含技能图标、名称、状态标签和关键指标
+
+#### Scenario: 技能图标显示
+- **WHEN** 用户查看技能概览卡片
+- **THEN** 卡片左侧显示技能图标，图标尺寸为80x80像素，圆角16像素
+
+#### Scenario: 技能名称显示
+- **WHEN** 用户查看技能概览卡片
+- **THEN** 卡片右侧顶部显示技能名称，字体大小为24px，字体加粗
+
+#### Scenario: 状态标签显示
+- **WHEN** 用户查看技能概览卡片
+- **THEN** 技能名称下方显示状态标签，标签样式与现有状态标签系统保持一致
+
+#### Scenario: 关键指标显示
+- **WHEN** 用户查看技能概览卡片
+- **THEN** 状态标签右侧显示关键指标，包括订阅数和评分，指标之间用分隔符分隔
+
+#### Scenario: 卡片视觉样式
+- **WHEN** 用户查看技能概览卡片
+- **THEN** 卡片具有白色背景、圆角12像素、轻微阴影效果，与页面其他卡片样式一致
+
+#### Scenario: 响应式布局
+- **WHEN** 用户在较小屏幕设备上查看技能概览卡片
+- **THEN** 卡片内容自动调整布局，确保信息清晰可读