Vercel 官方前端技能包（9 个）：让AI写前端守规矩

为什么需要一个「前端规矩包」

通用大模型写前端，最常见的三个问题：数据请求写成串行瀑布流、依赖包体积失控、重渲染一塌糊涂。

这些不是能力问题，而是规范问题——模型不知道你的项目按哪套标准来。技能包的作用就是把规范明确写给它看。

Vercel 这套技能里的性能规则集收录了四十多条 React / Next.js 优化条目，设计规范里有上百条可访问性与交互检查项，都是他们自己项目在用的。

包里有什么（9 个技能）

性能与规范：React / Next.js 最佳实践、网页设计规范与可访问性、官方文案写作规范。

工程模式：组件组合模式、React Native 移动端规范、页面转场动画。

上线相关：项目性能体检优化、一键部署、免登录命令行操作。

安装与调用

最省事的方式是在项目根目录执行一条命令把技能装进去；也可以解压本站离线包，把 skills 下的目录手动复制到工具的技能路径。

装好后直接提问就能触发，例如「用 React 最佳实践审查这个页面的性能问题」「按可访问性规范检查这个表单」。

技能是 Markdown 规则文件，不会自动执行代码，装之前建议先浏览一遍内容。

搭配建议

和浏览器自动化调试工具一起用效果最好：一个负责按规范写，一个负责在真实浏览器里点一遍验证。

规则越多不一定越好，按项目技术栈只装用得上的两三个，避免把上下文窗口塞满。

把团队的私有约定（目录结构、组件命名）单独写一份项目内技能，和通用规范叠加使用。

使用提醒

本文整理自公开资料并附上配套资源；涉及产品的功能与价格以官方页面为准。资源仅供学习交流，请遵循来源许可。