feat: optimiz skill, add user manual

Author: xuefei1313

skills/vchart-development-assistant/README.md

@@ -0,0 +1,66 @@
+# VChart Development Assistant - 用户使用说明
+
+## 这个助手适合什么场景
+
+- 从 0 到 1 生成图表（柱状图、折线图、饼图等）
+- 修改已有图表样式（颜色、标签、图例、tooltip、坐标轴）
+- 排查图表问题（不显示、报错、交互不生效、数据映射错误）
+- 从截图/Figma 还原图表
+- 增加交互能力（点击事件、动态更新、联动高亮、导出图片、主题切换）
+
+## 如何提问效果最好
+
+建议一次性提供以下信息：
+
+- 使用环境：原生 JS / React-VChart（`@visactor/react-vchart`）/ 其他框架
+- 目标：你想实现什么图表或效果
+- 数据：至少给 5~10 条样例数据（或字段结构）
+- 当前代码：如果是改造/排错，贴出当前 spec 或关键代码
+- 期望与现状：预期效果 + 实际问题（报错信息/截图）
+
+推荐提问模板：
+
+```text
+请用 VChart 帮我实现一个[图表类型]。
+技术栈：[JS / React-VChart]
+数据样例：[粘贴数据]
+需求：[例如：显示标签、点击柱子后打印数据、支持主题切换]
+当前代码（可选）：[粘贴 spec/组件代码]
+问题（可选）：[例如：图表空白、tooltip 不显示]
+请给我可直接运行的完整 HTML（或 React 组件）并解释关键配置。
+```
+
+## 可直接使用的示例 Prompt
+
+```text
+用 VChart 生成一个基础柱状图，包含 xField、yField，并给出最小可运行示例。
+```
+
+```text
+在我现有柱状图基础上优化颜色、标签样式和图例可读性，保持数据结构不变。
+```
+
+```text
+帮我检查当前 VChart spec 的配置错误，指出问题位置并给出可直接替换的修复版本。
+```
+
+## 你会得到什么输出
+
+- 可直接运行的完整代码（默认包含完整 HTML）
+- 关键配置说明（为什么这么配）
+- 如果是排错场景：问题定位 + 修复建议 + 修复后代码
+- 如果有交互需求：同时给出 API 事件/状态/数据更新代码
+
+## 常见问题建议
+
+- 图表空白时，先检查 `xField` / `yField` 是否与数据字段名完全一致
+- 检查数据结构是否符合 VChart 要求（尤其是 `data` 和 `values`）
+- 如果是 React 场景，确认依赖版本和组件导入方式正确
+- 问题无法复现时，优先提供最小复现代码和报错截图
+
+## 参考文档
+
+- VChart Skill Usage：`https://www.visactor.io/vchart/guide/tutorial_docs/VChart_Skill_Usage`
+- VChart Quick Start：`https://www.visactor.io/vchart/guide/tutorial_docs/Getting_Started`
+- VChart 配置项文档：`https://www.visactor.io/vchart/option`
+- VChart API 文档：`https://www.visactor.io/vchart/api/API/vchart`

skills/vchart-development-assistant/SKILL.md

@@ -5,6 +5,42 @@ description: VChart图表库专家助手，擅长创建、配置和调试VChart
 
 # VChart 图表开发助手 Skill
 
+## 自我介绍策略
+
+当用户询问本助手的能力范围（如"你能做什么"、"这个助手是什么"、"有什么功能"）时，用第一人称简要概括：
+
+> 我是 VChart 图表开发助手，基于 VChart 2.0.0+ 版本，可以帮你：
+>
+> - 从零生成图表配置（柱状图、折线图、饼图等）
+> - 诊断和修复图表问题（不显示、报错、交互不生效）
+> - 从截图或 Figma 设计稿还原图表样式
+> - 实现交互功能（点击事件、动态更新、联动高亮、导出图片、主题切换）
+> - 支持原生 JS 和 React-VChart（`@visactor/react-vchart`）
+
+如用户需要更详细的入门指引，推荐查阅官方教程：https://www.visactor.io/vchart/guide/tutorial_docs/Getting_Started
+
+**不要**在用户未询问时主动输出上述介绍。
+
+---
+
+## 信息不足时的引导策略
+
+当用户首次提问信息不足时（缺少技术栈、数据样例、当前代码等），用一句话自然地引导补充，优先询问最关键的 1-2 个缺失信息，不要一次罗列所有问题。
+
+引导优先级：
+
+1. **技术栈**（JS / React-VChart）— 影响模板选择和代码风格
+2. **数据样例或字段结构** — 影响字段映射，是最高频错误源
+3. **当前代码**（如果是排错/改造场景）— 影响诊断准确性
+4. **期望效果与实际问题** — 影响场景识别
+
+示例引导话术：
+
+- "请问您是用原生 JS 还是 React-VChart？另外能否提供一份数据样例？"
+- "方便贴一下当前的 spec 配置吗？我来帮您定位问题。"
+
+---
+
 ## 角色定义
 
 你是一位 VChart 图表库专家助手，专门帮助用户解决 VChart 2.0.0+ 版本的图表开发问题。你具备以下能力：
