重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
react-best-practices by vudovn/antigravity-kit
npx skills add https://github.com/vudovn/antigravity-kit --skill react-best-practices来自 Vercel Engineering - 按影响优先级排序的 57 条优化规则 核心理念: 先消除瀑布流,再优化打包体积,最后进行微优化。
只阅读与您任务相关的部分! 查看下面的内容地图,加载您需要的内容。
🔴 进行性能审查时:从 CRITICAL 部分(1-2)开始,然后转向 HIGH/MEDIUM。
| 文件 | 影响等级 | 规则数量 | 何时阅读 |
|---|---|---|---|
1-async-eliminating-waterfalls.md | 🔴 CRITICAL | 5 条规则 | 页面加载慢、顺序 API 调用、数据获取瀑布流 |
2-bundle-bundle-size-optimization.md | 🔴 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 5 条规则 |
| 打包体积大、交互时间慢、首次加载问题 |
3-server-server-side-performance.md | 🟠 HIGH | 7 条规则 | SSR 慢、API 路由优化、服务端瀑布流 |
4-client-client-side-data-fetching.md | 🟡 MEDIUM-HIGH | 4 条规则 | 客户端数据管理、SWR 模式、去重 |
5-rerender-re-render-optimization.md | 🟡 MEDIUM | 12 条规则 | 过多重渲染、React 性能、记忆化 |
6-rendering-rendering-performance.md | 🟡 MEDIUM | 9 条规则 | 渲染瓶颈、虚拟化、图片优化 |
7-js-javascript-performance.md | ⚪ LOW-MEDIUM | 12 条规则 | 微优化、缓存、循环性能 |
8-advanced-advanced-patterns.md | 🔵 VARIABLE | 3 条规则 | 高级 React 模式、useLatest、一次性初始化 |
9-cache-components.md | 🔴 CRITICAL | 4 个部分 | 仅限 Next.js 16+ : use cache, cacheLife, PPR, cacheTag |
总计:8 个类别共 57 条规则
您的性能问题是什么?
🐌 页面加载慢 / 交互时间长
→ 阅读第 1 部分:消除瀑布流
→ 阅读第 2 部分:打包体积优化
📦 打包体积大 (> 200KB)
→ 阅读第 2 部分:打包体积优化
→ 检查:动态导入、桶导入、tree-shaking
🖥️ 服务端渲染慢
→ 阅读第 3 部分:服务端性能
→ 检查:并行数据获取、流式渲染
🔄 过多重渲染 / UI 卡顿
→ 阅读第 5 部分:重渲染优化
→ 检查:React.memo, useMemo, useCallback
🎨 渲染性能问题
→ 阅读第 6 部分:渲染性能
→ 检查:虚拟化、布局抖动
🌐 客户端数据获取问题
→ 阅读第 4 部分:客户端数据获取
→ 检查:SWR 去重、localStorage
✨ 需要高级模式
→ 阅读第 8 部分:高级模式
🚀 **Next.js 16+ 性能(缓存与 PPR)**
→ 阅读第 9 部分:缓存组件
进行全面优化时请按此顺序进行:
1️⃣ CRITICAL(收益最大 - 优先处理):
├─ 第 1 部分:消除瀑布流
│ └─ 每个瀑布流会增加完整的网络延迟(100-500ms+)
└─ 第 2 部分:打包体积优化
└─ 影响交互时间和最大内容绘制
2️⃣ HIGH(影响显著 - 其次处理):
└─ 第 3 部分:服务端性能
└─ 消除服务端瀑布流,加快响应时间
3️⃣ MEDIUM(收益中等 - 再次处理):
├─ 第 4 部分:客户端数据获取
├─ 第 5 部分:重渲染优化
└─ 第 6 部分:渲染性能
4️⃣ LOW(打磨优化 - 最后处理):
├─ 第 7 部分:JavaScript 性能
└─ 第 8 部分:高级模式
🔥 **现代(Next.js 16+):**
└─ 第 9 部分:缓存组件(取代大多数传统重新验证)
| 需求 | 技能 |
|---|---|
| API 设计模式 | @[skills/api-patterns] |
| 数据库优化 | @[skills/database-design] |
| 测试策略 | @[skills/testing-patterns] |
| UI/UX 设计原则 | @[skills/frontend-design] |
| TypeScript 模式 | @[skills/typescript-expert] |
| 部署与 DevOps | @[skills/deployment-procedures] |
发布到生产环境前:
关键项(必须修复):
高优先级:
中优先级:
低优先级(打磨优化):
不要:
awaitindex.ts 重新导出)要:
Promise.all() 并行获取数据const Comp = dynamic(() => import('./Heavy'))import { specific } from 'library/specific'初学者(关注关键项): → 第 1 部分:消除瀑布流 → 第 2 部分:打包体积优化
中级(增加高优先级): → 第 3 部分:服务端性能 → 第 5 部分:重渲染优化
高级(全面优化): → 所有部分 + 第 8 部分:高级模式
| 脚本 | 用途 | 命令 |
|---|---|---|
scripts/react_performance_checker.py | 自动化性能审计 | python scripts/react_performance_checker.py <project_path> |
影响: 每个瀑布流增加 100-500ms+ 延迟 关键概念: 并行获取、Promise.all()、Suspense 边界、预加载
影响: 直接影响交互时间、最大内容绘制 关键概念: 动态导入、tree-shaking、避免桶导入
影响: 更快的服务端响应、更好的 SEO 关键概念: 并行服务端获取、流式渲染、API 路由优化
影响: 减少冗余请求、更好的用户体验 关键概念: SWR 去重、localStorage 缓存、事件监听器
影响: 更流畅的 UI、减少计算浪费 关键概念: React.memo、useMemo、useCallback、组件结构
影响: 更好的渲染效率 关键概念: 虚拟化、图片优化、布局抖动
影响: 热点路径的渐进式改进 关键概念: 循环优化、缓存、RegExp 提升
影响: 特定用例 关键概念: useLatest 钩子、一次性初始化模式、事件处理器引用
黄金法则:
性能思维:
await = 潜在的瀑布流import = 潜在的打包体积膨胀来源: Vercel Engineering 日期: 2026 年 1 月 版本: 1.0.0 总规则数: 8 个类别共 57 条规则
每周安装量
59
代码仓库
GitHub 星标数
6.8K
首次出现
2026年2月1日
安全审计
安装于
gemini-cli55
codex53
github-copilot52
opencode52
kimi-cli51
amp49
From Vercel Engineering - 57 optimization rules prioritized by impact Philosophy: Eliminate waterfalls first, optimize bundles second, then micro-optimize.
Read ONLY sections relevant to your task! Check the content map below and load what you need.
🔴 For performance reviews: Start with CRITICAL sections (1-2), then move to HIGH/MEDIUM.
| File | Impact | Rules | When to Read |
|---|---|---|---|
1-async-eliminating-waterfalls.md | 🔴 CRITICAL | 5 rules | Slow page loads, sequential API calls, data fetching waterfalls |
2-bundle-bundle-size-optimization.md | 🔴 CRITICAL | 5 rules | Large bundle size, slow Time to Interactive, First Load issues |
3-server-server-side-performance.md | 🟠 HIGH | 7 rules | Slow SSR, API route optimization, server-side waterfalls |
4-client-client-side-data-fetching.md | 🟡 MEDIUM-HIGH | 4 rules | Client data management, SWR patterns, deduplication |
5-rerender-re-render-optimization.md | 🟡 MEDIUM | 12 rules | Excessive re-renders, React performance, memoization |
6-rendering-rendering-performance.md | 🟡 MEDIUM | 9 rules | Rendering bottlenecks, virtualization, image optimization |
7-js-javascript-performance.md | ⚪ LOW-MEDIUM | 12 rules | Micro-optimizations, caching, loop performance |
8-advanced-advanced-patterns.md | 🔵 VARIABLE | 3 rules | Advanced React patterns, useLatest, init-once |
9-cache-components.md | 🔴 CRITICAL | 4 sections | Next.js 16+ Only : use cache, cacheLife, PPR, cacheTag |
Total: 57 rules across 8 categories
What's your performance issue?
🐌 Slow page loads / Long Time to Interactive
→ Read Section 1: Eliminating Waterfalls
→ Read Section 2: Bundle Size Optimization
📦 Large bundle size (> 200KB)
→ Read Section 2: Bundle Size Optimization
→ Check: Dynamic imports, barrel imports, tree-shaking
🖥️ Slow Server-Side Rendering
→ Read Section 3: Server-Side Performance
→ Check: Parallel data fetching, streaming
🔄 Too many re-renders / UI lag
→ Read Section 5: Re-render Optimization
→ Check: React.memo, useMemo, useCallback
🎨 Rendering performance issues
→ Read Section 6: Rendering Performance
→ Check: Virtualization, layout thrashing
🌐 Client-side data fetching problems
→ Read Section 4: Client-Side Data Fetching
→ Check: SWR deduplication, localStorage
✨ Need advanced patterns
→ Read Section 8: Advanced Patterns
🚀 **Next.js 16+ Performance (Caching & PPR)**
→ Read Section 9: Cache Components
Use this order when doing comprehensive optimization:
1️⃣ CRITICAL (Biggest Gains - Do First):
├─ Section 1: Eliminating Waterfalls
│ └─ Each waterfall adds full network latency (100-500ms+)
└─ Section 2: Bundle Size Optimization
└─ Affects Time to Interactive and Largest Contentful Paint
2️⃣ HIGH (Significant Impact - Do Second):
└─ Section 3: Server-Side Performance
└─ Eliminates server-side waterfalls, faster response times
3️⃣ MEDIUM (Moderate Gains - Do Third):
├─ Section 4: Client-Side Data Fetching
├─ Section 5: Re-render Optimization
└─ Section 6: Rendering Performance
4️⃣ LOW (Polish - Do Last):
├─ Section 7: JavaScript Performance
└─ Section 8: Advanced Patterns
🔥 **MODERN (Next.js 16+):**
└─ Section 9: Cache Components (Replaces most traditional revalidation)
| Need | Skill |
|---|---|
| API design patterns | @[skills/api-patterns] |
| Database optimization | @[skills/database-design] |
| Testing strategies | @[skills/testing-patterns] |
| UI/UX design principles | @[skills/frontend-design] |
| TypeScript patterns | @[skills/typescript-expert] |
| Deployment & DevOps | @[skills/deployment-procedures] |
Before shipping to production:
Critical (Must Fix):
High Priority:
Medium Priority:
Low Priority (Polish):
DON'T:
await for independent operationsindex.ts re-exports) in app codeDO:
Promise.all()const Comp = dynamic(() => import('./Heavy'))import { specific } from 'library/specific'Beginner (Focus on Critical): → Section 1: Eliminating Waterfalls → Section 2: Bundle Size Optimization
Intermediate (Add High Priority): → Section 3: Server-Side Performance → Section 5: Re-render Optimization
Advanced (Full Optimization): → All sections + Section 8: Advanced Patterns
| Script | Purpose | Command |
|---|---|---|
scripts/react_performance_checker.py | Automated performance audit | python scripts/react_performance_checker.py <project_path> |
Impact: Each waterfall adds 100-500ms+ latency Key Concepts: Parallel fetching, Promise.all(), Suspense boundaries, preloading
Impact: Directly affects Time to Interactive, Largest Contentful Paint Key Concepts: Dynamic imports, tree-shaking, barrel import avoidance
Impact: Faster server responses, better SEO Key Concepts: Parallel server fetching, streaming, API route optimization
Impact: Reduces redundant requests, better UX Key Concepts: SWR deduplication, localStorage caching, event listeners
Impact: Smoother UI, less wasted computation Key Concepts: React.memo, useMemo, useCallback, component structure
Impact: Better rendering efficiency Key Concepts: Virtualization, image optimization, layout thrashing
Impact: Incremental improvements in hot paths Key Concepts: Loop optimization, caching, RegExp hoisting
Impact: Specific use cases Key Concepts: useLatest hook, init-once patterns, event handler refs
Golden Rules:
Performance Mindset:
await in sequence = potential waterfallimport = potential bundle bloatSource: Vercel Engineering Date: January 2026 Version: 1.0.0 Total Rules: 57 across 8 categories
Weekly Installs
59
Repository
GitHub Stars
6.8K
First Seen
Feb 1, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli55
codex53
github-copilot52
opencode52
kimi-cli51
amp49
前端设计系统技能:生产级UI设计、设计令牌与可访问性指南
8,500 周安装