Skills 是一个基于 JavaScript 的轻量级、模块化技能树构建与学习追踪系统，帮助开发者可视化并管理个人技术成长路径。

一、项目概述

在技术日新月异的今天，程序员面临的最大痛点之一就是如何系统性地规划自己的学习路径。市面上虽然有各种学习平台（如 Coursera、Udemy）和笔记工具（如 Obsidian、Notion），但它们要么过于通用，缺乏对技能依赖关系的直观展示，要么过于笨重，无法快速记录和追踪日常的微小进步。

Skills 正是为解决这一痛点而生。它是一个极简的、基于 JSON 配置的技能树系统，无需数据库、无需复杂的后端服务，只需一个 HTML 文件即可运行。其核心思想是将技能拆解为可追踪的节点，每个节点可以包含子技能、学习资源、进度状态等，并以树形结构直观呈现。

二、快速上手

2.1 安装与启动

由于 Skills 是纯前端项目，使用起来非常简单：

bash

克隆仓库

git clone https://github.com/dzhng/skills.git

进入目录

cd skills

直接打开 index.html 即可使用

或者用任何静态服务器启动，例如 Python 的简易服务器

python3 -m http.server 8000

然后浏览器访问 http://localhost:8000 即可看到默认的技能树示例。

2.2 定义自己的技能树

Skills 的核心配置是一个 JSON 对象，存储在 skills.js 文件中。以下是一个简单的示例：

javascript
const skills = {
name: "前端工程师技能树",
children: [
{
name: "HTML/CSS",
progress: 0.8,
children: [
{ name: "HTML5 语义化", progress: 0.9 },
{ name: "CSS Flexbox", progress: 0.7 },
{ name: "CSS Grid", progress: 0.6 },
{ name: "响应式设计", progress: 0.5 }
]
},
{
name: "JavaScript",
progress: 0.6,
children: [
{ name: "ES6+ 语法", progress: 0.8 },
{ name: "异步编程", progress: 0.5 },
{ name: "DOM 操作", progress: 0.7 },
{ name: "模块化", progress: 0.4 }
]
},
{
name: "框架与工具",
progress: 0.4,
children: [
{ name: "React", progress: 0.5 },
{ name: "Vue", progress: 0.3 },
{ name: "Webpack", progress: 0.2 },
{ name: "Git", progress: 0.6 }
]
}
]
};

2.3 运行效果

打开页面后，你会看到一个树状结构，每个节点旁边有一个进度条（0~1 之间的数值，会被渲染为百分比）。点击节点可以展开/收起子技能，所有进度数据存储在浏览器的 localStorage 中，刷新页面不会丢失。

三、核心亮点

3.1 极致的轻量化

整个项目只有一个 HTML 文件、一个 CSS 文件和一个 JS 文件，总大小不到 50KB。没有依赖任何第三方库（如 React、Vue、jQuery），纯原生 JavaScript 实现。这意味着你可以把它放在任何静态服务器上，甚至通过 file:// 协议直接打开使用。

3.2 数据完全本地化

所有技能数据存储在浏览器的 localStorage 中，无需注册账号、无需联网、无需担心隐私泄露。数据导出也非常简单——只需复制 skills.js 文件即可备份或分享。

3.3 可视化进度追踪

每个节点都带有进度条，父节点的进度会自动根据子节点的进度计算（例如取平均值）。这种层级化的进度展示让你能一眼看出自己在哪个大方向上的投入不足。

3.4 高度可定制

你可以自由定义技能树的层级深度、节点名称、进度值。甚至可以直接修改 CSS 文件来改变颜色主题、字体、布局等。由于是纯前端项目，你可以轻松将其嵌入到自己的博客、个人网站或 Notion 页面中（通过 iframe）。

四、适用场景

1. 个人学习规划：程序员、设计师、产品经理等任何需要持续学习的人，可以用它来规划年度/季度学习目标。
2. 团队技能矩阵：小团队可以用它来可视化团队成员的技能分布，找出能力短板。
3. 技术博客配套：很多技术博主会在文章末尾附上自己的技能树，方便读者了解其专业领域。
4. 课程大纲展示：在线教育机构可以用它来展示课程的先修关系和学习路径。

五、同类项目对比

特性	Skills	Obsidian (图谱)	Notion (数据库)	专业学习平台
安装复杂度	零配置，直接打开	需要安装客户端	需要注册账号	需要注册付费
数据所有权	完全本地	本地+可同步	云端	云端
可视化层级	树形结构，清晰直观	网状图，复杂	表格/看板，不直观	列表/路径，受限
自定义程度	极高（直接改代码）	中等（插件）	中等（模板）	低
离线支持	完全离线	支持	需网络	需网络
学习成本	5 分钟	30 分钟	30 分钟	1 小时+

Skills 的优势在于极简和可控。如果你只是想快速记录和查看自己的技能树，不想被复杂的系统束缚，它是绝佳选择。而如果你需要关联笔记、多人协作、高级图表分析，那么 Obsidian 或 Notion 可能更合适。

六、不足之处与改进方向

1. 缺乏搜索功能：当技能节点很多时，手动查找特定技能比较困难。
2. 无数据导入导出：虽然数据在 localStorage，但没有一键导出为 JSON 或 Markdown 的功能。
3. 无时间维度：无法记录某个技能的学习时长或完成日期。
4. UI 较为朴素：设计风格偏极简，对追求美观的用户可能不够友好。

不过由于项目是开源的，这些问题都可以通过提交 PR 或 fork 后自行修改来解决。

七、总结

Skills 是一个小而美的工具，它解决了“如何可视化个人技能树”这个具体问题。它的设计哲学是：少即是多。没有花哨的动画，没有复杂的交互，只有清晰的数据结构和直观的展示。对于追求效率、喜欢 DIY 的技术人员来说，它是一个值得收藏的利器。

项目链接

• GitHub 仓库：dzhng/skills