AI Skills 的概念及其在前端开发中的应用。Skills 是将经验和最佳实践沉淀为 AI 能力的工具包，通过标准化规则保证结果稳定。文章解释了 Agent 和 MCP 概念，列举了增删改查、UI 规范等应用场景。推荐了 skills.sh 平台及 vercel-labs/agent-skills、hyf0/vue-skills 等开源项目，并提供了安装命令和自定义 Skills 的文件结构指南。旨在帮助开发者利用 AI 技能提升重复性工作效率。
近期，AI 领域出现了一个热门话题：Skills。GitHub 上相关仓库获得了大量 Star，热度可见一斑。
主流大模型及 IDE（如 Cursor、Copilot 等）均开始支持 Skills。其核心在于将经验和最佳实践沉淀为 AI 能力，将'知道'转化为'做到'。
理解 Skills 需先了解两个核心概念：Agent 和 MCP。
Agent 是面向目标的。例如让 Agent 开发在线商城，它只需关注'购买'这一目标，不关心前后端分离或具体技术栈细节。
项目中常需调用第三方服务（如短信、支付），每个平台有各自的 API 规则。MCP 就是 AI 的 API，Agent 通过 MCP 实现与第三方服务通信。
AI 在使用 MCP 或完成任务时会产生重复性工作。将这些工作整合成 工具包 即为 Skills。它可以是前端组件开发、SQL 查询或接口文档生成。
简单来说，
Skills 通过固定的规则和标准化的能力，来保证结果的稳定和一致。
从前端的视角来看，开发增删改查功能通常涉及创建 API、状态管理、路由及页面。仅凭提示词生成的结果往往不符合规范。使用 增删改查 Skill 可完全按照设定规范执行，包括接口联调，从而从重复劳动中解放。
Skills 适合以下情况：
最适合的场景：
频繁重复性工作：比如增删改查。标准化的输出：基于 UI 规范，输出标准化的组件或功能页面。知识沉淀：项目或公司的开发规范、样式规范等。社区已涌现多个官方及个人分享的 Skills。skills.sh 是 Vercel 发布的可视化 AI Skills 平台，可视为 AI Skills 领域的 NPM。它汇总了所有公开 Skills，包含前端、后端、DevOps 等分类，支持快速检索。
Vercel 推出的项目，是 React 和 Next.js 的 Skills 集合。包含 8 个类别共 45 条规则，旨在指导自动化重构和代码生成。
专门用于 React 和 Next.js，基于 Vercel 工程团队的性能优化指南，含 40+ 分级规则。 适用场景：新组件/页面开发、数据请求实现、代码性能评审、加载速度优化。 核心规则：消除请求瀑布、包体积优化、服务端性能、客户端数据请求、重渲染优化等。
对 UI 代码进行多维度合规性审计，含 100+ 规则。 适用场景：UI 评审、可访问性检查、设计审计。 核心规则：无障碍适配、焦点状态、表单设计、动画性能、排版规范、图片优化、暗黑模式适配等。
实现应用一键部署到 Vercel 平台，支持所有权转移。 适用场景：应用部署、生产环境发布、获取线上预览链接。 核心规则：自动识别 40+ 前端框架、生成预览 URL 和所有权认领 URL、自动过滤无用文件。
Github 地址：https://github.com/vercel-labs/agent-skills
vue-skills 由 voidzero 成员发起，专门为 AI 创建 Vue 技能，以增强 AI 在 Vue 3 开发中的能力。
核心规则：Vue3 最佳实践、Composition API 最佳实践、vue-router 类型处理、代码可维护性。
核心规则：VueUse 组合式 API 的最佳实践、常见问题规范。
核心规则：Pinia 的 TypeScript 配置、最佳实践、常见问题规范。
Github 地址：https://github.com/hyf0/vue-skills
以下是快速使用方法：
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices
安装时需确认支持的 AI 工具，目前包括 Antigravity、Codex、Cursor、Gemini CLI、Trae 等。
启用范围可选择项目或全局。
安装完成后，会自动根据你的提示词来启用 Skills，无需手动操作。
配置完成后，AI 即可自动调用 Skills 辅助开发，例如帮你开发组件。
开发者也可自定义 Skills 来提高工作效率。
一个标准的 Skills 文件结构：
my-Skill/
├── Skill.md # 必需：核心指令
├── rules/ # 可选：规则设置
│ └── crud.md
├── examples/ # 可选：输入/输出示例
│ ├── input.md
│ └── output.md
├── templates/ # 可选：可复用的模板
│ └── component.tsx
├── LICENSE.txt # 可选：开源协议
└── resources/ # 可选：参考文件、运行脚本或素材
└── style-guide.md
可设计 CRUD 或 UI 类 Skill。
Vercel 推出了 skills.sh 平台，未来将出现更多类似平台。未来将涌现更多高质量 Skills，包括 3D/2D 模型、Node、iOS、UI、企业及个人的 Skills。
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