auto-trade/.agent/skills/vercel-react-best-practices/SKILL.md

name, description, license, metadata

name	description	license	metadata
vercel-react-best-practices	React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.	MIT	author version vercel 1.0.0

Vercel React Best Practices

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 57 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

When to Apply

Reference these guidelines when:

• Writing new React components or Next.js pages
• Implementing data fetching (client or server-side)
• Reviewing code for performance issues
• Refactoring existing React/Next.js code
• Optimizing bundle size or load times

Rule Categories by Priority

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-

Quick Reference

1. Eliminating Waterfalls (CRITICAL)

• async-defer-await - Move await into branches where actually used
• async-parallel - Use Promise.all() for independent operations
• async-dependencies - Use better-all for partial dependencies
• async-api-routes - Start promises early, await late in API routes
• async-suspense-boundaries - Use Suspense to stream content

2. Bundle Size Optimization (CRITICAL)

• bundle-barrel-imports - Avoid large barrel files; use direct imports
• bundle-large-libraries - Optimize heavy deps (e.g. framer-motion, lucide)
• bundle-conditional - Lazy load conditional components
• bundle-route-split - Split huge page components
• bundle-dynamic-imports - Use next/dynamic for heavy client components

3. Server-Side Performance (HIGH)

• server-cache-react - Use React.cache() for per-request deduplication
• server-cache-next - Use unstable_cache for data coaching
• server-only-utils - Mark server-only code with 'server-only' package
• server-component-boundaries - Keep client components at leaves
• server-image-optimization - Use next/image with proper sizing

4. Client-Side Data Fetching (MEDIUM-HIGH)

• client-use-swr - Use SWR/TanStack Query for client-side data
• client-no-effect-fetch - Avoid fetching in useEffect without caching libraries
• client-prefetch-link - Use next/link prefetching
• client-caching-headers - Respect cache-control headers

5. Re-render Optimization (MEDIUM)

• rerender-memo-props - Memoize complex props
• rerender-dependencies - Use primitive dependencies in effects
• rerender-functional-setstate - Use functional setState for stable callbacks
• rerender-context-split - Split context to avoid wide re-renders

6. Rendering Performance (MEDIUM)

• rendering-image-priority - Priority load LCP images
• rendering-list-virtualization - Virtualize long lists
• rendering-content-visibility - Use content-visibility for long lists
• rendering-hoist-jsx - Extract static JSX outside components
• rendering-hydration-no-flicker - Use inline script for client-only data

7. JavaScript Performance (LOW-MEDIUM)

• js-batch-dom-css - Group CSS changes
• js-index-maps - Build Map for repeated lookups
• js-combine-iterations - Combine multiple filter/map into one loop
• js-set-map-lookups - Use Set/Map for O(1) lookups

8. Advanced Patterns (LOW)

• advanced-event-handler-refs - Store event handlers in refs
• advanced-init-once - Initialize app once per app load