From react-development
React and Next.js performance optimization guidelines from Vercel Engineering (67 rules across 8 categories). Use 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.
npx claudepluginhub acaprino/alfio-claude-plugins --plugin react-developmentThis skill uses the workspace's default tool permissions.
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 67 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
references.mdrules/_sections.mdrules/_template.mdrules/advanced-event-handler-refs.mdrules/advanced-init-once.mdrules/advanced-stale-closure-refs.mdrules/advanced-use-latest.mdrules/async-api-routes.mdrules/async-defer-await.mdrules/async-dependencies.mdrules/async-parallel.mdrules/async-suspense-boundaries.mdrules/bundle-barrel-imports.mdrules/bundle-conditional.mdrules/bundle-defer-third-party.mdrules/bundle-dynamic-imports.mdrules/bundle-manual-chunks.mdrules/bundle-preload.mdrules/client-event-listeners.mdrules/client-localstorage-schema.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Automates semantic versioning and release workflow for Claude Code plugins: bumps versions in package.json, marketplace.json, plugin.json; verifies builds; creates git tags, GitHub releases, changelogs.
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 67 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
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 speedbundle-manual-chunks - Split vendor bundles via manualChunks for cache efficiencyserver-auth-actions - Authenticate server actions like API routesserver-cache-react - Use React.cache() for per-request deduplicationserver-cache-lru - Use LRU cache for cross-request cachingserver-dedup-props - Avoid duplicate serialization in RSC propsserver-hoist-static-io - Hoist static I/O (fonts, logos) to module levelserver-serialization - Minimize data passed to client componentsserver-parallel-fetching - Restructure components to parallelize fetchesserver-parallel-nested-fetching - Chain nested fetches per item in Promise.allserver-after-nonblocking - Use after() for non-blocking operationsclient-swr-dedup - Use SWR for automatic request deduplicationclient-event-listeners - Deduplicate global event listenersclient-passive-event-listeners - Use passive listeners for scrollclient-localstorage-schema - Version and minimize localStorage datarerender-defer-reads - Don't subscribe to state only used in callbacksrerender-memo - Extract expensive work into memoized componentsrerender-memo-with-default-value - Hoist default non-primitive propsrerender-dependencies - Use primitive dependencies in effectsrerender-derived-state - Subscribe to derived booleans, not raw valuesrerender-derived-state-no-effect - Derive state during render, not effectsrerender-functional-setstate - Use functional setState for stable callbacksrerender-lazy-state-init - Pass function to useState for expensive valuesrerender-simple-expression-in-memo - Avoid memo for simple primitivesrerender-split-combined-hooks - Split hooks with independent dependenciesrerender-move-effect-to-event - Put interaction logic in event handlersrerender-transitions - Use startTransition for non-urgent updatesrerender-use-deferred-value - Defer expensive renders to keep input responsivererender-use-ref-transient-values - Use refs for transient frequent valuesrerender-no-inline-components - Don't define components inside componentsrendering-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-hydration-suppress-warning - Suppress expected mismatchesrendering-activity - Use Activity component for show/hiderendering-conditional-render - Use ternary, not && for conditionalsrendering-usetransition-loading - Prefer useTransition for loading staterendering-resource-hints - Use React DOM resource hints for preloadingrendering-script-defer-async - Use defer or async on script tagsjs-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 immutabilityjs-flatmap-filter - Use flatMap to map and filter in one passjs-request-idle-callback - Defer non-critical work to browser idle timeadvanced-event-handler-refs - Store event handlers in refsadvanced-init-once - Initialize app once per app loadadvanced-use-latest - useLatest for stable callback refsadvanced-stale-closure-refs - Detect and fix stale closure bugs with refsRead individual rule files in the rules/ directory for detailed explanations and code examples. Each rule file contains:
The references.md file contains all 67 rules expanded into a single compiled document.