{"id":"0bde48a8-bffd-40a1-b9b9-1a521c262e52","shortId":"mWbNce","kind":"skill","title":"vercel-react-best-practices","tagline":"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, ","description":"# Vercel React Best Practices\n\nComprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 58 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.\n\n## When to Apply\n\nReference these guidelines when:\n- Writing new React components or Next.js pages\n- Implementing data fetching (client or server-side)\n- Reviewing code for performance issues\n- Refactoring existing React/Next.js code\n- Optimizing bundle size or load times\n\n## Rule Categories by Priority\n\n| Priority | Category | Impact | Prefix |\n|----------|----------|--------|--------|\n| 1 | Eliminating Waterfalls | CRITICAL | `async-` |\n| 2 | Bundle Size Optimization | CRITICAL | `bundle-` |\n| 3 | Server-Side Performance | HIGH | `server-` |\n| 4 | Client-Side Data Fetching | MEDIUM-HIGH | `client-` |\n| 5 | Re-render Optimization | MEDIUM | `rerender-` |\n| 6 | Rendering Performance | MEDIUM | `rendering-` |\n| 7 | JavaScript Performance | LOW-MEDIUM | `js-` |\n| 8 | Advanced Patterns | LOW | `advanced-` |\n\n## Quick Reference\n\n### 1. Eliminating Waterfalls (CRITICAL)\n\n- `async-defer-await` - Move await into branches where actually used\n- `async-parallel` - Use Promise.all() for independent operations\n- `async-dependencies` - Use better-all for partial dependencies\n- `async-api-routes` - Start promises early, await late in API routes\n- `async-suspense-boundaries` - Use Suspense to stream content\n\n### 2. Bundle Size Optimization (CRITICAL)\n\n- `bundle-barrel-imports` - Import directly, avoid barrel files\n- `bundle-dynamic-imports` - Use next/dynamic for heavy components\n- `bundle-defer-third-party` - Load analytics/logging after hydration\n- `bundle-conditional` - Load modules only when feature is activated\n- `bundle-preload` - Preload on hover/focus for perceived speed\n\n### 3. Server-Side Performance (HIGH)\n\n- `server-auth-actions` - Authenticate server actions like API routes\n- `server-cache-react` - Use React.cache() for per-request deduplication\n- `server-cache-lru` - Use LRU cache for cross-request caching\n- `server-dedup-props` - Avoid duplicate serialization in RSC props\n- `server-hoist-static-io` - Hoist static I/O (fonts, logos) to module level\n- `server-serialization` - Minimize data passed to client components\n- `server-parallel-fetching` - Restructure components to parallelize fetches\n- `server-after-nonblocking` - Use after() for non-blocking operations\n\n### 4. Client-Side Data Fetching (MEDIUM-HIGH)\n\n- `client-swr-dedup` - Use SWR for automatic request deduplication\n- `client-event-listeners` - Deduplicate global event listeners\n- `client-passive-event-listeners` - Use passive listeners for scroll\n- `client-localstorage-schema` - Version and minimize localStorage data\n\n### 5. Re-render Optimization (MEDIUM)\n\n- `rerender-defer-reads` - Don't subscribe to state only used in callbacks\n- `rerender-memo` - Extract expensive work into memoized components\n- `rerender-memo-with-default-value` - Hoist default non-primitive props\n- `rerender-dependencies` - Use primitive dependencies in effects\n- `rerender-derived-state` - Subscribe to derived booleans, not raw values\n- `rerender-derived-state-no-effect` - Derive state during render, not effects\n- `rerender-functional-setstate` - Use functional setState for stable callbacks\n- `rerender-lazy-state-init` - Pass function to useState for expensive values\n- `rerender-simple-expression-in-memo` - Avoid memo for simple primitives\n- `rerender-move-effect-to-event` - Put interaction logic in event handlers\n- `rerender-transitions` - Use startTransition for non-urgent updates\n- `rerender-use-ref-transient-values` - Use refs for transient frequent values\n\n### 6. Rendering Performance (MEDIUM)\n\n- `rendering-animate-svg-wrapper` - Animate div wrapper, not SVG element\n- `rendering-content-visibility` - Use content-visibility for long lists\n- `rendering-hoist-jsx` - Extract static JSX outside components\n- `rendering-svg-precision` - Reduce SVG coordinate precision\n- `rendering-hydration-no-flicker` - Use inline script for client-only data\n- `rendering-hydration-suppress-warning` - Suppress expected mismatches\n- `rendering-activity` - Use Activity component for show/hide\n- `rendering-conditional-render` - Use ternary, not && for conditionals\n- `rendering-usetransition-loading` - Prefer useTransition for loading state\n\n### 7. JavaScript Performance (LOW-MEDIUM)\n\n- `js-batch-dom-css` - Group CSS changes via classes or cssText\n- `js-index-maps` - Build Map for repeated lookups\n- `js-cache-property-access` - Cache object properties in loops\n- `js-cache-function-results` - Cache function results in module-level Map\n- `js-cache-storage` - Cache localStorage/sessionStorage reads\n- `js-combine-iterations` - Combine multiple filter/map into one loop\n- `js-length-check-first` - Check array length before expensive comparison\n- `js-early-exit` - Return early from functions\n- `js-hoist-regexp` - Hoist RegExp creation outside loops\n- `js-min-max-loop` - Use loop for min/max instead of sort\n- `js-set-map-lookups` - Use Set/Map for O(1) lookups\n- `js-tosorted-immutable` - Use toSorted() for immutability\n\n### 8. Advanced Patterns (LOW)\n\n- `advanced-event-handler-refs` - Store event handlers in refs\n- `advanced-init-once` - Initialize app once per app load\n- `advanced-use-latest` - useLatest for stable callback refs\n\n## How to Use\n\nRead individual rule files for detailed explanations and code examples:\n\n```\nrules/async-parallel.md\nrules/bundle-barrel-imports.md\n```\n\nEach rule file contains:\n- Brief explanation of why it matters\n- Incorrect code example with explanation\n- Correct code example with explanation\n- Additional context and references\n\n## Full Compiled Document\n\nFor the complete guide with all rules expanded: `AGENTS.md`","tags":["vercel","react","best","practices","synapse","deve1993","agent-skills","ai-agents","ai-coding","ai-workspace","anti-poisoning","auto-learning-ai"],"capabilities":["skill","source-deve1993","skill-vercel-react-best-practices","topic-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workspace","topic-anti-poisoning","topic-auto-learning-ai","topic-automation","topic-claude-code","topic-code-quality","topic-cursor","topic-developer-tools","topic-devops"],"categories":["Synapse"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/deve1993/Synapse/vercel-react-best-practices","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add deve1993/Synapse","source_repo":"https://github.com/deve1993/Synapse","install_from":"skills.sh"}},"qualityScore":"0.453","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 7 github stars · SKILL.md body (5,796 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:14:15.039Z","embedding":null,"createdAt":"2026-05-18T13:21:48.259Z","updatedAt":"2026-05-18T19:14:15.039Z","lastSeenAt":"2026-05-18T19:14:15.039Z","tsv":"'1':119,173,759 '2':124,227 '3':130,278 '4':137,369 '5':147,415 '58':59 '6':154,553 '7':159,643 '8':62,166,769 'access':674 'across':61 'action':287,290 'activ':268,619,621 'actual':186 'addit':837 'advanc':167,170,770,774,784,794 'advanced-event-handler-ref':773 'advanced-init-onc':783 'advanced-use-latest':793 'agents.md':852 'analytics/logging':256 'anim':559,562 'api':208,216,292 'app':788,791 'appli':76 'applic':54 'array':716 'async':123,178,189,197,207,219 'async-api-rout':206 'async-defer-await':177 'async-depend':196 'async-parallel':188 'async-suspense-boundari':218 'auth':286 'authent':288 'autom':69 'automat':385 'avoid':238,321,514 'await':180,182,213 'barrel':234,239 'batch':651 'best':4,44 'better':201 'better-al':200 'block':367 'boolean':470 'boundari':221 'branch':184 'brief':821 'build':665 'bundl':106,125,129,228,233,242,251,260,270 'bundle-barrel-import':232 'bundle-condit':259 'bundle-defer-third-parti':250 'bundle-dynamic-import':241 'bundle-preload':269 'cach':296,307,311,316,672,675,682,685,695,697 'callback':433,495,800 'categori':63,112,116 'chang':656 'check':713,715 'class':658 'client':91,139,146,347,371,379,389,397,407,606 'client-event-listen':388 'client-localstorage-schema':406 'client-on':605 'client-passive-event-listen':396 'client-sid':138,370 'client-swr-dedup':378 'code':26,72,97,104,813,828,833 'combin':702,704 'comparison':720 'compil':842 'complet':846 'compon':37,84,249,348,354,442,587,622 'comprehens':46 'condit':261,627,633 'contain':58,820 'content':226,570,574 'content-vis':573 'context':838 'coordin':594 'correct':832 'creation':735 'critic':122,128,176,231 'cross':314 'cross-request':313 'css':653,655 'csstext':660 'data':40,89,141,344,373,414,608 'dedup':319,381 'dedupl':304,387,392 'default':447,450 'defer':179,252,423 'depend':198,205,457,460 'deriv':465,469,476,480 'detail':810 'direct':237 'div':563 'document':843 'dom':652 'duplic':322 'dynam':243 'earli':212,723,726 'effect':462,479,485,522 'element':567 'elimin':120,174 'engin':14 'ensur':28 'event':390,394,399,524,529,775,779 'exampl':814,829,834 'exist':102 'exit':724 'expand':851 'expect':615 'expens':438,506,719 'explan':811,822,831,836 'express':511 'extract':437,583 'featur':266 'fetch':41,90,142,352,357,374 'file':240,808,819 'filter/map':706 'first':714 'flicker':600 'font':335 'frequent':551 'full':841 'function':488,491,502,683,686,728 'generat':73 'global':393 'group':654 'guid':49,68,847 'guidelin':11,79 'handler':530,776,780 'heavi':248 'high':135,145,283,377 'hoist':329,332,449,581,731,733 'hover/focus':274 'hydrat':258,598,611 'i/o':334 'immut':764,768 'impact':66,117 'implement':88 'import':235,236,244 'incorrect':827 'independ':194 'index':663 'individu':806 'init':500,785 'initi':787 'inlin':602 'instead':747 'interact':526 'involv':35 'io':331 'issu':100 'iter':703 'javascript':160,644 'js':165,650,662,671,681,694,701,711,722,730,739,751,762 'js-batch-dom-css':649 'js-cache-function-result':680 'js-cache-property-access':670 'js-cache-storag':693 'js-combine-iter':700 'js-early-exit':721 'js-hoist-regexp':729 'js-index-map':661 'js-length-check-first':710 'js-min-max-loop':738 'js-set-map-lookup':750 'js-tosorted-immut':761 'jsx':582,585 'late':214 'latest':796 'lazi':498 'length':712,717 'level':339,691 'like':291 'list':578 'listen':391,395,400,403 'load':109,255,262,637,641,792 'localstorag':408,413 'localstorage/sessionstorage':698 'logic':527 'logo':336 'long':577 'lookup':669,754,760 'loop':679,709,737,742,744 'low':163,169,647,772 'low-medium':162,646 'lru':308,310 'maintain':55 'map':664,666,692,753 'matter':826 'max':741 'medium':144,152,157,164,376,420,556,648 'medium-high':143,375 'memo':436,445,513,515 'memoiz':441 'min':740 'min/max':746 'minim':343,412 'mismatch':616 'modul':263,338,690 'module-level':689 'move':181,521 'multipl':705 'new':82 'next.js':8,38,53,86 'next/dynamic':246 'non':366,452,538 'non-block':365 'non-primit':451 'non-urg':537 'nonblock':361 'o':758 'object':676 'one':708 'oper':195,368 'optim':10,29,48,105,127,151,230,419 'outsid':586,736 'page':39,87 'parallel':190,351,356 'parti':254 'partial':204 'pass':345,501 'passiv':398,402 'pattern':31,168,771 'per':302,790 'per-request':301 'perceiv':276 'perform':9,30,47,99,134,156,161,282,555,645 'practic':5,45 'precis':591,595 'prefer':638 'prefix':118 'preload':271,272 'primit':453,459,518 'priorit':64 'prioriti':114,115 'promis':211 'promise.all':192 'prop':320,326,454 'properti':673,677 'put':525 'quick':171 'raw':472 're':149,417 're-rend':148,416 'react':3,6,36,43,51,83,297 'react.cache':299 'react/next.js':25,103 'read':424,699,805 'reduc':592 'ref':544,548,777,782,801 'refactor':24,70,101 'refer':77,172,840 'regexp':732,734 'render':150,155,158,418,483,554,558,569,580,589,597,610,618,626,628,635 'rendering-act':617 'rendering-animate-svg-wrapp':557 'rendering-conditional-rend':625 'rendering-content-vis':568 'rendering-hoist-jsx':579 'rendering-hydration-no-flick':596 'rendering-hydration-suppress-warn':609 'rendering-svg-precis':588 'rendering-usetransition-load':634 'repeat':668 'request':303,315,386 'rerend':153,422,435,444,456,464,475,487,497,509,520,532,542 'rerender-defer-read':421 'rerender-depend':455 'rerender-derived-st':463 'rerender-derived-state-no-effect':474 'rerender-functional-setst':486 'rerender-lazy-state-init':496 'rerender-memo':434 'rerender-memo-with-default-valu':443 'rerender-move-effect-to-ev':519 'rerender-simple-expression-in-memo':508 'rerender-transit':531 'rerender-use-ref-transient-valu':541 'restructur':353 'result':684,687 'return':725 'review':22,96 'rout':209,217,293 'rsc':325 'rule':60,111,807,818,850 'rules/async-parallel.md':815 'rules/bundle-barrel-imports.md':816 'schema':409 'script':603 'scroll':405 'serial':323,342 'server':94,132,136,280,285,289,295,306,318,328,341,350,359 'server-after-nonblock':358 'server-auth-act':284 'server-cache-lru':305 'server-cache-react':294 'server-dedup-prop':317 'server-hoist-static-io':327 'server-parallel-fetch':349 'server-seri':340 'server-sid':93,131,279 'set':752 'set/map':756 'setstat':489,492 'show/hide':624 'side':95,133,140,281,372 'simpl':510,517 'size':107,126,229 'skill':16 'skill-vercel-react-best-practices' 'sort':749 'source-deve1993' 'speed':277 'stabl':494,799 'start':210 'starttransit':535 'state':429,466,477,481,499,642 'static':330,333,584 'storag':696 'store':778 'stream':225 'subscrib':427,467 'suppress':612,614 'suspens':220,223 'svg':560,566,590,593 'swr':380,383 'task':34 'ternari':630 'third':253 'time':110 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workspace' 'topic-anti-poisoning' 'topic-auto-learning-ai' 'topic-automation' 'topic-claude-code' 'topic-code-quality' 'topic-cursor' 'topic-developer-tools' 'topic-devops' 'tosort':763,766 'transient':545,550 'transit':533 'trigger':32 'updat':540 'urgent':539 'use':19,187,191,199,222,245,298,309,362,382,401,431,458,490,534,543,547,572,601,620,629,743,755,765,795,804 'uselatest':797 'usest':504 'usetransit':636,639 'valu':448,473,507,546,552 'vercel':2,13,42,57 'vercel-react-best-practic':1 'version':410 'via':657 'visibl':571,575 'warn':613 'waterfal':121,175 'work':439 'wrapper':561,564 'write':21,81","prices":[{"id":"892a030d-d6f1-4294-8f18-8d1d9a6a4c2d","listingId":"0bde48a8-bffd-40a1-b9b9-1a521c262e52","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"deve1993","category":"Synapse","install_from":"skills.sh"},"createdAt":"2026-05-18T13:21:48.259Z"}],"sources":[{"listingId":"0bde48a8-bffd-40a1-b9b9-1a521c262e52","source":"github","sourceId":"deve1993/Synapse/vercel-react-best-practices","sourceUrl":"https://github.com/deve1993/Synapse/tree/main/skills/vercel-react-best-practices","isPrimary":false,"firstSeenAt":"2026-05-18T13:21:48.259Z","lastSeenAt":"2026-05-18T19:14:15.039Z"}],"details":{"listingId":"0bde48a8-bffd-40a1-b9b9-1a521c262e52","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"deve1993","slug":"vercel-react-best-practices","github":{"repo":"deve1993/Synapse","stars":7,"topics":["agent-skills","ai-agents","ai-coding","ai-workspace","anti-poisoning","auto-learning-ai","automation","claude-code","code-quality","cursor","developer-tools","devops","fullstack-development","multi-agent-systems","nextjs","opencode","persistent-memory","self-improving","telegram-bot"],"license":"other","html_url":"https://github.com/deve1993/Synapse","pushed_at":"2026-05-15T21:34:01Z","description":"Self-improving AI brain for Claude Code & Desktop — 28 MCP tools, 253 skills, collective memory, project tracking, work logs. One server, all your sessions share the same knowledge. Deploy on Coolify in 2 minutes.","skill_md_sha":"7e887d4eef55cc0fcfe7ffc46df97d6a6746bc73","skill_md_path":"skills/vercel-react-best-practices/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/deve1993/Synapse/tree/main/skills/vercel-react-best-practices"},"layout":"multi","source":"github","category":"Synapse","frontmatter":{"name":"vercel-react-best-practices","license":"MIT","description":"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."},"skills_sh_url":"https://skills.sh/deve1993/Synapse/vercel-react-best-practices"},"updatedAt":"2026-05-18T19:14:15.039Z"}}