跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScriptAI大前端

AI Skills:前端开发的新效率工具

综述由AI生成AI Skills 是将经验和最佳实践沉淀为 AI 能力的工具包,通过标准化规则保证结果稳定。 Agent 和 MCP 概念,分析了 Skills 在增删改查、UI 规范等场景的应用。列举了 Vercel 的 agent-skills 和 voidzero 的 vue-skills 等开源项目,并演示了如何通过 npx 安装及使用自定义 Skills 文件结构,旨在帮助开发者利用 AI 提升前端开发效率。

开源信徒发布于 2026/4/5更新于 2026/5/2329 浏览

近来,AI 领域有个火爆的话题:Skills。

Github 上被疯狂 star 的仓库,很多都是和 skills 有关的。

有的仓库仅仅上线三个月就获得了快 50K 的 star,Skills 的火热可见一斑。

文章配图

不管是大模型,还是 Cursor、Codex、Claude、Trae、Copilot 等编程 IDE 都在争先支持 Skills。

围绕 Skills,它们在做的就是为了完成一件事情:技能是通过学习和反复练习获得的,而 Skills 是把经验和最佳实践沉淀为 AI 能力,将'知道'转化为'做到'的本领。

详解什么是 Skills

要说清楚什么是 Skills,先来了解一下关于 AI 的 2 个核心概念-- Agent 和 MCP。

关于 Agent

让 Agent 开发一个在线商城平台,要完成购物功能,它只需要考虑用户输入的'我要购买一个商品'指令,并最终完成购买商品这个目标,它并不关心项目是否前后端分离,前端用 vue 还是 react 来实现,后端用 java 还是 php,选什么数据库,也就是说,Agent 不在乎细节。

Agent 是面向目标的。

关于 MCP

文章配图

我们在开发项目的过程中,一个项目不可能所有的功能都自己实现,往往需要一些第三方的服务,比如短信通知,微信、支付宝支付。而使用这些服务的方式就是通过调用第三方平台的 API,每个平台的都有自己的 API 规则。

而 MCP 就是 AI 的 API,Agent 通过 MCP 来实现调用第三方服务,和第三方服务进行通信。

回到 Skills

文章配图

讲清楚了 Agent 和 MCP 的概念后,我们知道,AI 在使用 MCP 或者完成一些目标任务时,会产生很多的重复性的工作,我们可以把这些重复性的工作整合成一个 工具包,只需要让 AI 调用这个工具包就行,而这个工具包就是 Skills。

这个工具包,可以是前端的组件开发,文件下载,后端 SQL 查询,接口文档生成。所有人都可以使用这些工具包来完成自己工作。

★

简单来说,Skills 通过固定的规则和标准化的能力,来保证结果的稳定和一致。

文章配图

下面从我们前端的角度出发,来看看 Skills:

开发一个增删改查的功能,你要创建 API 文件,状态管理、路由生成,增删改查的页面开发。想要按照项目或者公司的前端开发规范来完成这些任务,用 AI 来实现的话,仅凭一句提示词:,它可以做出来,但最终结果不是你想要的。

帮我写一个文件管理功能

现在你可以使用 增删改查 Skill 来完成这项任务,完全按照你设定的规范来执行,设置帮你把接口联调好,再多的增删改查都能一个 Skill 搞定。

这就是 Skill 的便利性,让你从重复劳动中解放。

Skills 的应用场景

Skills 是经验、规则、最佳实践的积累,它把你 封装组件、封装函数 的能力都学会了。

在使用 Skills 时,我们要明确 2 个问题:

  1. 这件事情是否是重复的?
  2. 这件事情是否能够标准化?

当你得到肯定答案的时候,就可以考虑使用 Skills 来简化工作。

Skills 最适合的应用场景:

文章配图

  • 频繁重复性工作:比如增删改查。
  • 标准化的输出:基于 UI 规范,输出标准化的组件或功能页面。
  • 知识沉淀:项目或者公司的开发规范,前端的样式规范,色彩和字体的使用规范等。

skills.sh

目前社区已经涌现出了很多官方和个人分享的 Skills。

skills.sh 是 Vercel 发布的一个可视化的 AI Skills 平台,可以说它是 AI Skills 界的 NPM。

它汇总了所有的公开 Skills,在上面可以看到 Skills 的信息,下载安装量,其中包括了前端、后端、DevOps、安全等 Skills,能快速检索出你想要的 Skills。

文章配图

前端 Skills

agent-skills

文章配图

vercel 推出的 skills 项目:

是 React 和 Next.js 的 Skills 集合。包含 8 个类别共 45 条规则,旨在指导自动化重构和代码生成。

目前 agent-skills 里面包括三个主要的技能集合:

react-best-practices

专门用于 react 和 nextjs:

基于 Vercel 工程团队的 React/Next.js 性能优化指南,含 40+ 分级规则:

适用场景:

  • 新组件 / 页面开发
  • 数据请求实现
  • 代码性能评审、包体积
  • 加载速度优化

核心规则:

  • 消除请求瀑布(核心)
  • 包体积优化(核心)
  • 服务端性能
  • 客户端数据请求
  • 重渲染优化
  • ...

