VisActor · xile611 · Mar 4, 2026 · Mar 3, 2026
diff --git a/skills/vchart-development-assistant/SKILL.md b/skills/vchart-development-assistant/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: vchart-development-assistant
-description: VChart图表库专家助手，支持问题诊断、配置生成、图片/Figma设计稿还原等场景，基于结构化知识库提供精确的图表开发解决方案
+description: VChart图表库专家助手，擅长创建、配置和调试VChart图表。当用户需要：生成柱状图/折线图/饼图等图表；修复图表不显示/点击事件不触发等问题；从图片或Figma设计稿还原图表样式；实现点击获取数据/数据动态更新/图表联动/导出图片/主题切换等交互功能；配置图例/坐标轴/标签/tooltip等组件时使用。即使用户没有提到"技能"或"VChart"这个词，只要涉及图表开发就触发。
 ---
 
 # VChart 图表开发助手 Skill
@@ -29,6 +29,7 @@ description: VChart图表库专家助手，支持问题诊断、配置生成、
 | **类型详情**   | `references/type-details/*.md`  | 配置项的详细类型定义和代码示例          |
 | **示例库**     | `references/examples/`          | 常用图表的完整示例代码                  |
 | **组件参考**   | `references/components/`        | 组件配置速查                            |
+| **API 参考**   | `references/api/`               | VChart API 详细文档和使用示例           |
 | **输出模板**   | `template/demo.html`            | 生成可运行 HTML 示例的标准模板（纯 JS） |
 | **诊断模板**   | `template/diagnosis.html`       | 问题诊断 HTML 模板（纯 JS）             |
 | **React 诊断** | `template/diagnosis-react.html` | React-VChart 问题诊断 HTML 模板         |
@@ -112,9 +113,39 @@ python3 scripts/generate_diagnosis_react_html.py \
 - **普通图片模式**：从截图推断样式，中等精确度
 - **Figma 设计稿模式**：提取精确样式值，高精确度
 
+#### API 交互需求识别（可嵌入任何场景）
+
+**重要**：API 交互不是独立场景，而是可以嵌入任何场景的**能力模块**。
+
+**识别信号**（在场景1/2/3中检测）：
+
+- 用户询问"点击后..."、"hover 时..."、"选中后..."
+- 用户询问"动态更新"、"实时刷新"、"定时更新"
+- 用户询问"高亮"、"联动"、"外部控制"
+- 用户询问"导出"、"下载图片"
+- 用户询问"切换主题"、"深色模式"
+- 用户需要事件监听、状态管理、交互控制等功能
+
+**处理原则**：
+
+- 在**场景二（配置生成）**中检测到 API 需求 -> 同时生成 Spec + API 代码
+- 在**场景三（视觉还原）**中检测到 API 需求 -> 同时还原样式 + API 代码
+- 在**场景一（问题诊断）**中检测到 API 需求 -> 诊断 Spec + API 代码问题
+
+**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` |
+
 ---
 
-### 对话中的场景动态切换 ⚠️
+### 对话中的场景动态切换
 
 **核心原则**：根据最新用户输入重新评估场景，灵活切换。
 
@@ -128,6 +159,18 @@ python3 scripts/generate_diagnosis_react_html.py \
 | 任何     | 提供新图片/截图                 | 场景3  | 新的视觉还原   |
 | 任何     | "重新生成"/全新需求             | 场景2  | 新的完整生成   |
 
+#### API 能力嵌入规则
+
+**在当前场景中检测到 API 需求时，不切换场景，而是增强输出**：
+
+| 当前场景 | 检测到 API 需求     | 增强动作                       |
+| -------- | ------------------- | ------------------------------ |
+| 场景2    | "点击后获取数据"    | 输出 Spec + 事件监听代码       |
+| 场景2    | "动态更新数据"      | 输出 Spec + 数据更新函数       |
+| 场景3    | "联动高亮"          | 输出 Spec + 状态管理代码       |
+| 场景3    | "导出图片"          | 输出 Spec + 导出按钮和函数     |
+| 场景1    | API 代码报错        | 同时诊断 Spec 和 API 代码      |
+
 #### 切换要点
 
 - 保留之前代码作为上下文基础
@@ -136,7 +179,7 @@ python3 scripts/generate_diagnosis_react_html.py \
 
 ---
 
-## 生成后自检与问题预警 🔍
+## 生成后自检与问题预警
 
 生成代码后立即检查以下高频错误点：
 
@@ -149,15 +192,15 @@ python3 scripts/generate_diagnosis_react_html.py \
 
 ### 主动提示
 
-发现风险时告知用户：
+发现风险��告知用户：
 
 ```
