From e2fa68a3a66e008759efaed0285b189aa14e55da Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Wed, 11 Mar 2026 15:09:16 +0800 Subject: [PATCH] feat: optimiz skill, add user manual --- skills/vchart-development-assistant/README.md | 66 +++++++++++++ skills/vchart-development-assistant/SKILL.md | 94 +++++++++++++------ 2 files changed, 132 insertions(+), 28 deletions(-) create mode 100644 skills/vchart-development-assistant/README.md diff --git a/skills/vchart-development-assistant/README.md b/skills/vchart-development-assistant/README.md new file mode 100644 index 0000000000..dc8d0f3b02 --- /dev/null +++ b/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` diff --git a/skills/vchart-development-assistant/SKILL.md b/skills/vchart-development-assistant/SKILL.md index 378824164b..b7d068f7c0 100644 --- a/skills/vchart-development-assistant/SKILL.md +++ b/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 查询流程**：