Guides performance improvements when writing, reviewing, or refactoring React and Next.js applications. Prioritized rules cover data fetching, bundle size—the amount of code delivered to browsers—and rendering, with explanations and code examples.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
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.
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
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.
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-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-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 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-move-effect-to-event - Put interaction logic in event handlersrerender-transitions - Use startTransition for non-urgent updatesrerender-use-ref-transient-values - Use refs for transient frequent valuesrendering-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 statejs-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-init-once - Initialize app once per app loadadvanced-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
Each rule file contains:
For the complete guide with all rules expanded: AGENTS.md
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Get a simulated peer review of a paper, abstract, or selected sections. Receive assessments of originality, methods, results, and writing, with specific revision suggestions, severity ratings, and a prioritized checklist for improving the manuscript.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Guide Windows domain penetration testing through Active Directory reconnaissance, credential attacks, privilege escalation, and certificate service checks. Use references for tools such as BloodHound and Impacket to examine attack paths and understand testing prerequisites.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Test REST, SOAP, and GraphQL APIs for authentication flaws, improper access to other users’ records, and unsafe input handling. Guides endpoint discovery and request variations to identify vulnerabilities and document evidence of unauthorized access.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Explores alternative APIs, the interfaces other code uses to call a module. Parallel sub-agents develop distinctly different designs, then present signatures, usage examples, and trade-offs to help choose or combine an approach before implementation.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Trace system behavior across code, APIs, authentication, data, and networks through an interactive workflow. Store steps, branches, and findings in SQLite, then export diagrams and documentation for security audits, debugging, architecture reviews, or incident analysis.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Compare login approaches and authentication providers, then use implementation examples and security checklists to plan or review an app’s login flow. Covers sessions, tokens, external login providers, passkeys, and common implementation mistakes.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.