这是 Vercel 官方维护的 React/Next.js 性能优化指南包含 70 条规则分布在 8 个类别 中按影响级别从高到低排列优先级 类别 影响等级 规则数量1 消除请求瀑布流 致命 6 条2 包体积优化 致命 6 条3 服务端性能 高 10 条4 客户端数据获取 中高 4 条5 重渲染优化 中 15 条6 渲染性能 中 11 条7 JavaScript 性能 低中 14 条8 高级模式 低 5 条每条规则都有错误示例和正确示例并且有唯一前缀标识如 async-parallel、bundle-barrel-imports方便在自动化工具中引用。实测体验我拿一个现有的 Next.js 项目让它审查。它直接挑出了两个致命级别的问题——一个是串行 await 改成 Promise.all 就能解决的请求瀑布流另一个是 barrel imports 导致包体积虚胖。改完之后首屏加载快了 30% 左右。和 #6 web-design-guidelines 的区别那个审设计规范间距、颜色、可访问性这个审性能规范瀑布流、包体积、重渲染。两个可以一起装互不冲突。适合谁React/Next.js 开发者、关注性能的前端团队、做代码审查的 Tech Lead。安装npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices#2 frontend-design — 前端设计美学 anthropics/skills 热度628K ⬇️ 安装量443K ⭐ GitHub Stars138.8K 作者Anthropic 官方一句话Anthropic 官方出品专治 AI 生成的千篇一律模板感页面。它干什么这是整个 skills.sh 上安装量第二高的 Skill仅次于 find-skills来自 Anthropic 官方。它解决一个所有 AI 编程工具都有的通病——AI 写出来的页面长得都一样。紫色渐变、Inter 字体、居中卡片、圆角阴影……这些AI 味元素被它明确列为要避免的反面教材。它的工作方式是在写代码之前先和你确定一个大胆的美学方向——极简主义brutally minimal极繁主义混乱maximalist chaos复古未来retro-futuristic奢华精致luxury/refined玩具感playful/toy-like编辑杂志风editorial/magazine粗野主义brutalist/raw装饰艺术art deco/geometric……确定方向后再用精确的设计执行来实现——字体、配色、动效、空间构成、纹理细节全部围绕美学方向服务。实测体验我分别用不装 Skill和装上 frontend-design让 AI 做了两个产品落地页。不装的版本紫色渐变背景、居中标题、三列功能卡片、底部 CTA 按钮。标准到可以当模板。装了的版本AI 先问我要什么风格。我说复古杂志感。它生成出来的页面用了衬线字体、不对称布局、做旧的纸质纹理、横向滚动的内容区域——说实话如果不告诉我我分不清这是 AI 写的还是设计师手写的。如果你只能装一个前端 Skill就装这个。适合谁所有让 AI 写前端界面的开发者、独立开发者、前端工程师、不想花设计费但又想要好看页面的创业者。安装npx skills add anthropics/skills --skill frontend-design#1 find-skills — 技能生态入口 vercel-labs/skills 热度2.4M断崖式第一超过第 2-10 名总和 作者Vercel 官方一句话skills.sh 生态的 CLI 管理工具不装它你什么都装不了。它干什么find-skills 是整个 Agent Skills 生态的基础设施——它本身就是 skills CLI 工具。所有其他 Skill 的安装、搜索、管理都通过它来完成。核心命令命令 功能npx skills add owner/repo 安装 Skillnpx skills use owner/repo 直接使用 Skill不需要永久安装npx skills list 列出已安装的 Skillnpx skills find 搜索 Skillnpx skills remove 卸载 Skillnpx skills update 更新已安装的 Skillnpx skills init 创建新的 Skill 项目骨架实测体验这个没什么好测的——它是整个生态的入口。就像你用 Homebrew 得先装 brew用 npm 得先有 npm 一样。但我想说的是它的 find 命令确实好用。你说 npx skills find “react”它会把全网所有和 React 相关的 Skill 列出来带热度排名和简介。比自己去网站上翻方便多了。必须第一个装。没有例外。安装npx skills add vercel-labs/skills --skill find-skills四、我的推荐组合不同人群怎么选Top 10 全装上没必要。根据你的角色我帮你搭配了几套组合组合一前端开发者最实用find-skills frontend-design vercel-react-best-practices web-design-guidelines从设计美学到性能优化到规范审查前端工作流全覆盖。这是我目前日常在用的组合强烈推荐。组合二全栈/架构师find-skills grill-me improve-codebase-architecture agent-browser先拷问方案、再审查架构、需要时让 AI 自己开浏览器跑验证。组合三React/Next.js 深度用户find-skills vercel-react-best-practices frontend-design web-design-guidelines tddVercel 全家桶 Anthropic 设计美学 Matt Pocock 的 TDD 纪律。组合四内容创作者find-skills remotion-best-practices用 React 写视频参数化批量生成。打开了新世界的大门。五、Top 10 之外还值得关注这些排行榜上还有一些没进 Top 10 但很有特色的 Skill挑几个亮眼的Skill 作者 热度 亮点grill-with-docs mattpocock 380K grill-me 的文档版——拷问方案的同时自动更新 CONTEXT.md 和 ADRvideo-edit agentspace-so 356K 智能路由 3 个 AI 视频编辑模型Wan / Kling / Lucy按意图自动选skill-creator anthropics 302K Anthropic 官方帮你创建/优化/评测自定义 Skillui-ux-pro-max nextlevelbuilder 251K 67 种风格 161 套配色 57 字体组合设计系统自动生成seo-audit coreyhaines31 154K SEO 审查检查 meta、结构化数据、Core Web Vitals特别提一下 skill-creatorAnthropic 官方如果你想把团队的工作流、编码规范封装成自己的 Skill它是起点。我之前用这款 Skill 把团队的接口测试规范封装成了一套完整的 Skill 体系效果非常好。六、说点大实话聊完了 10 款 Skill最后说几句掏心窝的。第一Top 10 不代表适合所有人。比如 microsoft-foundry 排第 7但如果你不用 Azure它对你价值为零。remotion-best-practices 排第 8但如果你不做视频编程也用不上。排名反映的是全网热度不是你的热度。选 Skill 要看自己的工作场景。第二Skill 生态正在爆发。整个生态的 Skill 数量在快速增长覆盖的领域从代码到设计、从测试到视频、从营销到 SEO……这意味着什么你的 AI 助手正从一个什么都会一点但什么都不精的通才变成一个装备了专业技能包的专家。第三最佳实践把选择权交给 AI。我最常用的方式不是逐个研究该装哪个——而是直接对 Claude Code 说“这是 skills.sh 的网址我是一名前端开发者帮我看看排行榜上有哪些适合我的 Skill装上最合适的几个”它会自己去查、自己对比、自己选择、自己安装。这才是 Skill 生态正确的打开方式。写在最后从 find-skills 的 240 万热度可以看出Agent Skills 已经不是一个小众玩具了。