# skill-editor

**Repository Path**: yu-caiyi/skill-editor

## Basic Information

- **Project Name**: skill-editor
- **Description**: prd：https://bcn6tttre0hu.feishu.cn/docx/ZKzBdWlbVoNhqqxC40ZcKfcNnoe
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-09
- **Last Updated**: 2026-05-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Skill Editor

一个可视化的技能工作流编辑器——通过拖拽节点、自由连线、配置属性，快速构建技能树并导出为标准 Skill 文件。

## 关于本项目

**本项目的每一行代码、每一份文档（包括本 README 和 PRD）均由 AI 生成，人类未介入任何编码或写作环节。**

本项目使用 [Traesolo](https://traesolo.com) 的 **MTC（More Than Coding）模式** 完成——从 PRD 输入到最终软件测试交付，全程 0 人工介入。AI 在整个开发过程中自主工作，连续七八个小时不间断地完成从架构设计到代码实现的全部环节，并基于 Playwright 进行精密的端到端测试，确保交付质量。整个开发流程由 AI 自主驱动：

1. PRD（产品需求文档）由 AI 撰写
2. 架构设计由 AI 完成
3. 全部代码由 AI 编写
4. 基于 Playwright 的端到端测试由 AI 执行
5. 最终交付物由 AI 产出

这是一个源于灵感的项目，使用 **mimo-v2.5-pro** 模型，消耗约 **3000 万 credits** 完成全部开发工作。

## 功能特性

### 可视化画布

基于 React Flow 的节点图画布，支持拖拽放置、自由连线、缩放平移。画布内置网格背景、缩放控件和迷你地图（MiniMap），底部状态栏实时显示节点数与连线数。

**画布交互增强：**
- 按 `Delete` 或 `Backspace` 键删除选中的节点或连线
- 拖拽连线端点可重新绑定到其他节点
- 支持全屏模式，专注编辑工作流
- 亮色/暗色主题下画布背景自动适配

### 亮色/暗色主题切换

一键切换界面主题，适应不同工作环境：
- 🌙 暗色模式：深色背景，护眼舒适
- ☀️ 亮色模式：浅色背景，清晰明了

主题设置自动保存到本地，下次打开自动恢复。

### 四种节点类型

| 节点 | 颜色 | 形状 | 用途 |
|------|------|------|------|
| 开始节点 | 🟢 绿色 | 圆角矩形 | 工作流入口，仅有输出端口 |
| 步骤节点 | 🔵 蓝色 | 矩形 | 执行操作/流程步骤，输入输出兼备 |
| 条件节点 | 🟠 橙色 | 菱形 | 分支逻辑，提供三个独立输出端点（左、右、底） |
| 结束节点 | 🔴 红色 | 圆角矩形 | 工作流终止点，仅有输入端口 |

### 连线标签编辑

点击连线可编辑标签文字，用于标识流转条件或动作：
- **条件节点出线**：始终显示可编辑标签（如"格式异常"、"格式正常"）
- **其他连线**：空标签时不显示，点击连线可添加标签
- 标签支持任意文字，灵活表达业务逻辑

### 属性面板抽屉模式

点击节点或连线时，属性面板从右侧滑入：
- **节点属性**：编辑标题、描述、上下文信息
- **连线属性**：编辑标签、查看源节点和目标节点
- 点击画布空白区域或关闭按钮可关闭面板

### 工作流管理（SQLite 本地持久化）

基于 sql.js + IndexedDB 实现浏览器端 SQLite 数据库，支持工作流的本地持久化存储：

- **自动保存** — 编辑停止 1 秒后自动保存当前工作流，无需手动操作
- **手动保存** — 点击"💾 保存"按钮即时保存，按钮状态实时反馈（保存中 → 已保存）
- **工作流列表** — 点击"📁 工作流"打开管理面板，查看所有已保存的工作流
- **加载切换** — 从列表中一键加载任意工作流到画布
- **重命名** — 鼠标悬停显示编辑图标，支持行内重命名
- **删除** — 支持删除不需要的工作流（带确认提示）

数据存储在浏览器 IndexedDB 中的 SQLite 数据库文件，关闭浏览器后数据不丢失。

### 节点上下文配置

每个步骤节点可绑定丰富的上下文信息，让工作流不止于"画流程图"：

- **关联文件** — 标记该步骤涉及的文件路径
- **使用工具** — 标注所需的工具或 API（如 Read、Grep、WebSearch）
- **引用文档** — 关联参考文档
- **关联脚本** — 绑定可执行脚本
- **备注** — 补充说明，支持 Markdown 格式

### 内置模板

三套开箱即用的工作流模板，一键加载即可开始编辑：

| 模板 | 步骤数 | 说明 |
|------|--------|------|
| LLM Wiki 知识库 Ingest | 10 | 源文档录入知识库全流程：读取 → 清洗 → 格式检查 → 摘要生成 → 关键词提取 → 写入 |
| 文档生成 | 6 | 需求分析 → 大纲生成 → 内容填充 → 格式排版 → 输出 |
| 代码审查 | 8 | 代码扫描 → 风格检查 → 逻辑审查 → 安全检查 → 报告生成 |

### 多格式导入导出

- **JSON 导入/导出** — 完整保存工作流数据，支持跨会话恢复
- **Skill 导出** — 生成 `.skill` 文件（ZIP 打包），结构如下：
  ```
  my-skill/
  ├── SKILL.md        # YAML frontmatter + 按拓扑排序的节点章节
  ├── scripts/        # 关联脚本
  ├── references/     # 引用文档
  └── assets/         # 资源文件
  ```

### Skill 实时预览

点击"预览 Skill"按钮，侧边面板实时渲染 SKILL.md 内容——无需导出即可确认最终效果。

## 快速开始

```bash
npm install
npm run dev
```

浏览器打开 `http://localhost:5173`。

## 使用方法

1. 从左侧面板拖拽节点类型到画布
2. 从节点端口拖拽到另一节点端口以连线
3. 点击节点或连线，右侧属性面板滑入，可编辑属性
4. 条件节点有三个独立输出端点，可连接不同分支
5. 点击连线可编辑标签文字
6. 按 `Delete` 键删除选中的节点或连线
7. 点击"模板库"加载预置模板快速开始
8. 点击"💾 保存"将工作流保存到本地数据库，或等待自动保存
9. 点击"📁 工作流"查看和管理已保存的工作流
10. 点击"预览 Skill"查看 SKILL.md 输出效果
11. 导出为 JSON（可重新导入）或 `.skill` 文件（可直接使用）

## 技术栈

- React 19 · TypeScript 6 · Vite 8
- @xyflow/react 12（React Flow）— 节点图编辑器
- Zustand 5 — 状态管理
- Tailwind CSS 4.3 — 样式（`@tailwindcss/vite` 插件）
- sql.js + IndexedDB — 浏览器端 SQLite 数据库持久化
- JSZip + file-saver — Skill 文件打包与下载

## 许可证

MIT