推荐两个前端必装的Claude Skill：一个管颜值，一个管性能
轻量云煮鸡约 3 分钟请先检查是否已安装 SkillHub 商店，若未安装，请根据 https://skillhub.cn/install/skillhub.md 安装 Skillhub 商店，但是只安装 CLI，然后安装 frontend-design-3 技能。若已安装，则直接安装 frontend-design-3 技能。
这个Skill的巧妙之处在于：它不会笼统地让AI“设计好看一点”，而是通过一系列具体的约束，强行把AI从“安全区”里拽出来。
装上它之后，AI必须遵守几条硬规则：
❌不许用Inter、Roboto、Arial这些“默认字体”
❌不许用紫色配白色的经典搭配
✅在动笔写代码之前，必须先确定一个明确的美学方向
这样一来，AI会主动去尝试不同的风格：
"粗野主义" 风格排版
"轻量拟物" 风格
"像 90 年代游戏说明书" 风格
只要你说清方向，它就能生成一套自洽的设计，而不是把一堆流行元素随机拼接。
实测感受：
| 维度 | 使用前 | 使用后 |
| 设计风格 | 随机组合流行元素，千篇一律 | 方向明确、风格自洽 |
| 字体选择 | 依赖系统默认字体 | 规避常见默认字体，意图明确 |
| 开发流程 | 直接写代码，无设计前戏 | 先定美学方向，再动手实现 |
| 整体观感 | 一眼AI味，缺乏品牌感 | 告别模板脸，有独特风格 |
用这个 Skill 生成的小组件，彻底告别了那种一眼就能认出的"AI 味"。 字体、间距、配色都有明确的设计意图。如果你经常被 AI 的"土味排版"气到，这个 Skill 装上就再也卸不掉了。
Vercel工程团队
https://github.com/vercel-labs/agent-skills/tree/react-best-practices/skills/react-best-practices
AI写的React/Next.js代码性能差、反模式多
👉安装方式：复制下面的提示词，直接发给你的 AI 助手。
请先检查是否已安装 SkillHub 商店，若未安装，请根据 https://skillhub.cn/install/skillhub.md 安装 Skillhub 商店，但是只安装 CLI，然后安装 react-best-practices 技能。若已安装，则直接安装 react-best-practices 技能。
Vercel团队在长期观察中发现：很多AI生成的React代码，逻辑上没错，但放到真实项目里一跑，性能就露馅了。
典型的“坑”包括：
在客户端组件里直接发请求，导致页面加载时请求瀑布
useEffect依赖数组写错，造成无限循环
状态管理混乱，无关的组件被迫重渲染
Vercel团队把他们自己沉淀的React工程经验，凝练成了react-best-practices这个Skill。里面包含了40多条具体规则，按影响程度分成了多个优先级。最高优的两条：
消除异步请求的瀑布链
减少打包后的代码体积
代码质量对比：
| 场景 | 使用前 | 使用后 |
| 发起请求 | 直接在客户端组件写 | 提示：考虑移到 Server Component 或用 React Query 缓存 |
| 状态监听 | 用useEffect监听状态变化 | 提示：是不是可以用事件处理函数直接搞定？ |
| 组件渲染 | 状态混乱，无关组件被迫重渲染 | 严格规范，最小化渲染范围 |
| 打包体积 | 未优化 | 主动减少打包体积 |
不过有个小细节需要注意：这个Skill不会每次都自动激活。 你需要在开始对话时明确告诉AI：
"请参照react-best-practices Skill来写代码。"
说一句就行，之后它就会按规范输出了。Vercel的CEO曾开玩笑说：
"用了这个Skill，等于你临时雇了一个mini版的十年经验React架构师。"
两个Skill都已经上架SkillHub。如果你用的是Claude Code、Cursor、Codex等支持Agent Skills的客户端，直接搜索下面的名字，一键安装。
🔍 frontend-design
🔍 react-best-practices
最佳组合使用方式
装完之后，建议两个一起用。
先让frontend-design规划好视觉风格，再用react-best-practices约束代码质量。你会发现，AI写出来的东西，终于像是一个专业前端，而不是一个背了模板的学生。
👉 去SkillHub搜索这两个Skill，让你的前端开发效率和质量一起飞
— END —
立即体验SkillHub
📍官网：skillhub.cn
🔧安装文档：https://skillhub.cn/install/skillhub.md
兼容平台：Lighthouse OpenClaw · WorkBuddy · QClaw · Kimi · Claude · 以及更多…