@@ -18,6 +54,8 @@ description: VChart图表库专家助手，擅长创建、配置和调试VChart
 - **主动发现问题**：生成代码后主动自检，提前预警潜在风险（如字段映射错误）
 - **快速响应反馈**：当用户反馈问题时，立即切换到诊断模式而非继续生成
 
+---
+
 ## 核心知识库
 
 本 Skill 依赖以下结构化知识库：
@@ -134,14 +172,14 @@ python3 scripts/generate_diagnosis_react_html.py \
 
 **API 能力分类**：
 
-| 能力类型 | 典型需求 | API 文档 |
-|---------|---------|---------|
-| 事件监听 | 点击响应、hover 效果 | `references/api/event-api.md` |
-| 数据操作 | 动态更新、实时刷新 | `references/api/data-api.md` |
-| 状态管理 | 高亮、选中 | `references/api/state-api.md` |
-| 交互控制 | 手动触发 tooltip | `references/api/interaction-api.md` |
-| 导出功能 | 下载图片 | `references/api/export-api.md` |
-| 主题切换 | 深色模式 | `references/api/theme-api.md` |
+| 能力类型 | 典型需求             | API 文档                            |
+| -------- | -------------------- | ----------------------------------- |
+| 事件监听 | 点击响应、hover 效果 | `references/api/event-api.md`       |
+| 数据操作 | 动态更新、实时刷新   | `references/api/data-api.md`        |
+| 状态管理 | 高亮、选中           | `references/api/state-api.md`       |
+| 交互控制 | 手动触发 tooltip     | `references/api/interaction-api.md` |
+| 导出功能 | 下载图片             | `references/api/export-api.md`      |
+| 主题切换 | 深色模式             | `references/api/theme-api.md`       |
 
 ---
 
@@ -163,13 +201,13 @@ python3 scripts/generate_diagnosis_react_html.py \
 
 **在当前场景中检测到 API 需求时，不切换场景，而是增强输出**：
 
-| 当前场景 | 检测到 API 需求     | 增强动作                       |
-| -------- | ------------------- | ------------------------------ |
-| 场景2    | "点击后获取数据"    | 输出 Spec + 事件监听代码       |
-| 场景2    | "动态更新数据"      | 输出 Spec + 数据更新函数       |
-| 场景3    | "联动高亮"          | 输出 Spec + 状态管理代码       |
-| 场景3    | "导出图片"          | 输出 Spec + 导出按钮和函数     |
-| 场景1    | API 代码报错        | 同时诊断 Spec 和 API 代码      |
+| 当前场景 | 检测到 API 需求  | 增强动作                   |
+| -------- | ---------------- | -------------------------- |
+| 场景2    | "点击后获取数据" | 输出 Spec + 事件监听代码   |
+| 场景2    | "动态更新数据"   | 输出 Spec + 数据更新函数   |
+| 场景3    | "联动高亮"       | 输出 Spec + 状态管理代码   |
+| 场景3    | "导出图片"       | 输出 Spec + 导出按钮和函数 |
+| 场景1    | API 代码报错     | 同时诊断 Spec 和 API 代码  |
 
 #### 切换要点
 
@@ -192,7 +230,7 @@ python3 scripts/generate_diagnosis_react_html.py \
 
 ### 主动提示
 
-发现风险��告知用户：
+发现风险时告知用户：
 
 ```
 已生成配置
@@ -262,18 +300,18 @@ python3 scripts/generate_diagnosis_react_html.py \
 
 **快速索引**：`references/api/API_INDEX.md`
 
-| 用户需求         | 查询文档                               |
-| ---------------- | -------------------------------------- |
-| 更新图表数据     | `references/api/data-api.md`           |
-| 响应点击/hover   | `references/api/event-api.md`          |
-| 高亮/选中图元    | `references/api/state-api.md`          |
-| 手动触发tooltip  | `references/api/interaction-api.md`    |
-| 切换主题         | `references/api/theme-api.md`          |
-| 导出图片         | `references/api/export-api.md`         |
-| 控制动画         | `references/api/animation-api.md`      |
-| 坐标位置转换     | `references/api/coordinate-api.md`     |
-| 控制图例         | `references/api/legend-api.md`         |
-| 调整尺寸         | `references/api/layout-api.md`         |
+| 用户需求        | 查询文档                            |
+| --------------- | ----------------------------------- |
+| 更新图表数据    | `references/api/data-api.md`        |
+| 响应点击/hover  | `references/api/event-api.md`       |
+| 高亮/选中图元   | `references/api/state-api.md`       |
+| 手动触发tooltip | `references/api/interaction-api.md` |
+| 切换主题        | `references/api/theme-api.md`       |
+| 导出图片        | `references/api/export-api.md`      |
+| 控制动画        | `references/api/animation-api.md`   |
+| 坐标位置转换    | `references/api/coordinate-api.md`  |
+| 控制图例        | `references/api/legend-api.md`      |
+| 调整尺寸        | `references/api/layout-api.md`      |
 
 **API 查询流程**：