AI 应用Agent 工作流开发工具MCP 服务【免费下载链接】cc-wf-studioCC Workflow Studio项目地址https://gitcode.com/gh_mirrors/cc/cc-wf-studio点击查看免费下载导读本文围绕 CC Workflow Studiocc-wf-studio仓库中001-skill-node特性Skill 节点集成的需求规范与功能规格展开完整讲解该特性从可视化画布新增 Skill 节点到浏览、引用、新建 Claude Code Skills 并导出到工作流的完整闭环。读完本文你将掌握 Skill 节点的数据模型与校验规则、浏览/新建/校验三大能力的扩展端与 Webview 端调用链以及缺失文件、命名冲突、非法 YAML 等边界情况的处理策略并能直接据此在可视化编辑器中配置可运行的 Skill 工作流。特性背景为什么需要 Skill 节点Claude Code Skills 是以SKILL.md带 YAML frontmatter 的 Markdown 文件为载体的可复用 Agent 能力单元通常存放在个人目录~/.claude/skills/skill-name/或项目目录.claude/skills/skill-name/下。此前CC Workflow Studio 的可视化画布虽然已经支持 SubAgent、AskUserQuestion 等多种节点却无法把这类既有的 Agent 能力直接编排进可视化工作流——用户只能手工书写指令无法复用团队已经沉淀好的 Skill。001-skill-node特性功能分支001-skill-node规格创建于 2025-11-08正是为了解决这个断层在画布节点面板中新增Skill节点类型允许用户引用个人或项目中的既有 Skill也可以直接在可视化编辑器中新建 Skill从而打通可视化工作流设计与可复用的模型调用式 Agent 能力之间的桥梁。该特性的需求质量清单位于 requirements.md完整功能规格位于 spec.md。需求规范与验收标准总览需求清单把特性划分为三个维度进行校验内容质量Content Quality、需求完备性Requirement Completeness与功能就绪度Feature Readiness三项均以 ✅ PASS 通过内容质量规范只回答 WHAT 与 WHY不出现 TypeScript、React、VSCode API 等实现细节面向业务干系人编写用户故事 验收场景所有必填章节用户场景、需求、成功标准均已填写。需求完备性16 条功能需求FR-001 ~ FR-016全部可测试、无歧义成功标准包含可量化的指标30 秒、95%、2 分钟3 条按优先级排序的用户故事均带验收场景识别出 5 个边界情况并给出处理策略Out of Scope 清晰划定边界Assumptions 记录了依赖前提。功能就绪度每条 FR 都能映射到用户场景FR-003/FR-004 → P1FR-008/FR-009 → P3主流程覆盖浏览 → 选择 → 配置 → 导出次流程为新建 Skill成功标准覆盖核心价值 SC-001配置速度与 SC-004创建速度。该清单的最终结论是规格已完成可进入/speckit.plan规划阶段。核心思路是先重用在重造P1 复用既有个人 Skill最高频场景、P2 团队项目级 Skill 协作、P3 从可视化编辑器直接新建 SkillMVP 的便利性功能不阻断主路径。成功标准可量化指标规格定义了 6 条可测量的成功标准这些数字在后续实现与测试中就是验收红线编号可测量结果SC-001用户在 30 秒内可将 Skill 节点加入工作流并配置为引用既有 SkillSC-002可浏览并选择至少 10 个既有 Skill个人 项目而无性能退化SC-00395% 的合法 SKILL.md 文件能被正确解析并显示在 Skill 浏览器中SC-004用户无需离开可视化编辑器即可在 2 分钟内新建一个基础 Skill名称、描述、简单指令SC-005含 Skill 节点的工作流可成功导出且包含清晰的 Skill 依赖说明文档SC-006当引用的 Skill 文件缺失时用户收到明确警告并能在 1 分钟内解决重新选择或移除引用Skill 节点数据模型与核心实体SkillNodeData节点数据结构从核心类型定义 workflow-definition.ts 可以看到Skill 节点的数据结构比最初规格更丰富实际实现扩展了executionMode、executionPrompt、source、pluginName等字段export interface SkillNodeData { name: string; // 从 SKILL.md frontmatter 提取的 Skill 名称 description: string; // 从 SKILL.md frontmatter 提取的描述 skillPath: string; // SKILL.md 路径user/local 为绝对路径project 为相对路径 scope: user | project | local; allowedTools?: string; // 可选来自 frontmatter 的 allowed-tools validationStatus: valid | missing | invalid; outputPorts: 1; // 固定为 1与 SubAgent 节点一致 source?: claude | copilot; // project 级 Skill 的来源目录 executionMode?: load | execute; // execute执行load仅加载为上下文 executionPrompt?: string; // execute 模式下附加的定制执行提示 pluginName?: string; // 插件提供的 Skill 名称前缀如 with-me:skill-name }关键实体关系Skill Node表示一次 Claude Code Skill 调用的工作流节点。属性为节点 ID、位置、引用的 Skill 路径、Skill 元数据名称、描述通过输入/输出端口与其他节点连接。Skill Reference指向某个 SKILL.md 文件的指针。属性为文件路径绝对或相对、Skill 名称、描述、作用域personal/project校验确保 YAML frontmatter 合法且必备字段齐全。Skill Metadata从 SKILL.md frontmatter 解析出的信息name、description、allowed-tools。属性面板的 Schema 驱动渲染Skill 节点属性面板由 skill-schema.ts 的skillPropertySchema驱动注册于 node-schema-registry.ts覆盖 name、description、skillPath、scope、validationStatus、allowedTools、executionMode、executionPrompt、source、pluginName 等字段其中 scope / validationStatus / executionMode 在 Webview 面板中以徽章/图标形式定制渲染。由于 Skill 属性来自 SKILL.md 文件面板整体为只读模式修改入口是底部的编辑对话框见 skill-panel.tsx提示语明确指出Skill properties are read-only and loaded from SKILL.md file. To modify, edit the source file directly.。用户故事与验收场景P1引用既有个人 Skill用户把个人目录~/.claude/skills/中已沉淀的 Skill例如pdf-form-filler拖入可视化工作流无需重新实现即可复用专项能力。独立测试创建一个 Skill 节点指向~/.claude/skills/test-skill/SKILL.md导出工作流运行后验证 Skill 是否按 description 触发而自动激活。验收场景要点拖入 Skill 节点后出现配置项 → 点击属性面板Browse Skills显示~/.claude/skills/与.claude/skills/中的 Skill 列表 → 选中后节点标签更新为 Skill 名称SKILL.md 路径写入节点数据 → 导出的 SlashCommand 执行时引用 Skill 自动激活。P2引用项目共享 Skill团队协作团队成员引用项目目录.claude/skills/下由他人提交的 Skill保证全团队工作流执行一致。关键点浏览时同时列出个人与项目 Skill并以明确标识图标或 Personal / Project 标签区分来源保存工作流时项目 Skill 使用相对路径.claude/skills/team-skill/SKILL.md保证跨团队成员环境可移植团队成员个人目录缺少该 Skill 时引用依然有效、无断链。这一点在实现中被严格执行scanSkills对scope project的 Skill 会调用toRelativePath把绝对路径转换为相对路径后存入节点数据见 skill-service.ts。P3从可视化编辑器新建 Skill在 Skill 节点属性面板点击 Create New Skill填写表单名称、描述、指令、allowed-tools、作用域后保存系统在对应目录生成新的SKILL.md且对话框关闭后节点自动引用新创建的 Skill非法输入空名称、特殊字符时显示带明确指引的校验错误。功能需求FR全集规格共 16 条功能需求全部可测试、无歧义FR-001系统必须在节点面板中新增 Skill 节点类型与 SubAgent、AskUserQuestion 等并列。FR-002Skill 节点必须在面板与画布上显示区别于其他节点类型的图标与标签。FR-003系统必须允许用户浏览~/.claude/skills/与.claude/skills/中的既有 Skill。FR-004Skill 浏览器必须展示 Skill 列表名称、来自 YAML frontmatter 的描述、来源位置 Personal/Project。FR-005系统必须校验所选 Skill 文件包含合法 YAML frontmatter 且必备字段name、description齐全。FR-006Skill 节点属性面板必须显示所引用 Skill 的名称、描述与完整文件路径。FR-007系统必须允许用户重新打开浏览器、更换所引用的 Skill。FR-008系统必须在 Skill 节点属性面板提供 Create New Skill 按钮。FR-009Skill 创建对话框必须包含以下字段Skill 名称小写、连字符、最长 64 字符、需校验描述最长 1024 字符指令Markdown 内容Allowed-tools可选从可用工具列表多选作用域Personal 或 ProjectFR-010新建 Skill 时系统必须创建目录~/.claude/skills/[skill-name]/或.claude/skills/[skill-name]/。FR-011系统必须生成带合法 YAML frontmatter 与 Markdown 内容的SKILL.md文件。FR-012系统必须阻止在目标目录创建同名 Skill。FR-013Skill 节点必须在节点数据中存储所引用 SKILL.md 的完整文件路径。FR-014系统必须检测引用 Skill 文件缺失/不可访问并在 Skill 节点上显示警告。FR-015导出的工作流必须包含说明所引用 Skill 依赖关系的文档。FR-016Skill 节点必须有且仅有 1 个输入端口与 1 个输出端口与 SubAgent 节点行为一致。边界情况与处理策略规格明确定义了 5 个边界情况及其处理策略这些都在后续实现中落地为可观测行为边界情况处理策略引用的 Skill 文件被删除/移动加载工作流时检测缺失在 Skill 节点上显示警告指示符提示用户重新选择合法 Skill 或移除失效引用同名 Skill 冲突个人与项目目录同时存在浏览时显示完整路径或明确标识如 personal: my-skill vs project: my-skill允许用户显式选择节点数据存储完整路径以避免歧义SKILL.md 的 YAML frontmatter 非法浏览时跳过非法 Skill 并记录警告可选地在浏览对话框中显示错误信息说明哪些 Skill 无法加载及原因含 Skill 节点的工作流导出到.claude/commands/导出的 SlashCommand 应包含按名称引用 Skill 的指令Skill 依据 description 被模型调用工作流文档注明对 Skill 存在的依赖创建同名 Skill显示错误A Skill with this name already exists in [directory]. Choose a different name or edit the existing Skill manually.未经明确确认不得覆盖既有 SkillOut of Scope明确不做的范围为避免范围蔓延规格明确排除从可视化编辑器编辑既有 SKILL.md 文件创建对话框支持高级 Skill 特性reference.md、scripts/、templates/ 等支持文件Skill 的版本控制集成如新建 Skill 自动提交 gitSkill 指令的实时校验基于工作流上下文的自动 Skill 发现/推荐从远程仓库或市场导入 Skill。实现纵深从契约到源码的调用链以下结合仓库实际实现说明规格如何在扩展端Extension Host与 Webview 端落地。消息契约扩展端 ↔ Webview 的全部消息类型定义在 skill-messages.ts包含三个请求方向Webview → ExtensionBROWSE_SKILLS扫描~/.claude/skills/与.claude/skills/、CREATE_SKILL携带CreateSkillPayload、VALIDATE_SKILL_FILE校验单个文件。Extension → WebviewSKILL_LIST_LOADED返回SkillReference[]与 personal/project 计数、SKILL_CREATION_SUCCESS/SKILL_CREATION_FAILED、SKILL_VALIDATION_SUCCESS/SKILL_VALIDATION_FAILED。SkillReference数据结构interface SkillReference { skillPath: string; // SKILL.md 绝对路径 name: string; // 来自 YAML frontmatter description: string; // 来自 YAML frontmatter scope: personal | project; validationStatus: valid | invalid; allowedTools?: string; // 可选 }错误通过SkillValidationErrorPayload.errorCode枚举化便于 i18n 查找SKILL_NOT_FOUND、INVALID_FRONTMATTER、NAME_CONFLICT、INVALID_NAME_FORMAT、DESCRIPTION_TOO_LONG、INSTRUCTIONS_EMPTY、FILE_WRITE_ERROR、UNKNOWN_ERROR。扩展端Skill 服务文件 I/Oskill-service.ts 是文件级实现核心包含三个导出能力scanSkills(baseDir, scope, source)遍历目录下每个子目录读取SKILL.md调用 frontmatter 解析器提取元数据合法则收集project 作用域转相对路径frontmatter 缺 name 时回退到目录名非法则console.warn后跳过目录不存在则返回空数组。scanAllSkills()并发扫描 7 类 Agent 来源claude、copilot、codex、roo、gemini、antigravity、cursor的 user 目录与 project 目录外加通过scanPluginSkills()扫描插件 Skill读取~/.claude/plugins/installed_plugins.json与known_marketplaces.json按 projectPath 匹配当前工作区本地优先于用户作用域返回{ user, project, local }三组 Skill。所有来源都展示、不去重让用户看到全部可用 Skill。validateSkillFile(skillPath)读取并解析文件frontmatter 非法抛Invalid SKILL.md frontmatter: missing required fields文件不存在ENOENT抛SKILL.md file not found at ...。createSkill(payload)按 scope 取基础目录user 用getUserSkillsDir()project 用getProjectSkillsDir()fs.access检测同名目录存在即抛 NAME_CONFLICT 类错误mkdir递归建目录用generateSkillFileContent生成内容并写入SKILL.md写失败时递归清理已建目录fs.rm后抛错保证不留半成品。SKILL.md 内容生成器skill-file-generator.ts 按 CreateSkillPayload 生成标准 SKILL.md 内容--- name: test-generator description: Generates unit tests allowed-tools: Read, Write # 仅当提供了 allowedTools 时输出 --- # Test Generator Generates tests...生成逻辑第 50-67 行固定输出---与name、description两行必填 frontmatterallowedTools非空时追加allowed-tools行最后拼接指令正文。这与 Claude Code Skills 的标准 frontmatter 格式保持一致。YAML frontmatter 解析器yaml-parser.ts 刻意零依赖实现解析用正则^---\r?\n([\s\S]*?)\r?\n---提取 frontmatter 块同时兼容 LF 与 CRLF再用行级正则提取name、description、allowed-toolsdescription缺失即返回 null必填name缺失则回退为空字符串交由调用方用目录名兜底。扩展端命令处理器skill-operations.ts 承接 Webview 的三个请求并写入输出通道CC Workflow Studio记录扫描耗时与找到的 user/project/local 数量handleBrowseSkills调用scanAllSkills()合并三组后回发SKILL_LIST_LOADED含userCount/projectCount/localCount与 ISO 时间戳。handleCreateSkill调用createSkill(payload)成功后回发SKILL_CREATION_SUCCESS含创建的skillPath与时间戳。handleValidateSkillFile调用validateSkillFile并根据路径归一化Windows 兼容的\→/后是否包含/.claude/skills判断 scope错误消息包含file not found时映射SKILL_NOT_FOUND包含Invalid SKILL.md frontmatter时映射INVALID_FRONTMATTER。Webview 端Skill 浏览器服务skill-browser-service.ts 用 requestId 关联响应三个方法browseSkills()、createSkill()、validateSkillFile()均带10 秒超时REQUEST_TIMEOUT 10000超时或错误时 reject 并移除监听器避免悬挂 Promise。Webview 端三个对话框组件SkillBrowserDialog.tsx打开时异步加载 Skill 并按 scope 分为 user/project/local 三个 Tab提供关键词过滤、按来源claude/copilot/codex/roo/gemini/antigravity/cursor分组的跳转导航与来源徽章Skill 行展示名称插件 Skill 显示pluginName:name、描述、scope 徽章、校验状态图标✓/⚠/✗选择后进入第二步配置 executionMode 与 executionPrompt最后以避开既有节点重叠位置算法计算坐标通过addNode将 Skill 节点写入画布data 完整携带 name、description、skillPath、scope、validationStatus、allowedTools、outputPorts: 1、source、pluginName、executionMode、executionPrompt。SkillCreationDialog.tsx表单包含名称必填占位符my-skill、描述必填3 行、指令必填8 行 Markdown、allowed-tools可选占位符Read, Grep, Glob, Bash、作用域user/project 单选描述与指令支持点击EditInEditorButton在编辑器内编写提交前走前端校验成功后刷新列表。SkillNodeEditDialog.tsx编辑 Skill 节点的executionModeexecute/load 单选与executionPromptexecute 模式专用maxLength受VALIDATION_RULES.SKILL.EXECUTION_PROMPT_MAX_LENGTH约束实时显示字数。前端校验规则skill-validation.ts 实现四类字段校验与核心层VALIDATION_RULES.SKILL见 workflow-definition.ts保持一致名称^[a-z0-9-]$小写字母、数字、连字符1~64 字符描述1~1024 字符指令至少 1 个字符非空作用域必须为user或project。错误以 i18n key如skill.validation.nameInvalidFormat返回由翻译层展示。节点画布渲染与校验状态可视化SkillNode.tsx 定义了画布上的 Skill 节点渲染头部为Zap 闪电图标 Skill 大写标签与 FR-002 的要求对应校验状态实时可视化valid显示绿色 ✓、missing显示警告色 ⚠、invalid显示错误色 ✗悬停有 tooltip对应 FR-014名称区显示pluginName:name插件 Skill或name未命名时显示Untitled Skill展示 description 或 executionPrompt两行截断scope、来源AIProviderBadge、LOAD ONLY徽章executionMode load 时显示与 allowed-tools 一目了然左侧 1 个输入 Handle、右侧 1 个输出 Handle即 FR-016 的恰好 1 进 1 出。在核心校验层 validate-workflow.tsvalidateSkillNode对节点数据做结构校验必填字段name、description、scope、validationStatus、outputPorts缺失报SKILL_MISSING_FIELDvalidationStatus ! missing时 skillPath 必填名称不符NAME_PATTERN报SKILL_INVALID_NAME、超长报SKILL_NAME_TOO_LONG描述超长报SKILL_DESC_TOO_LONGoutputPorts ! 1报SKILL_INVALID_PORTS提示需要分支请使用 ifElse 或 switch 节点executionPrompt 超长报SKILL_EXECUTION_PROMPT_TOO_LONG。导出与运行Skill 如何进入真实工作流工作流提示词生成执行语义workflow-prompt-generator.ts 定义了 Skill 节点在生成工作流提示词时的三种语义#### skill-node-id(skill-name) - **Prompt**: skill skill-name # execute 模式无附加提示 - **Prompt**: skill skill-name 执行提示内容 # execute 模式 executionPrompt - **Prompt**: skill skill-name load-skill-knowledge-into-context-only # load 模式插件 Skill 使用pluginName:skillName形式供 Claude Code 解析与画布/浏览器中的展示一致。工作流整体导出为 Skill值得注意的演进是Claude Code 正将.claude/commands/并入.claude/skills/因此 workflow-export.ts 现在把整个工作流作为Workflow-as-Skill导出——入口文件落在.claude/skills/workflow-name/SKILL.md与 cursor、codex、antigravity 等 Agent 的root/skills/name/SKILL.md目录约定保持一致。这与 FR-015导出工作流必须包含对引用 Skill 依赖的说明一脉相承工作流本身也是一个可被模型调用的 Skill其内部依赖的 Skill 节点会以提示词方式被引用。运行与查看方式运行工作流通过packages/cli提供的 CLI如run、render、export等命令见 CLI 命令目录执行导出的工作流Skill 节点按上述提示词语义触发对应 Skill。在仓库中查看本特性完整契约见 skill-messages.ts扩展端实现见 skill-operations.ts 与 skill-service.tsWebview 端见 skill-browser-service.ts 及三个对话框组件核心校验规则见 validate-workflow.ts 与 workflow-definition.ts。假设与适用前提用户对 Claude Code Skills 与 SKILL.md 格式有基本了解~/.claude/skills/与.claude/skills/对扩展可读可写若未打开工作区文件夹创建 project Skill 会报 No workspace folder is openSKILL.md 遵循标准格式YAML frontmattername description 必备可视化编辑器支持动态节点类型注册MVP 阶段 Skill 节点不需要复杂分支逻辑1 进 1 出即可。小结Skill 节点集成特性遵循先重用在重造的优先级设计P1 复用个人 Skill、P2 团队项目协作、P3 编辑器内新建并以 6 条可量化成功标准与 5 类边界处理策略收口。仓库中的实际实现完整覆盖了规格schema 驱动的只读属性面板、零依赖的 frontmatter 解析、多 Agent 来源并发扫描、带超时与 requestId 关联的 Webview 消息链路、前后端双层校验以及导出为 Workflow-as-Skill 的统一路径。无论你是想在工作流中编排既有 Claude Code Skills还是想从可视化编辑器快速沉淀新的可复用能力Skill 节点都是 CC Workflow Studio 中连接可视化设计与Agent 能力复用的关键一环。赞分享AI 应用Agent 工作流开发工具MCP 服务【免费下载链接】cc-wf-studioCC Workflow Studio项目地址https://gitcode.com/gh_mirrors/cc/cc-wf-studio点击查看免费下载相关推荐CC Workflow Studio Skill 节点实战指南把 Claude Code Skills 接入可视化工作流CC Workflow Studio Skill 节点实战指南把 Claude Code Skills 接入可视化工作流 本文围绕 cc wf studioAI 应用Agent 工作流开发工具MCP 服务Bindu 示例 Agent 编写指南在 examples/ 下新增自包含示例项目的完整流程与源码级规范Bindu 示例 Agent 编写指南在 examples/ 下新增自包含示例项目的完整流程与源码级规范 导读 本文是 Bindu 仓库中 add exampAI 应用Agent 工作流开发工具MCP 服务CC Workflow Studio MCP 节点集成从 Claude Code CLI 到可视化工作流的完整实施方案CC Workflow Studio MCP 节点集成从 Claude Code CLI 到可视化工作流的完整实施方案 本文基于 CC Workflow StAI 应用Agent 工作流开发工具MCP 服务上一篇KnowNote社区生态建设如何参与讨论与获取技术支持下一篇如何在Drogon框架中实现高效大文件上传断点续传与分块上传指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考