近来，AI 领域有个火爆的话题：Skills。
Github 上被疯狂 star 的仓库，很多都是和 skills 有关的。
有的仓库仅仅上线三个月就获得了快 50K 的 star，Skills 的火热可见一斑。














 
  
    
    
 
      
    
要说清楚什么是 Skills，先来了解一下关于 AI 的 2 个核心概念-- Agent 和 MCP。
让 Agent 开发一个在线商城平台，要完成购物功能，它只需要考虑用户输入的“我要购买一个商品”指令，并最终完成购买商品这个目标，它并不关心项目是否前后端分离，前端用 vue 还是 react 来实现，后端用 java 还是 php，选什么数据库，也就是说，Agent 不在乎细节。
Agent 是面向目标的。
 
  
    
    
 
      
    
 
  
    
    
 
      
    
 
  
    
    

      简单来说， 
     Skills 通过固定的规则和标准化的能力，来保证结果的稳定和一致。 
    
 
  
    
    
 
      
    
Skills 是经验、规则、**实践的积累，它把你“封装组件”、“封装函数”的能力都学会了。
在使用 Skills 时，我们要明确 2 个问题：



 
  
    
    
 
     
这件事情是否是重复的？
 
     
这件事情是否能够标准化？
 
    
 
  
    
    
 
      
    
 
  
    
    
 
     
频繁重复性工作：比如增删改查。
 
     
标准化的输出：基于UI规范，输出标准化的组件或功能页面。
 
     
知识沉淀：项目或者公司的开发规范，前端的样式规范，色彩和字体的使用规范等。
 
    
 
  
    
    
 
      
    
 
  
    
    
 
      
    
react-best-practices
 
  
    
    
 
     
新组件 / 页面开发
 
     
数据请求实现
 
     
代码性能评审、包体积
 
     
加载速度优化
 
    
核心规则：
 
  
    
    
 
     
消除请求瀑布（核心）
 
     
包体积优化（核心）
 
     
服务端性能
 
     
客户端数据请求
 
     
重渲染优化
 
     
…
 
    
都是非常实用的。
web-design-guidelines
 
  
    
    
 
     
UI 评审
 
     
可访问性检查
 
     
设计审计
 
     
站点**实践校验
 
    
核心规则：
 
  
    
    
 
     
无障碍适配
 
     
焦点状态
 
     
表单设计
 
     
动画性能
 
     
排版规范
 
     
图片优化
 
     
暗黑模式适配
…



 
    
解决 AI 开发中的各种 UI 问题。
vercel-deploy-claimable
 
  
    
    
 
     
应用部署
 
     
生产环境发布
 
     
获取线上预览链接
 
    
核心规则：
 
  
    
    
 
     
自动识别 40+ 前端框架
 
     
生成预览 URL 和所有权认领 URL
 
     
自动过滤无用文件（node_modules/.git）
 
    
Github 地址：https://github.com/vercel-labs/agent-skills
 
  
    
    
 
      
    
 
  
    
    
 
      
    
 
  
    
    

      专门为 AI 创建 Vue 技能，以增强 AI 在 Vue 3 开发中的能力。 
    
vue-best-practices
核心规则：
 
  
    
    
 
     
vue3 **实践
 
     
Composition API **实践
 
     
vue-router 类型处理
 
     
vue3 代码可维护性
 
    
vueuse-best-practices
核心规则：
 
  
    
    
 
     
VueUse 组合式 API 的**实践
 
     
VueUse 常见问题规范
 
    
pinia-best-practices
核心规则：
 
  
    
    
 
     
Vue3 应用中 Pinia的 TypeScript 配置
 
     
Pinia 的**实践
 
     
Pinia 常见问题规范
 
    
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 
 
  
    
    
 
      
    
目前支持的工具包括：
 
  
    
    
 
      
    
 
  
    
    
 
     
Antigravity
 
     
Codex
 
     
Cursor
 
     
Gemini CLI
 
     
Trae
 
    
 
  
    
    
 
      
    
 
  
    
    
 
     
项目
 
     
全局
 
    
安装完成后，会自动根据你的提示词来启用 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。
 
  
    
    
 
     
3D、2D 模型 skills
 
     
node skills
 
     
ios skills
 
     
ui skills
 
     
企业 skills
 
     
个人 skills
 
     
…
 
    
 
  
    
    
 
     
↘AI Skills：前端新的效率神器！