近来，AI 领域有个火爆的话题：**Skills**。 Github 上被疯狂 star 的仓库，很多都是和 skills 有关的。 有的仓库仅仅上线三个月就获得了快 **50K** 的 star，Skills 的火热可见一斑。 !在这里插入图片描述 不管是大模型，还是 Cursor、Codex、Claude、Trae、Copilot 等编程 IDE 都在争先支持 Skills。 围绕 Skill…
近来，AI 领域有个火爆的话题：Skills。
Github 上被疯狂 star 的仓库，很多都是和 skills 有关的。
有的仓库仅仅上线三个月就获得了快 50K 的 star，Skills 的火热可见一斑。
不管是大模型，还是 Cursor、Codex、Claude、Trae、Copilot 等编程 IDE 都在争先支持 Skills。
围绕 Skills，它们在做的就是为了完成一件事情：技能是通过学习和反复练习获得的，而 Skills 是把经验和最佳实践沉淀为 AI 能力，将'知道'转化为'做到'的本领。
要说清楚什么是 Skills，先来了解一下关于 AI 的 2 个核心概念-- 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 时，我们要明确 2 个问题：
当你得到肯定答案的时候，就可以考虑使用 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 和 nextjs：
基于 Vercel 工程团队的 React/Next.js 性能优化指南，含 40+ 分级规则：
适用场景：
核心规则：
都是非常实用的。
对 UI 代码进行多维度合规性审计，含 100+ 规则：
适用场景：
核心规则：
解决 AI 开发中的各种 UI 问题。
实现应用一键部署到 Vercel 平台，支持所有权转移：
适用场景：
核心规则：
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
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online