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

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

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

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** 卡片内容自动调整布局，确保信息清晰可读