都是非常实用的。

web-design-guidelines

对 UI 代码进行多维度合规性审计,含 100+ 规则:

适用场景:

  • UI 评审
  • 可访问性检查
  • 设计审计
  • 站点最佳实践校验

核心规则:

  • 无障碍适配
  • 焦点状态
  • 表单设计
  • 动画性能
  • 排版规范
  • 图片优化
  • 暗黑模式适配
  • ...

解决 AI 开发中的各种 UI 问题。

vercel-deploy-claimable

实现应用一键部署到 Vercel 平台,支持所有权转移:

适用场景:

  • 应用部署
  • 生产环境发布
  • 获取线上预览链接

核心规则:

  • 自动识别 40+ 前端框架
  • 生成预览 URL 和所有权认领 URL
  • 自动过滤无用文件(node_modules/.git)

vue-skills

文章配图

文章配图

vue-skills 是 voidzero 团队成员发起的项目:

★

专门为 AI 创建 Vue 技能,以增强 AI 在 Vue 3 开发中的能力。

也就是教 AI 怎么写 Vue3。

vue-skills 中包含 3 个主要的技能集合:

vue-best-practices

核心规则:

  • vue3 最佳实践
  • Composition API 最佳实践
  • vue-router 类型处理
  • vue3 代码可维护性
vueuse-best-practices

核心规则:

  • VueUse 组合式 API 的最佳实践
  • VueUse 常见问题规范
pinia-best-practices

核心规则:

  • Vue3 应用中 Pinia 的 TypeScript 配置
  • Pinia 的最佳实践
  • Pinia 常见问题规范

如何快速上手 Skills

这些 Skills 包是实打实的能在你的项目中发挥作用的,下面来看看如何快速使用。

  1. 安装

在项目中执行以下命令:

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 来完成任务。

★

帮我开发一个 segment 组件,要符合 vue3 的最佳实践。

企业/个人 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。

★

自定义 Skill 的一个小技巧是,先让 Skill 能正常运行,再一步步去优化。

新的起点

vercel 率先祭出了 skills.sh 这个平台,更多类 NPM 的 Skills 平台将会如雨后春笋一般出现,AI 也要有自己的 Skills NPM 平台,这势必又是一场话语权的争夺。

而更多的、更高质量的 Skills 将会出现:

  • 3D、2D 模型 skills
  • node skills
  • ios skills
  • ui skills
  • 企业 skills
  • 个人 skills
  • ...

目前 AI 开发已经不再局限于大模型的能力,高质量的代码取决于你给 AI 赋予了什么技能。

AI + Skills 的开发方式已经不可避免的成为未来前端开发的新方向。

目录

  1. 详解什么是 Skills
  2. 关于 Agent
  3. 关于 MCP
  4. 回到 Skills
  5. Skills 的应用场景
  6. skills.sh
  7. 前端 Skills
  8. agent-skills
  9. react-best-practices
  10. web-design-guidelines
  11. vercel-deploy-claimable
  12. vue-skills
  13. vue-best-practices
  14. vueuse-best-practices
  15. pinia-best-practices
  16. 如何快速上手 Skills
  17. 开始编码
  18. 企业/个人 Skills 开发
  19. 新的起点
  • 💰 8折买阿里云服务器限时8折了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • LightGBM 模型部署:从训练到 Java 生产环境完整指南
  • Neovim + LazyVim 现代化配置指南 (Linux)
  • GLM-5 发布:开源模型新标杆,Agentic 能力与训练架构解析
  • 前端基础知识详解:HTML CSS JavaScript
  • YOLOv8 目标追踪实战:卡尔曼滤波数学原理与 Python 实现
  • JavaAI 插件安装与 Spring Boot 项目生成实战
  • 2023 年网络安全行业前景预测
  • 2024 年中国 AI 大模型产业发展报告深度解读
  • Ubuntu 24.04 LTS 安装 NVIDIA 显卡驱动、CUDA 12.5 及 Docker 容器工具包
  • 常见黑客硬件设备原理与防御指南
  • Windows 环境下 Git 安装与配置指南
  • 前端高频场景面试题与实战解答
  • LangBot 企业级即时通讯 AI 机器人平台
  • Windows 桌面金价监控工具 AnyGold 更新:走势图、AI 研判与声音提醒
  • Spring Boot 视图层开发:主流模板引擎集成实战
  • Python 基础语法详解:变量、类型、运算符与输入输出
  • 大模型应用开发:业务架构与技术架构演进(Embedded 到 Agent)
  • 技术拆解:基于 P2P 组网的远程 AI 服务访问方案
  • 在 Android 设备上利用 Termux 安装 llama.cpp 并启动 WebUI
  • OpenClaw 自托管 AI 管家安装与配置指南

相关免费在线工具

  • RSA密钥对生成器

    生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online

  • Mermaid 预览与可视化编辑

    基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online

  • 随机西班牙地址生成器

    随机生成西班牙地址(支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选),支持数量快捷选择、显示全部与下载。 在线工具,随机西班牙地址生成器在线工具,online

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online