前端工程师直接抄作业！这 2 个技能合集，让 AI 写出规范代码

前端最容易出现的问题：组件拆得乱、props 布尔值满天飞、状态管理一团糟、性能规范靠记。这两个合集专门给前端工程化兜底，一个是 Vercel 官方团队出的最佳实践，一个是量大管饱的一键合集。

两个合集怎么选

表格

仓库	定位	适合谁
vercel-labs/agent-skills	Vercel 团队出品的 React/Next.js 最佳实践与组合模式	React、Next.js 开发者
sickn33/antigravity-awesome-skills	1000+ 技能的大全合集，按名单个安装	想广撒网淘技能的人

🛠 详细教程

1. vercel-labs/agent-skills：官方前端规范

包含几个核心技能：

• vercel-react-best-practices：React 与 Next.js 性能优化规则；
• vercel-composition-patterns：可扩展的组件组合模式，避免布尔 props 泛滥；
• vercel-react-native-skills：React Native 最佳实践。

安装（通用 CLI，全局生效）：

npx skills add vercel-labs/agent-skills -g -y

也可以直接指定仓库里某一个技能的路径安装。

怎么用： 让 AI 重构一个复杂组件时，它会自动套用组合模式而不是继续堆 props；写页面时会带上性能优化规则，比如避免不必要的重渲染。

2. sickn33/antigravity-awesome-skills：大合集，按需单点安装

这是一个收录上千个技能的合集，覆盖工程、产品、营销、合规等多个领域，支持通过 skills CLI 按名安装单个技能，而不是整包吞下。

查看 / 安装单个技能（把 <skill-name> 换成合集里的技能名）：

npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill <skill-name>

推荐上手路径：

1. 先在仓库目录里找你最痛的那一个场景（如依赖审计、代码审查、LLM 应用模式）；
2. 用命令只装这一个；
3. 在真实小任务里跑一遍，好用再留，不好用直接删。

⚠️ 踩坑提示

• 大合集里很多技能面向特定框架，装之前先看它标注的适用平台。
• 全局安装（-g）前先在单个项目里试，避免污染所有项目上下文。
• 技能更新频繁，发现行为异常时重新安装一次最新版。

项目地址：https://github.com/vercel-labs/agent-skills

项目地址：https://github.com/sickn33/antigravity-awesome-skills