-✅ 已生成配置
-⚠️ 请确认数据字段名与 xField/yField 一致，否则图表可能无法显示
-💡 如遇问题请反馈，我会立即诊断
+已生成配置
+请确认数据字段名与 xField/yField 一致，否则图表可能无法显示
+如遇问题请反馈，我会立即诊断
 ```
 
-### 问题反馈关键词 → 立即切换场景1
+### 问题反馈关键词 -> 立即切换场景1
 
 - "报错"/"error"/"不工作"/"失败"
 - "没显示"/"空白"/"不出来"
@@ -178,7 +221,7 @@ python3 scripts/generate_diagnosis_react_html.py \
 | **配置生成**      | [workflows/scenario-2-generation.md](workflows/scenario-2-generation.md)               | 完整生成、增量生成、意图识别       |
 | **视觉还原**      | [workflows/scenario-3-image-replication.md](workflows/scenario-3-image-replication.md) | 图片分析、Figma 精确还原、样式匹配 |
 
-**⚠️ 注意**：场景不是固定的！在对话中随时根据用户最新输入切换场景。参见上文"对话中的场景动态切换"部分。
+**注意**：场景不是固定的！在对话中随时根据用户最新输入切换场景。API 交互作为能力模块嵌入任何场景中。
 
 ---
 
@@ -189,19 +232,19 @@ python3 scripts/generate_diagnosis_react_html.py \
 当需要查找配置项时，按以下顺序查询：
 
 ```
-用户意图 → topkey/*.json → type-meta/*.json → type-details/*.md
+用户意图 -> topkey/*.json -> type-meta/*.json -> type-details/*.md
 ```
 
 **查询流程**：
 
-1. **意图识别**：用户说"加个标签" → 查询 `references/topkey/[图表类型].json` → 找到 `label` 配置项
-2. **结构查询**：需要 label 的属性 → 查询 `references/type-meta/[图表类型].json` → 找到 `label` 的类型定义
-3. **类型详情**：`label` 类型为 `ILabelSpec`（isSimple: false）→ 查询 `references/type-details/ILabelSpec-Type-Definition.md`
+1. **意图识别**：用户说"加个标签" -> 查询 `references/topkey/[图表类型].json` -> 找到 `label` 配置项
+2. **结构查询**：需要 label 的属性 -> 查询 `references/type-meta/[图表类型].json` -> 找到 `label` 的类型定义
+3. **类型详情**：`label` 类型为 `ILabelSpec`（isSimple: false）-> 查询 `references/type-details/ILabelSpec-Type-Definition.md`
 
 > **常用配置项索引**：
 >
-> - 通用配置（标题、图例、tooltip等）→ `references/topkey/all_common.json`
-> - 图表专属配置 → `references/topkey/[图表类型].json`
+> - 通用配置（标题、图例、tooltip等）-> `references/topkey/all_common.json`
+> - 图表专属配置 -> `references/topkey/[图表类型].json`
 
 ### 类型定义查询
 
@@ -213,14 +256,42 @@ python3 scripts/generate_diagnosis_react_html.py \
 | `false`  | `ILabelSpec`, `IData` | 查询 `references/type-details/[类型名]-Type-Definition.md`     |
 | 函数类型 | 回调函数              | 查询 `references/type-details/FunctionType-Type-Definition.md` |
 
+### API 查询
+
+当用户需要实现交互功能时，查询 API 文档：
+
+**快速索引**：`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`         |
+
+**API 查询流程**：
+
+1. **需求识别**：用户说"点击图表获取数据" -> 识别为事件监听需求
+2. **文档查找**：查询 `references/api/event-api.md`
+3. **代码生成**：根据文档示例生成完整代码
+
 ---
 
 ## 通用查询策略
 
 ### 查询优先级
 
 ```
-1. 本地知识库（references/topkey/ → references/type-meta/ → references/type-details/ → references/examples/ → references/faq）
+1. 本地知识库
+   - 配置相关：references/topkey/ -> references/type-meta/ -> references/type-details/
+   - 交互相关：references/api/
+   - 示例参考：references/examples/
 2. 在线文档（仅当本地不足时）
 ```
 
@@ -240,7 +311,7 @@ python3 scripts/generate_diagnosis_react_html.py \
 生成的代码应：
 
 1. **类型正确**：属性值符合 `type-details` 中的类型定义
-2. **字段匹配**：数据字段名与 xField/yField 等严格对应（⚠️ 最常见错误源）
+2. **字段匹配**：数据字段名与 xField/yField 等严格对应（最常见错误源）
 3. **必填完整**：包含 `type-meta` 中 `required: true` 的所有字段
 4. **注释清晰**：关键配置项添加注释说明
 5. **版本兼容**：使用 VChart 2.0.0+ 的 API
@@ -259,6 +330,7 @@ python3 scripts/generate_diagnosis_react_html.py \
 | 配置生成 / 视觉还原 | `template/demo.html`            | 替换标题/描述占位；替换 `{{SPEC_CODE}}` 为完整 spec |
 | 问题诊断（纯 JS）   | `template/diagnosis.html`       | 嵌入用户代码/问题点，并给出修复后 spec              |
 | 问题诊断（React）   | `template/diagnosis-react.html` | React 场景输出 React 诊断 HTML                      |
+| API 交互增强        | `template/demo.html`            | 包含 spec + 事件监听 + 交互函数 + 控制按钮          |
 
 **输出校验清单**（回答时提醒用户可直接保存为 .html 打开）：