メニュー
当用户需要编写、审查或重构 React/Next.js 代码时使用。此 Skill 提供来自 Vercel Engineering 的 React 和 Next.js 性能优化指南，包含 45 条规则，涵盖组件优化、bundle 大小、数据获取等方面。
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/boshi-xixixi/TraeSkill --skill vercel-react-best-practicesコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | vercel-react-best-practices |
| description | 当用户需要编写、审查或重构 React/Next.js 代码时使用。此 Skill 提供来自 Vercel Engineering 的 React 和 Next.js 性能优化指南，包含 45 条规则，涵盖组件优化、bundle 大小、数据获取等方面。 |
⚠️ 性能提示: 此 Skill 包含 45 个 rules 文件（L1 ~50KB），专注于 React 性能优化。请根据实际场景选择性应用规则，优先处理 CRITICAL 和 HIGH 优先级的规则。
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
在 React 应用中实现高性能动画，遵循 compositor-only 原则。
浏览器可以在 compositor thread 上独立于主线程处理两种属性：
transformopacity所有其他属性（width, height, top, left, background 等）必须在主线程上计算，可能导致卡顿。
/* ✅ 允许：transform */
transform: translateX(100px);
transform: scale(1.1);
transform: rotate(45deg);
transform: skewX(10deg);
/* ✅ 允许：opacity */
opacity: 0;
opacity: 1;
: ;
: ;
: ;
: ;
: ;
: ;
: red;
: solid black;
: blue;
// ❌ 不合规：使用 height 动画
function ExpandingBox() {
const [isExpanded, setIsExpanded] = useState(false);
return (
<div
style={{
height: isExpanded ? '200px' : '50px',
transition: 'height 0.3s ease'
}}
>
内容
</div>
);
}
// ✅ 合规：使用 transform 和 max-height
function ExpandingBox() {
const [isExpanded, setIsExpanded] = useState(false);
return (
<div
style={{
maxHeight: isExpanded ? '200px' : '50px',
overflow: 'hidden',
transition: 'max-height 0.3s ease'
}}
>
内容
</div>
);
}
// ✅ 最佳：纯 transform
function ExpandingBox() {
const [isExpanded, setIsExpanded] = useState(false);
return (
<button onClick={() => setIsExpanded(!isExpanded)}>
<span style={{
transform: isExpanded ? 'rotate(180deg)' : 'rotate(0)',
transition: 'transform 0.3s ease'
}}>
▼
</span>
内容
</button>
);
}
// ✅ 合规：使用 motion.div
import { motion } from 'framer-motion';
function AnimatedComponent() {
return (
<motion.div
initial={{ opacity: 0, x: -100 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, ease: 'easeOut' }}
>
内容
</motion.div>
);
}
// ✅ 合规：使用 useTransform 限制属性
import { motion, useTransform } from 'framer-motion';
function ParallaxHeader() {
const scrollY = useScroll();
const y = useTransform(scrollY, [0, 500], [0, -200]);
return (
<motion.header style={{ y }}>
内容
</motion.header>
);
}
// ✅ 合规：使用 transform
<div className="transform hover:scale-105 transition-transform duration-200">
内容
</div>
// ❌ 不合规：使用 width/height
<div className="w-0 hover:w-full transition-all duration-300">
内容
</div>
transform 和 opacity 进行动画will-change 提示transform: translate3d() 启用 GPU 加速prefers-reduced-motion/* will-change 提示 */
.animated-element {
will-change: transform, opacity;
}
/* prefers-reduced-motion 支持 */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
// 暂停视口外动画
import { useInView } from 'framer-motion';
function LazyAnimation() {
const ref = useRef(null);
const isInView = useInView(ref, { once: true, margin: '-100px' });
return (
<motion.div
ref={ref}
initial={{ opacity: 0 }}
animate={isInView ? { opacity: 1 } : { opacity: 0 }}
>
内容
</motion.div>
);
}
// ❌ 错误 1：宽度动画
function Modal() {
return (
<div style={{
width: isOpen ? '100%' : '0',
transition: 'width 0.3s'
}} />
);
}
// ✅ 正确：使用 transform
function Modal() {
return (
<div style={{
transform: isOpen ? 'scaleX(1)' : 'scaleX(0)',
transformOrigin: 'left'
}} />
);
}
// ❌ 错误 2：颜色动画
function Button() {
return (
<button style={{
backgroundColor: isHovered ? '#ff0000' : '#0000ff',
transition: 'background-color 0.3s'
}} />
);
}
// ✅ 正确：使用 opacity 或绝对定位覆盖
function Button() {
return (
<button className="relative">
<span className="bg-blue-500" />
<span
className="absolute inset-0 bg-red-500 opacity-0 hover:opacity-100 transition-opacity"
/>
</button>
);
}
// ❌ 错误 3：位置动画
function Draggable() {
return (
<div style={{
top: y,
left: x,
transition: 'top 0.2s, left 0.2s'
}} />
);
}
// ✅ 正确：使用 transform
function Draggable() {
return (
<motion.div
drag
style={{ x, y }}
/>
);
}
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Eliminating Waterfalls | CRITICAL | async- |
| 2 | Bundle Size Optimization | CRITICAL | bundle- |
| 3 | Server-Side Performance | HIGH | server- |
| 4 | Client-Side Data Fetching | MEDIUM-HIGH | client- |
| 5 | Re-render Optimization | MEDIUM | rerender- |
| 6 | Rendering Performance | MEDIUM | rendering- |
| 7 | JavaScript Performance | LOW-MEDIUM | js- |
| 8 | Advanced Patterns | LOW | advanced- |
async-defer-await - Move await into branches where actually usedasync-parallel - Use Promise.all() for independent operationsasync-dependencies - Use better-all for partial dependenciesasync-api-routes - Start promises early, await late in API routesasync-suspense-boundaries - Use Suspense to stream contentbundle-barrel-imports - Import directly, avoid barrel filesbundle-dynamic-imports - Use next/dynamic for heavy componentsbundle-defer-third-party - Load analytics/logging after hydrationbundle-conditional - Load modules only when feature is activatedbundle-preload - Preload on hover/focus for perceived speedserver-cache-react - Use React.cache() for per-request deduplicationserver-cache-lru - Use LRU cache for cross-request cachingserver-serialization - Minimize data passed to client componentsserver-parallel-fetching - Restructure components to parallelize fetchesserver-after-nonblocking - Use after() for non-blocking operationsclient-swr-dedup - Use SWR for automatic request deduplicationclient-event-listeners - Deduplicate global event listenersrerender-defer-reads - Don't subscribe to state only used in callbacksrerender-memo - Extract expensive work into memoized componentsrerender-dependencies - Use primitive dependencies in effectsrerender-derived-state - Subscribe to derived booleans, not raw valuesrerender-functional-setstate - Use functional setState for stable callbacksrerender-lazy-state-init - Pass function to useState for expensive valuesrerender-transitions - Use startTransition for non-urgent updatesrendering-animate-svg-wrapper - Animate div wrapper, not SVG elementrendering-content-visibility - Use content-visibility for long listsrendering-hoist-jsx - Extract static JSX outside componentsrendering-svg-precision - Reduce SVG coordinate precisionrendering-hydration-no-flicker - Use inline script for client-only datarendering-activity - Use Activity component for show/hiderendering-conditional-render - Use ternary, not && for conditionalsjs-batch-dom-css - Group CSS changes via classes or cssTextjs-index-maps - Build Map for repeated lookupsjs-cache-property-access - Cache object properties in loopsjs-cache-function-results - Cache function results in module-level Mapjs-cache-storage - Cache localStorage/sessionStorage readsjs-combine-iterations - Combine multiple filter/map into one loopjs-length-check-first - Check array length before expensive comparisonjs-early-exit - Return early from functionsjs-hoist-regexp - Hoist RegExp creation outside loopsjs-min-max-loop - Use loop for min/max instead of sortjs-set-map-lookups - Use Set/Map for O(1) lookupsjs-tosorted-immutable - Use toSorted() for immutabilityadvanced-event-handler-refs - Store event handlers in refsadvanced-use-latest - useLatest for stable callback refsRead individual rule files for detailed explanations and code examples:
rules/async-parallel.md
rules/bundle-barrel-imports.md
rules/_sections.md
Each rule file contains:
For the complete guide with all rules expanded: AGENTS.md