{"id":"c7078e0a-01dc-4b09-bad4-f35afbdf44d5","shortId":"gCTkRj","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 57 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-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","coco","rkz91","agent-skills","agents-md","ai-agents","claude-code","codex","cursor"],"capabilities":["skill","source-rkz91","skill-vercel-react-best-practices","topic-agent-skills","topic-agents-md","topic-ai-agents","topic-claude-code","topic-codex","topic-cursor","topic-developer-tools","topic-llm-tools","topic-mcp","topic-pm-tools","topic-product-management","topic-productivity"],"categories":["coco"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/rkz91/coco/vercel-react-best-practices","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add rkz91/coco","source_repo":"https://github.com/rkz91/coco","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,719 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:10.131Z","embedding":null,"createdAt":"2026-05-18T13:21:43.671Z","updatedAt":"2026-05-18T19:14:10.131Z","lastSeenAt":"2026-05-18T19:14:10.131Z","tsv":"'1':119,173,746 '2':124,227 '3':130,278 '4':137,356 '5':147,402 '57':59 '6':154,540 '7':159,630 '8':62,166,756 'access':661 'across':61 'action':287,290 'activ':268,606,608 'actual':186 'addit':824 'advanc':167,170,757,761,771,781 'advanced-event-handler-ref':760 'advanced-init-onc':770 'advanced-use-latest':780 'agents.md':839 'analytics/logging':256 'anim':546,549 'api':208,216,292 'app':775,778 'appli':76 'applic':54 'array':703 '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':372 'avoid':238,321,501 'await':180,182,213 'barrel':234,239 'batch':638 'best':4,44 'better':201 'better-al':200 'block':354 'boolean':457 'boundari':221 'branch':184 'brief':808 'build':652 '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,659,662,669,672,682,684 'callback':420,482,787 'categori':63,112,116 'chang':643 'check':700,702 'class':645 'client':91,139,146,334,358,366,376,384,394,593 'client-event-listen':375 'client-localstorage-schema':393 'client-on':592 'client-passive-event-listen':383 'client-sid':138,357 'client-swr-dedup':365 'code':26,72,97,104,800,815,820 'combin':689,691 'comparison':707 'compil':829 'complet':833 'compon':37,84,249,335,341,429,574,609 'comprehens':46 'condit':261,614,620 'contain':58,807 'content':226,557,561 'content-vis':560 'context':825 'coordin':581 'correct':819 'creation':722 'critic':122,128,176,231 'cross':314 'cross-request':313 'css':640,642 'csstext':647 'data':40,89,141,331,360,401,595 'dedup':319,368 'dedupl':304,374,379 'default':434,437 'defer':179,252,410 'depend':198,205,444,447 'deriv':452,456,463,467 'detail':797 'direct':237 'div':550 'document':830 'dom':639 'duplic':322 'dynam':243 'earli':212,710,713 'effect':449,466,472,509 'element':554 'elimin':120,174 'engin':14 'ensur':28 'event':377,381,386,511,516,762,766 'exampl':801,816,821 'exist':102 'exit':711 'expand':838 'expect':602 'expens':425,493,706 'explan':798,809,818,823 'express':498 'extract':424,570 'featur':266 'fetch':41,90,142,339,344,361 'file':240,795,806 'filter/map':693 'first':701 'flicker':587 'frequent':538 'full':828 'function':475,478,489,670,673,715 'generat':73 'global':380 'group':641 'guid':49,68,834 'guidelin':11,79 'handler':517,763,767 'heavi':248 'high':135,145,283,364 'hoist':436,568,718,720 'hover/focus':274 'hydrat':258,585,598 'immut':751,755 'impact':66,117 'implement':88 'import':235,236,244 'incorrect':814 'independ':194 'index':650 'individu':793 'init':487,772 'initi':774 'inlin':589 'instead':734 'interact':513 'involv':35 'issu':100 'iter':690 'javascript':160,631 'js':165,637,649,658,668,681,688,698,709,717,726,738,749 'js-batch-dom-css':636 'js-cache-function-result':667 'js-cache-property-access':657 'js-cache-storag':680 'js-combine-iter':687 'js-early-exit':708 'js-hoist-regexp':716 'js-index-map':648 'js-length-check-first':697 'js-min-max-loop':725 'js-set-map-lookup':737 'js-tosorted-immut':748 'jsx':569,572 'late':214 'latest':783 'lazi':485 'length':699,704 'level':678 'like':291 'list':565 'listen':378,382,387,390 'load':109,255,262,624,628,779 'localstorag':395,400 'localstorage/sessionstorage':685 'logic':514 'long':564 'lookup':656,741,747 'loop':666,696,724,729,731 'low':163,169,634,759 'low-medium':162,633 'lru':308,310 'maintain':55 'map':651,653,679,740 'matter':813 'max':728 'medium':144,152,157,164,363,407,543,635 'medium-high':143,362 'memo':423,432,500,502 'memoiz':428 'min':727 'min/max':733 'minim':330,399 'mismatch':603 'modul':263,677 'module-level':676 'move':181,508 'multipl':692 'new':82 'next.js':8,38,53,86 'next/dynamic':246 'non':353,439,525 'non-block':352 'non-primit':438 'non-urg':524 'nonblock':348 'o':745 'object':663 'one':695 'oper':195,355 'optim':10,29,48,105,127,151,230,406 'outsid':573,723 'page':39,87 'parallel':190,338,343 'parti':254 'partial':204 'pass':332,488 'passiv':385,389 'pattern':31,168,758 'per':302,777 'per-request':301 'perceiv':276 'perform':9,30,47,99,134,156,161,282,542,632 'practic':5,45 'precis':578,582 'prefer':625 'prefix':118 'preload':271,272 'primit':440,446,505 'priorit':64 'prioriti':114,115 'promis':211 'promise.all':192 'prop':320,326,441 'properti':660,664 'put':512 'quick':171 'raw':459 're':149,404 're-rend':148,403 'react':3,6,36,43,51,83,297 'react.cache':299 'react/next.js':25,103 'read':411,686,792 'reduc':579 'ref':531,535,764,769,788 'refactor':24,70,101 'refer':77,172,827 'regexp':719,721 'render':150,155,158,405,470,541,545,556,567,576,584,597,605,613,615,622 'rendering-act':604 'rendering-animate-svg-wrapp':544 'rendering-conditional-rend':612 'rendering-content-vis':555 'rendering-hoist-jsx':566 'rendering-hydration-no-flick':583 'rendering-hydration-suppress-warn':596 'rendering-svg-precis':575 'rendering-usetransition-load':621 'repeat':655 'request':303,315,373 'rerend':153,409,422,431,443,451,462,474,484,496,507,519,529 'rerender-defer-read':408 'rerender-depend':442 'rerender-derived-st':450 'rerender-derived-state-no-effect':461 'rerender-functional-setst':473 'rerender-lazy-state-init':483 'rerender-memo':421 'rerender-memo-with-default-valu':430 'rerender-move-effect-to-ev':506 'rerender-simple-expression-in-memo':495 'rerender-transit':518 'rerender-use-ref-transient-valu':528 'restructur':340 'result':671,674 'return':712 'review':22,96 'rout':209,217,293 'rsc':325 'rule':60,111,794,805,837 'rules/async-parallel.md':802 'rules/bundle-barrel-imports.md':803 'schema':396 'script':590 'scroll':392 'serial':323,329 'server':94,132,136,280,285,289,295,306,318,328,337,346 'server-after-nonblock':345 'server-auth-act':284 'server-cache-lru':305 'server-cache-react':294 'server-dedup-prop':317 'server-parallel-fetch':336 'server-seri':327 'server-sid':93,131,279 'set':739 'set/map':743 'setstat':476,479 'show/hide':611 'side':95,133,140,281,359 'simpl':497,504 'size':107,126,229 'skill':16 'skill-vercel-react-best-practices' 'sort':736 'source-rkz91' 'speed':277 'stabl':481,786 'start':210 'starttransit':522 'state':416,453,464,468,486,629 'static':571 'storag':683 'store':765 'stream':225 'subscrib':414,454 'suppress':599,601 'suspens':220,223 'svg':547,553,577,580 'swr':367,370 'task':34 'ternari':617 'third':253 'time':110 'topic-agent-skills' 'topic-agents-md' 'topic-ai-agents' 'topic-claude-code' 'topic-codex' 'topic-cursor' 'topic-developer-tools' 'topic-llm-tools' 'topic-mcp' 'topic-pm-tools' 'topic-product-management' 'topic-productivity' 'tosort':750,753 'transient':532,537 'transit':520 'trigger':32 'updat':527 'urgent':526 'use':19,187,191,199,222,245,298,309,349,369,388,418,445,477,521,530,534,559,588,607,616,730,742,752,782,791 'uselatest':784 'usest':491 'usetransit':623,626 'valu':435,460,494,533,539 'vercel':2,13,42,57 'vercel-react-best-practic':1 'version':397 'via':644 'visibl':558,562 'warn':600 'waterfal':121,175 'work':426 'wrapper':548,551 'write':21,81","prices":[{"id":"f8dee64b-f126-420a-99b2-b08d49d36335","listingId":"c7078e0a-01dc-4b09-bad4-f35afbdf44d5","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"rkz91","category":"coco","install_from":"skills.sh"},"createdAt":"2026-05-18T13:21:43.671Z"}],"sources":[{"listingId":"c7078e0a-01dc-4b09-bad4-f35afbdf44d5","source":"github","sourceId":"rkz91/coco/vercel-react-best-practices","sourceUrl":"https://github.com/rkz91/coco/tree/main/skills/vercel-react-best-practices","isPrimary":false,"firstSeenAt":"2026-05-18T13:21:43.671Z","lastSeenAt":"2026-05-18T19:14:10.131Z"}],"details":{"listingId":"c7078e0a-01dc-4b09-bad4-f35afbdf44d5","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"rkz91","slug":"vercel-react-best-practices","github":{"repo":"rkz91/coco","stars":7,"topics":["agent-skills","agents-md","ai","ai-agents","claude-code","codex","cursor","developer-tools","llm-tools","mcp","pm-tools","product-management","productivity","prompt-engineering","workflow-automation"],"license":"mit","html_url":"https://github.com/rkz91/coco","pushed_at":"2026-04-26T01:51:27Z","description":"Open-source library of AI superpowers — 59 skills, 34 commands, 10 agents + 24 GSD subagents, 3 system bundles. An entire team, wherever your AI lives. Vendor-neutral across Claude Code, Cursor, Codex, and any AGENTS.md tool.","skill_md_sha":"1ad7750e572f8e28ce21090dc1049fa7eecd8cae","skill_md_path":"skills/vercel-react-best-practices/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/rkz91/coco/tree/main/skills/vercel-react-best-practices"},"layout":"multi","source":"github","category":"coco","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/rkz91/coco/vercel-react-best-practices"},"updatedAt":"2026-05-18T19:14:10.131Z"}}