任务技能(Skills)
Vercel Agent Skills
让 AI 参考 Vercel 的前端开发经验,检查代码性能和界面体验。
内容介绍
少装一点整理 · 依据项目公开文档
这个技能包把前端开发和界面检查的方法整理成 AI 可使用的任务说明。适合用 AI 开发 React、Next.js 项目,或检查网页性能、可访问性和使用体验的开发者。可以按当前任务选择相关技能,并通过 README 中的安装方式加入支持 Skills 的助手;具体建议仍需要结合自己的项目判断。
对应任务使用的技能: web-design-guidelines
开始使用
先核对使用条件,再选择你的 AI 助手查看接入步骤。
- 需要准备
- 可使用技能的 AI 助手。
- 使用官方 Skills CLI 时需要 Node.js 与 npm;只安装需要的技能。
- 费用说明
- 项目代码开源;AI 助手的使用费用与第三方服务额度另计。
- 需要的权限
- 检查类技能会读取项目;部署类技能会打包并上传项目。先选审查技能,发布操作应单独确认。Skills CLI 有匿名统计及关闭选项。
Codex需手动配置
项目使用 Skills CLI 安装;需要在安装时选对助手和技能。
接入步骤
- 打开 README 安装章节及下方 Skills CLI 说明。
- 从 vercel-labs/agent-skills 选择需要的技能,并将目标助手设为 Codex。
- 在助手内查看技能是否已出现;必要时重新打开会话。
怎样确认接入有效
选 web-design-guidelines,让它检查一个页面的键盘操作并指出具体位置。
官方依据
Claude Code需手动配置
项目使用 Skills CLI 安装;需要在安装时选对助手和技能。
接入步骤
- 打开 README 安装章节及下方 Skills CLI 说明。
- 从 vercel-labs/agent-skills 选择需要的技能,并将目标助手设为 Claude Code。
- 在助手内查看技能是否已出现;必要时重新打开会话。
怎样确认接入有效
选 web-design-guidelines,让它检查一个页面的键盘操作并指出具体位置。
官方依据
Cursor需手动配置
项目使用 Skills CLI 安装;需要在安装时选对助手和技能。
接入步骤
- 打开 README 安装章节及下方 Skills CLI 说明。
- 从 vercel-labs/agent-skills 选择需要的技能,并将目标助手设为 Cursor。
- 在助手内查看技能是否已出现;必要时重新打开会话。
怎样确认接入有效
选 web-design-guidelines,让它检查一个页面的键盘操作并指出具体位置。
官方依据
官方依据
接入说明核对于 2026-10-12 · 依据公开文档整理,未逐一安装实测。
可以怎么用
- 参考 React 与 Next.js 的性能实践
- 检查界面可访问性与使用体验
- 按任务选择并安装相关技能
官方项目与文档
项目说明译文
Vercel 官方 AI 助手技能集合
用途相近的插件
优先匹配当前插件的主要用途,再参考共同用途和收藏数;接入方法可能不同。
- Claude Code Official Plugins — 在 Claude Code 中按任务选用代码审查、前端设计和 MCP 开发等插件。
- Codex Plugins & Built-in Tools — 查找用于浏览器工作、编码、设计、办公文件和视频的 Codex 功能及其实际设置要求。
- Vue Skills — 给 AI 补充 Vue 3 的开发、路由、状态管理和测试参考。