项目加 skills 目录，三步让 AI 自动调前端技能!

大家好，我是 King。
今天聊一个很实在的问题：你写了一个 Web 项目，里面有很多前端功能，比如表单校验、图片压缩、暗夜模式切换、接口防抖……每次新开一个页面，都要重新写一遍，或者翻来翻去找以前的代码。累不累？
更麻烦的是，现在大家都在用 AI 写代码。你让 AI 帮你写一个“图片上传并压缩”，它可能给你生成四五个不同的版本，质量时好时坏。你有没有想过——能不能让 AI 直接调用你项目里已经写好的、稳定的前端技能模块？
答案是：可以。而且只要三步。
一、先搞懂：什么是“skills 目录”
说白了，skills 目录就是一个专门放前端功能模块的文件夹。
比如你的项目结构原来是：

src/
  components/
  utils/
  views/

现在你在根目录（或者 src 下面）新建一个文件夹，取名 skills：

src/
  skills/        ← 新建这个
    upload.js    ← 图片上传技能
    darkMode.js  ← 暗夜模式技能
    debounce.js  ← 防抖技能
  components/
  utils/
  views/

这个文件夹里的每一个文件，就是一个前端技能。它必须是独立的、可复用的、输入输出清晰的函数或类。
举个例子，skills/debounce.js 可以长这样：

// 技能名：防抖
export function debounce(fn, delay = 300) {
  let timer = null
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), delay)
  }
}

就这么简单。一个文件一个技能，名字起好，别乱。
二、核心思路：让 AI “看见”这些技能
你可能会问：AI 怎么知道我有这个文件夹？
答案是：你不需要让 AI 主动去翻你的硬盘。你只需要在写提示词的时候，给 AI 一个“地图”。
传统写法（效率低）：
“帮我写一个防抖函数，延迟 300 毫秒。”
新写法（高效）：
“调用项目 skills 目录下的 debounce.js 技能，应用到搜索框的输入事件上。”
为什么这样写有用？因为你在提示词里明确说了 “skills 目录 + 文件名”，AI 会理解成：这个功能已经存在，不要重写，直接用。
但这里还有个问题——AI 不知道你那个文件里到底是怎么写的。怎么办？
解决方案：在你的项目根目录放一个 skills-manifest.json（技能清单）。这个文件就像一张地图，告诉 AI 每个技能是干什么的、接收什么参数、返回什么。
示例 skills-manifest.json：

{
  "debounce": {
    "file": "src/skills/debounce.js",
    "export": "debounce",
    "description": "防抖函数，防止高频触发",
    "params": ["fn", "delay"]
  },
  "darkMode": {
    "file": "src/skills/darkMode.js",
    "export": "toggleDarkMode",
    "description": "切换网站暗夜模式",
    "params": []
  }
}

当你在对话里说“用 darkMode 技能”，AI 就可以根据这个清单，知道该引用哪个文件、哪个导出函数。
三、三步实现 AI 自动查找并执行前端技能
第一步：建目录 + 写技能文件
操作很简单：
在你项目里新建 skills 文件夹。
把项目中已有的、稳定的、独立的功能放进去。每个功能一个文件。
每个文件只做一件事，函数名清晰。
King 的建议：不要一次性搬太多。先搬 3–5 个你最常用的技能，比如：防抖、节流、深拷贝、本地存储封装、时间格式化。
第二步：写技能清单（manifest）
在项目根目录创建 skills-manifest.json，把你第一步里的每个技能都写进去。
这个清单不需要很复杂，但一定要包含三样东西：
文件路径（相对路径）
导出的函数名
一句话说明这个技能是干嘛的
这样 AI 或者你团队里的其他开发者，一眼就知道去哪找、怎么用。
第三步：在提示词里用固定格式调用
这是最关键的。你以后让 AI 帮你写代码，用下面这个格式：
“调用 skills 目录下的 [技能名] 技能，来做 [具体需求]”
实际例子：
“调用 skills 目录下的 debounce 技能，给搜索框绑定输入事件。”
“调用 skills 目录下的 darkMode 技能，在页面右上角加一个切换按钮。”
“调用 skills 目录下的 upload 技能，实现文件选择和预览。”
只要你坚持这样写，AI 就会：
先去理解你要调什么技能。
不在回答里重复造轮子。
直接写“引用”代码，比如 import { debounce } from '@/skills/debounce'。
时间长了，AI 甚至会自动记住你项目里有这个结构。
四、这样做到底好在哪？
我直接说人话：
好处一：代码不重复
同样的功能只写一次，放在 skills 目录。新页面直接调用，不用复制粘贴。
好处二：AI 生成代码更稳定
不让 AI 临时写复杂逻辑，只让它写“调用已有技能”的胶水代码。出错概率大大降低。
好处三：新人上手快
新同事来了，打开 skills-manifest.json，一分钟就知道项目有哪些现成功能。
好处四：搜索引擎喜欢这种清晰结构
百度、必应、360 在抓取技术文章或项目文档时，对模块化、目录清晰的内容打分更高。你把这个实践写成文章，自然更容易被收录。
五、常见疑问
问：我没有用框架，纯原生 HTML/CSS/JS 可以吗？
答：可以。skills 目录不挑框架。你就在项目根目录建文件夹，用 ES 模块的 export 和 import 就行。
问：AI 真的能自动找到我写的技能吗？
答：AI 不会主动扫描你的硬盘。但你用固定格式写提示词 + 提供 manifest 清单，AI 就能“理解”去哪里找。这就够了。
问：skills 目录里能放 Vue 或 React 组件吗？
答：当然可以。比如一个通用的弹框组件、一个表格分页组件，也能叫技能。
问：这样做会增加项目体积吗？
答：几乎不增加。技能文件本身就是你本来就要写的代码，只是换了个位置存放。
六、一个完整的小例子
假设你有一个技能叫 formatDate，放在 skills/date.js：

export function formatDate(timestamp, format = 'YYYY-MM-DD') {
  const date = new Date(timestamp)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return format.replace('YYYY', year).replace('MM', month).replace('DD', day)
}

manifest 里写：

{
  "formatDate": {
    "file": "src/skills/date.js",
    "export": "formatDate",
    "description": "时间戳转日期字符串"
  }
}

然后你对 AI 说：
“调用 skills 目录下的 formatDate 技能，把接口返回的 createTime 转成 YYYY-MM-DD 格式显示在列表里。”
AI 会生成类似这样的代码：

import { formatDate } from '@/skills/date'

// 在列表渲染时
<div>{formatDate(item.createTime)}</div>

你看，多干净。
七、写在最后
很多前端开发者习惯把工具函数到处乱放，今天在 utils，明天在 helpers，后天又复制到新项目里。AI 时代，这种做法特别吃亏——因为 AI 很难记住你的“个人习惯”。
但 skills 目录不一样。它是一个明确的、稳定的约定。
你知道去哪找技能。
团队知道去哪找技能。
AI 也知道怎么调用这些技能。
三步做完，你的项目就具备了一种能力：让 AI 像调用内置函数一样，稳定地使用你封装好的前端技能。
我是 King，希望这篇文章对你有实在的帮助。如果你已经在项目里试过了，欢迎回来告诉我效果怎么样。
© 本文首发于思否社区，遵循思否平台内容规范。转载需保留作者信息。
更多经验分享点击以下链接查看：
https://segmentfault.com/a/1190000047786366
https://segmentfault.com/a/1190000047783903
https://segmentfault.com/a/1190000047781266
https://segmentfault.com/a/1190000047778697
https://segmentfault.com/a/1190000047775647
https://segmentfault.com/a/1190000047769687