01
框架参考
覆盖 React、Vue3、Vue2、Svelte 和 Web Components 的聚焦手册。
本地 AI 编程 Skill
用 relation-graph 专业 Skill 构建关系数据应用。
RG-Dev Skill 将 relation-graph 文档、框架参考、API 约束、类型说明和经过验证的实现模式打包，供 Codex、Claude Code 等本地 AI 编程 Agent 使用。
包含什么
面向图应用开发的可移植知识层。
它不是提示词合集，而是结构化的 Skill 目录，用于帮助编程 Agent 实现真实的图展示和图编辑功能。
02
验证模式
从普通 layout 与 use-cases 示例中提炼出的场景化实现片段。
03
API 约束
核心 API 与类型说明，帮助 Agent 避免凭空创造 relation-graph 用法。
04
交付流程
包含选择参考、匹配模式、修改代码和本地验证的执行规则。
能力地图
它掌握的是 relation-graph 真实工程知识，而不只是 API 名称。
Skill 将框架手册、核心类型、布局规则、编辑流程和经过验证的场景片段拆分整理，让本地编程 Agent 能按当前任务读取最相关的上下文。
DATA
关系数据建模
理解图数据生命周期、rootId、nodes、lines、fakeLines、嵌套结构，以及如何组织数据进入 relation-graph 渲染流程。
LAYOUT
布局策略
掌握 tree、smart-tree、center、force、fixed、folder、io-tree、circle 等布局在不同产品场景下的选择方式。
EDITING
图交互与编辑
覆盖节点和连线事件、拖拽、选择、右键菜单、工具栏、缩略图，以及创建、更新、删除等编辑流程。
RENDER
自定义渲染
指导跨框架实现自定义节点、连线、画布、背景和视图层，避免只停留在默认样式。
STACKS
多框架交付
为 React、Vue3、Vue2、Svelte 和 Web Components 提供独立参考，减少框架差异导致的错误。
SCENES
验证过的场景知识
从普通 layout 和 use-cases 示例中提炼可复用模式，让 Agent 从经过验证的实现起步。
包体信息
足够轻量，适合本地 Agent 使用；足够结构化，适合专业交付。
包体被拆分为入口 Skill、聚焦参考文档和场景模式。Agent 不需要在每次任务中读取完整手册，只有需要时才进入更大的上下文。
压缩前精选 Skill 文件共 978.0 KiB。
zip 压缩后约 235.1 KiB，适合安装到本地 Skill 目录。
包含 Skill 入口、框架手册、核心 API 说明和场景索引。
保持浅层结构，方便 Agent 只发现和读取需要的参考资料。
目录结构
rg-dev-skill/
|-- SKILL.md
|-- agents/
| `-- openai.yaml
|-- references/
| |-- index.md
| |-- core-concepts.md
| |-- api-core.md / types-core.md
| |-- layouts.md / editing.md
| |-- react.md / vue3.md / vue2.md
| |-- svelte.md / web-components.md
| `-- full-guide.md
`-- patterns/
|-- index.md / index.json
|-- layout/
`-- use-cases/如何使用
安装到你的本地 AI 编程工作流中。
下载 zip，解压后将 rg-dev-skill 目录放入你的 AI 编程工具使用的 skill 目录中。
- 在当前页面下载 rg-dev-skill.zip。
- 解压后保留完整的 rg-dev-skill 目录结构。
- 将目录放入 Codex、Claude Code 或兼容 Agent 使用的本地 skills 目录。
- 在图应用开发任务中，明确要求 Agent 使用 rg-dev-skill。
适用任务
当任务围绕关系数据时使用它。
当你构建图展示、图编辑器或 relation-graph 自定义能力时，可以要求 Agent 使用 rg-dev-skill。
知识图谱与网络视图
构建关系数据、依赖网络、数据血缘图和拓扑图等图展示能力。
图编辑器
实现节点和连线编辑、自定义工具栏、缩略图和画布交互。
框架迁移
在受支持框架之间迁移 relation-graph 示例和功能，并保持行为一致。
现有项目修改
指导 AI 编程 Agent 修改当前代码库，而不是只生成孤立代码片段。
访问权限