{"id":"407d6bab-ea01-4889-9506-33234ce7485a","shortId":"neKZaJ","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\n### When to Load\n\n- **Trigger**: React or Next.js development, component writing, data fetching patterns, bundle optimization\n- **Skip**: Project does not use React or Next.js\n\nComprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 45 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\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-cache-react` - Use React.cache() for per-request deduplication\n- `server-cache-lru` - Use LRU cache for cross-request caching\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\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-dependencies` - Use primitive dependencies in effects\n- `rerender-derived-state` - Subscribe to derived booleans, not raw values\n- `rerender-functional-setstate` - Use functional setState for stable callbacks\n- `rerender-lazy-state-init` - Pass function to useState for expensive values\n- `rerender-transitions` - Use startTransition for non-urgent updates\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-activity` - Use Activity component for show/hide\n- `rendering-conditional-render` - Use ternary, not && for conditionals\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-use-latest` - useLatest for stable callback refs\n\n## Full Compiled Document\n\nFor the complete guide with all rules expanded and detailed code examples, see: `AGENTS.md`\n\nEach rule contains:\n\n- Brief explanation of why it matters\n- Incorrect code example with explanation\n- Correct code example with explanation\n- Additional context and references","tags":["vercel","react","best","practices","claude","workflow","cloudai-x","agent-skills","ai-agents","claude-code","codex","cursor"],"capabilities":["skill","source-cloudai-x","skill-vercel-react-best-practices","topic-agent-skills","topic-ai-agents","topic-claude-code","topic-codex","topic-cursor","topic-skills","topic-workflow"],"categories":["claude-workflow-v2"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/CloudAI-X/claude-workflow-v2/vercel-react-best-practices","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add CloudAI-X/claude-workflow-v2","source_repo":"https://github.com/CloudAI-X/claude-workflow-v2","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 1352 github stars · SKILL.md body (5,095 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-03T00:52:56.272Z","embedding":null,"createdAt":"2026-04-18T21:55:00.341Z","updatedAt":"2026-05-03T00:52:56.272Z","lastSeenAt":"2026-05-03T00:52:56.272Z","tsv":"'1':142,196,654 '2':147,250 '3':153,301 '4':160,359 '45':82 '5':170,386 '6':177,465 '7':182,538 '8':85,189,664 'access':569 'across':84 'activ':291,523,525 'actual':209 'addit':723 'advanc':190,193,665,669,679 'advanced-event-handler-ref':668 'advanced-use-latest':678 'agents.md':703 'analytics/logging':279 'anim':471,474 'api':231,239 'appli':99 'applic':77 'array':611 'async':146,201,212,220,230,242 'async-api-rout':229 'async-defer-await':200 'async-depend':219 'async-parallel':211 'async-suspense-boundari':241 'autom':92 'automat':375 'avoid':261 'await':203,205,236 'barrel':257,262 'batch':546 'best':4,44 'better':224 'better-al':223 'block':357 'boolean':429 'boundari':244 'branch':207 'brief':707 'build':560 'bundl':59,129,148,152,251,256,265,274,283,293 'bundle-barrel-import':255 'bundle-condit':282 'bundle-defer-third-parti':273 'bundle-dynamic-import':264 'bundle-preload':292 'cach':309,320,324,329,567,570,577,580,590,592 'callback':404,442,685 'categori':86,135,139 'chang':551 'check':608,610 'class':553 'client':114,162,169,337,361,369,379,518 'client-event-listen':378 'client-on':517 'client-sid':161,360 'client-swr-dedup':368 'code':26,95,120,127,700,714,719 'combin':597,599 'comparison':615 'compil':688 'complet':692 'compon':37,54,107,272,338,344,413,499,526 'comprehens':69 'condit':284,531,537 'contain':81,706 'content':249,482,486 'content-vis':485 'context':724 'coordin':506 'correct':718 'creation':630 'critic':145,151,199,254 'cross':327 'cross-request':326 'css':548,550 'csstext':555 'data':40,56,112,164,334,363,520 'dedup':371 'dedupl':317,377,382 'defer':202,275,394 'depend':221,228,416,419 'deriv':424,428 'detail':699 'develop':53 'direct':260 'div':475 'document':689 'dom':547 'dynam':266 'earli':235,618,621 'effect':421 'element':479 'elimin':143,197 'engin':14 'ensur':28 'event':380,384,670,674 'exampl':701,715,720 'exist':125 'exit':619 'expand':697 'expens':409,453,614 'explan':708,717,722 'extract':408,495 'featur':289 'fetch':41,57,113,165,342,347,364 'file':263 'filter/map':601 'first':609 'flicker':512 'full':687 'function':435,438,449,578,581,623 'generat':96 'global':383 'group':549 'guid':72,91,693 'guidelin':11,102 'handler':671,675 'heavi':271 'high':158,168,306,367 'hoist':493,626,628 'hover/focus':297 'hydrat':281,510 'immut':659,663 'impact':89,140 'implement':111 'import':258,259,267 'incorrect':713 'independ':217 'index':558 'init':447 'inlin':514 'instead':642 'involv':35 'issu':123 'iter':598 'javascript':183,539 'js':188,545,557,566,576,589,596,606,617,625,634,646,657 'js-batch-dom-css':544 'js-cache-function-result':575 'js-cache-property-access':565 'js-cache-storag':588 'js-combine-iter':595 'js-early-exit':616 'js-hoist-regexp':624 'js-index-map':556 'js-length-check-first':605 'js-min-max-loop':633 'js-set-map-lookup':645 'js-tosorted-immut':656 'jsx':494,497 'late':237 'latest':681 'lazi':445 'length':607,612 'level':586 'list':490 'listen':381,385 'load':48,132,278,285 'localstorage/sessionstorage':593 'long':489 'lookup':564,649,655 'loop':574,604,632,637,639 'low':186,192,542,667 'low-medium':185,541 'lru':321,323 'maintain':78 'map':559,561,587,648 'matter':712 'max':636 'medium':167,175,180,187,366,391,468,543 'medium-high':166,365 'memo':407 'memoiz':412 'min':635 'min/max':641 'minim':333 'modul':286,585 'module-level':584 'move':204 'multipl':600 'new':105 'next.js':8,38,52,68,76,109 'next/dynamic':269 'non':356,462 'non-block':355 'non-urg':461 'nonblock':351 'o':653 'object':571 'one':603 'oper':218,358 'optim':10,29,60,71,128,150,174,253,390 'outsid':498,631 'page':39,110 'parallel':213,341,346 'parti':277 'partial':227 'pass':335,448 'pattern':31,58,191,666 'per':315 'per-request':314 'perceiv':299 'perform':9,30,70,122,157,179,184,305,467,540 'practic':5,45 'precis':503,507 'prefix':141 'preload':294,295 'primit':418 'priorit':87 'prioriti':137,138 'project':62 'promis':234 'promise.all':215 'properti':568,572 'quick':194 'raw':431 're':172,388 're-rend':171,387 'react':3,6,36,43,50,66,74,106,310 'react.cache':312 'react/next.js':25,126 'read':395,594 'reduc':504 'ref':672,677,686 'refactor':24,93,124 'refer':100,195,726 'regexp':627,629 'render':173,178,181,389,466,470,481,492,501,509,522,530,532 'rendering-act':521 'rendering-animate-svg-wrapp':469 'rendering-conditional-rend':529 'rendering-content-vis':480 'rendering-hoist-jsx':491 'rendering-hydration-no-flick':508 'rendering-svg-precis':500 'repeat':563 'request':316,328,376 'rerend':176,393,406,415,423,434,444,456 'rerender-defer-read':392 'rerender-depend':414 'rerender-derived-st':422 'rerender-functional-setst':433 'rerender-lazy-state-init':443 'rerender-memo':405 'rerender-transit':455 'restructur':343 'result':579,582 'return':620 'review':22,119 'rout':232,240 'rule':83,134,696,705 'script':515 'see':702 'serial':332 'server':117,155,159,303,308,319,331,340,349 'server-after-nonblock':348 'server-cache-lru':318 'server-cache-react':307 'server-parallel-fetch':339 'server-seri':330 'server-sid':116,154,302 'set':647 'set/map':651 'setstat':436,439 'show/hide':528 'side':118,156,163,304,362 'size':130,149,252 'skill':16 'skill-vercel-react-best-practices' 'skip':61 'sort':644 'source-cloudai-x' 'speed':300 'stabl':441,684 'start':233 'starttransit':459 'state':400,425,446 'static':496 'storag':591 'store':673 'stream':248 'subscrib':398,426 'suspens':243,246 'svg':472,478,502,505 'swr':370,373 'task':34 'ternari':534 'third':276 'time':133 'topic-agent-skills' 'topic-ai-agents' 'topic-claude-code' 'topic-codex' 'topic-cursor' 'topic-skills' 'topic-workflow' 'tosort':658,661 'transit':457 'trigger':32,49 'updat':464 'urgent':463 'use':19,65,210,214,222,245,268,311,322,352,372,402,417,437,458,484,513,524,533,638,650,660,680 'uselatest':682 'usest':451 'valu':432,454 'vercel':2,13,42,80 'vercel-react-best-practic':1 'via':552 'visibl':483,487 'waterfal':144,198 'work':410 'wrapper':473,476 'write':21,55,104","prices":[{"id":"9792f3d4-7821-4107-98de-6c09e7abcbeb","listingId":"407d6bab-ea01-4889-9506-33234ce7485a","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"CloudAI-X","category":"claude-workflow-v2","install_from":"skills.sh"},"createdAt":"2026-04-18T21:55:00.341Z"}],"sources":[{"listingId":"407d6bab-ea01-4889-9506-33234ce7485a","source":"github","sourceId":"CloudAI-X/claude-workflow-v2/vercel-react-best-practices","sourceUrl":"https://github.com/CloudAI-X/claude-workflow-v2/tree/main/skills/vercel-react-best-practices","isPrimary":false,"firstSeenAt":"2026-04-18T21:55:00.341Z","lastSeenAt":"2026-05-03T00:52:56.272Z"}],"details":{"listingId":"407d6bab-ea01-4889-9506-33234ce7485a","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"CloudAI-X","slug":"vercel-react-best-practices","github":{"repo":"CloudAI-X/claude-workflow-v2","stars":1352,"topics":["agent-skills","ai","ai-agents","claude-code","codex","cursor","skills","workflow"],"license":"mit","html_url":"https://github.com/CloudAI-X/claude-workflow-v2","pushed_at":"2026-02-14T18:09:29Z","description":"Universal Claude Code workflow plugin with agents, skills, hooks, and commands","skill_md_sha":"4aac5d6cc3c252e552d9b4e6dae51d05eb0267cb","skill_md_path":"skills/vercel-react-best-practices/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/CloudAI-X/claude-workflow-v2/tree/main/skills/vercel-react-best-practices"},"layout":"multi","source":"github","category":"claude-workflow-v2","frontmatter":{"name":"vercel-react-best-practices","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/CloudAI-X/claude-workflow-v2/vercel-react-best-practices"},"updatedAt":"2026-05-03T00:52:56.272Z"}}