JavaScriptAI大前端
AI Skills：前端开发效率新工具
AI Skills 的概念，即通过固定规则和标准化能力将经验沉淀为 AI 工具包。结合 Agent 和 MCP 技术，Skills 能解决重复性工作并保证结果一致性。文中列举了 Vercel 的 agent-skills 和 vue-skills 等资源，演示了通过 npx 命令安装使用的方法，并展示了标准文件结构。最后展望了 Skills 在更多领域的应用，指出 AI+Skills 将成为前端开发新方向。
AI Skills 的概念，即通过固定规则和标准化能力将经验沉淀为 AI 工具包。结合 Agent 和 MCP 技术，Skills 能解决重复性工作并保证结果一致性。文中列举了 Vercel 的 agent-skills 和 vue-skills 等资源，演示了通过 npx 命令安装使用的方法，并展示了标准文件结构。最后展望了 Skills 在更多领域的应用，指出 AI+Skills 将成为前端开发新方向。
近期，AI 领域兴起一个热门话题：Skills。GitHub 上获得大量 Star 的仓库中，很多都与 Skills 有关。有的仓库上线三个月就获得了近 50K 的 Star，可见其火热程度。
无论是大模型，还是 Cursor、Codex、Claude、Trae、Copilot 等编程 IDE 都在争先支持 Skills。围绕 Skills，它们旨在完成一件事：技能是通过学习和反复练习获得的，而 Skills 是把经验和最佳实践沉淀为 AI 能力，将'知道'转化为'做到'的本领。
要说清楚什么是 Skills，先来了解一下关于 AI 的两个核心概念——Agent和 MCP。
让 Agent 开发一个在线商城平台，要完成购物功能，它只需要考虑用户输入的'我要购买一个商品'指令，并最终完成购买商品这个目标。它并不关心项目是否前后端分离，前端用 Vue 还是 React 来实现，后端用 Java 还是 PHP，选什么数据库。也就是说，Agent 不在乎细节。
Agent 是面向目标的。
我们在开发项目的过程中，一个项目不可能所有的功能都自己实现，往往需要一些第三方的服务，比如短信通知、微信、支付宝支付。而使用这些服务的方式就是通过调用第三方平台的 API，每个平台都有自己的 API 规则。
而 MCP 就是 AI 的 API，Agent 通过 MCP 来实现调用第三方服务，和第三方服务进行通信。
讲清楚了 Agent 和 MCP 的概念后，我们知道，AI 在使用 MCP 或者完成一些目标任务时，会产生很多的重复性工作。我们可以把这些重复性的工作整合成一个工具包，只需要让 AI 调用这个工具包就行，而这个工具包就是 Skills。
这个工具包，可以是前端的组件开发、文件下载，后端 SQL 查询、接口文档生成。所有人都可以使用这些工具包来完成自己的工作。
简单来说，
Skills 通过固定的规则和标准化的能力，来保证结果的稳定和一致。
下面从我们前端的角度出发，来看看 Skills：
开发一个增删改查的功能，你要创建 API 文件、状态管理、路由生成、增删改查的页面开发。想要按照项目或者公司的前端开发规范来完成这些任务，用 AI 来实现的话，仅凭一句提示词：帮我写一个文件管理功能，它可以做出来，但最终结果不是你想要的。
现在你可以使用 增删改查 Skill 来完成这项任务，完全按照你设定的规范来执行，设置帮你把接口联调好，再多的增删改查都能一个 Skill 搞定。
这就是 Skill 的便利性，让你从重复劳动中解放。
Skills 是经验、规则、最佳实践的积累，它把你封装组件、封装函数的能力都学会了。
在使用 Skills 时，我们要明确两个问题：
当你得到肯定答案的时候，就可以考虑使用 Skills 来简化工作。
Skills 最适合的应用场景：
频繁重复性工作：比如增删改查。标准化的输出：基于 UI 规范，输出标准化的组件或功能页面。知识沉淀：项目或者公司的开发规范，前端的样式规范，色彩和字体的使用规范等。目前社区已经涌现出了很多官方和个人分享的 Skills。
skills.sh 是 Vercel 发布的一个可视化的 AI Skills 平台，可以说它是 AI Skills 界的 NPM。
它汇总了所有的公开 Skills，在上面可以看到 Skills 的信息、下载安装量，其中包括了前端、后端、DevOps、安全等 Skills，能快速检索出你想要的 Skills。
Vercel 推出的 skills 项目：
是 React 和 Next.js 的 Skills 集合。包含 8 个类别共 45 条规则，旨在指导自动化重构和代码生成。
目前 agent-skills 里面包括三个主要的技能集合：
专门用于 React 和 Next.js：
基于 Vercel 工程团队的 React/Next.js 性能优化指南，含 40+ 分级规则：
适用场景：
核心规则：
都是非常实用的。
对 UI 代码进行多维度合规性审计，含 100+ 规则：
适用场景：
核心规则：
解决 AI 开发中的各种 UI 问题。
实现应用一键部署到 Vercel 平台，支持所有权转移：
适用场景：
核心规则：
Github 地址：https://github.com/vercel-labs/agent-skills
vue-skills 是 voidzero 团队成员发起的项目：
专门为 AI 创建 Vue 技能，以增强 AI 在 Vue 3 开发中的能力。
也就是教 AI 怎么写 Vue3。
vue-skills 中包含 3 个主要的技能集合：
核心规则：
核心规则：
核心规则：
vue-skills Github 地址：https://github.com/hyf0/vue-skills
这些 Skills 包是实打实的能在你的项目中发挥作用的，下面来看看如何快速使用。
在项目中执行以下命令：
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices
安装过程中会让你确认：选择支持的 AI 工具。
目前支持的工具包括：
启用的范围：
安装完成后，会自动根据你的提示词来启用 Skills，无需手动操作。
接下来你就可以正常进行你的任务了，比如让 AI 帮你开发组件，它会自动调用 Skills 来完成任务。
Skills 这么好用，我们也想自己开发一个 Skills 来提高我们的工作效率。
一个标准的 Skills 文件结构：
my-Skill/
├── Skill.md # 必需：核心指令
├── rules/ # 可选：规则设置
│ └── crud.md
├── examples/ # 可选：输入/输出示例
│ ├── input.md
│ └── output.md
├── templates/ # 可选：可复用的模板
│ └── component.tsx
├── LICENSE.txt # 可选：开源协议
└── resources/ # 可选：参考文件、运行脚本或素材
└── style-guide.md
你可以自由地去设计自己的 Skills，一个 CRUD 的 Skill 或者是项目的 UI Skill。
Vercel 率先祭出了 skills.sh 这个平台，更多类 NPM 的 Skills 平台将会如雨后春笋一般出现，AI 也要有自己的 Skills NPM 平台，这势必又是一场话语权的争夺。
而更多的、更高质量的 Skills 将会出现：
目前 AI 开发已经不再局限于大模型的能力，高质量的代码取决于你给 AI 赋予了什么技能。
AI + Skills 的开发方式已经不可避免的成为未来前端开发的新方向。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online