FlowToSkill

在 Cursor / VS Code 中用流程图编排 Agent Skill 工作流，保存为 YAML，并导出为可安装的 Cursor Agent 技能（SKILL.md + 配套脚本）。

功能概览

• 可视化流程图编辑器（拖拽、连线、框选、缩放）
• 流程文件以 YAML 保存到本机，默认目录 ~/.FLOWTOSKILL/
• 导出前自动检查结构问题（缺少开始/结束节点、孤立节点、占位描述等）
• 两种导出方式：AI Chat 完整生成（推荐）与本地草稿
• 扩展激活时自动安装内置 flow-to-skill 技能到 ~/.agents/skills/

安装

方式一：安装 VSIX

1. 在仓库根目录执行 npm run package:vsix 生成 .vsix 文件
2. 在 Cursor / VS Code 中执行 Extensions: Install from VSIX…，选择该文件

方式二：从源码调试

npm install
cd webview && npm install && cd ..
npm run dev:webview   # 另开终端，Webview 热更新
# 在 Cursor 中打开本仓库，F5 启动扩展开发宿主

要求：VS Code / Cursor ^1.85.0。完整导出功能需在 Cursor 中使用（依赖 Agent 聊天面板）。

打开编辑器

任选一种方式：

1. 状态栏：窗口右下角点击 Flow To Skill
2. 命令面板：Ctrl+Shift+P（macOS：Cmd+Shift+P），执行 Flow To Skill: 打开流程图编辑器

编辑流程图

画布操作

• 左键框选节点；中键或右键拖拽平移画布
• 双击节点编辑描述文字
• 右键节点或空白处：剪切 / 复制 / 粘贴 / 删除 / 插入节点（Ctrl+X / Ctrl+C / Ctrl+V / Ctrl+A）

节点类型

文件

顶部 文件 菜单：

流程文件格式为 .yaml / .yml。

导出

顶部 导出 菜单提供两种方式。导出前会校验流程结构；存在错误时需确认「仍要导出」，仅有警告时可选择「继续导出」。

导出到 AI Chat…（推荐）

完整生成符合质量规范的 Agent Skill，包含 SKILL.md 与 scripts/ 目录。

1. 扩展确保内置 flow-to-skill 技能已安装到 ~/.agents/skills/flow-to-skill/
2. 打开 Cursor AI Chat，并填入当前流程图的 YAML 与 /flow-to-skill 调用提示
3. 在聊天中按 Enter 发送（若已开启自动发送可跳过）
4. Agent 会先请你确认英文技能名（必填，避免「未命名流程」），确认后再生成并写入 ~/.agents/skills/<英文名>/

此方式依赖 Cursor 的 Agent 聊天面板；请在 Cursor 中使用。

导出草稿 SKILL.md…

在本地快速生成 SKILL.md 草稿，默认保存路径为 ~/.agents/skills/<流程名>/SKILL.md。

• 适合预览章节结构或手工继续编辑
• 不会自动复制 scripts/ 目录；若需完整可执行技能，请使用「导出到 AI Chat…」

路径约定