{"slug":"vercel-react-best-practices-3","title":"vercel-react-best-practices","summary":"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, ","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-09-30T19:53:12.056207Z","repo":{"url":"https://github.com/runkids/my-skills","stars":14,"forks":1,"license":null,"updatedAt":"2026-09-30T18:53:08Z"},"bodyHtml":"<h1>React Best Practices</h1>\n<p>A structured repository for creating and maintaining React Best Practices optimized for agents and LLMs.</p>\n<h2>Structure</h2>\n<ul>\n<li><code>rules/</code> - Individual rule files (one per rule)\n<ul>\n<li><code>_sections.md</code> - Section metadata (titles, impacts, descriptions)</li>\n<li><code>_template.md</code> - Template for creating new rules</li>\n<li><code>area-description.md</code> - Individual rule files</li>\n</ul>\n</li>\n<li><code>src/</code> - Build scripts and utilities</li>\n<li><code>metadata.json</code> - Document metadata (version, organization, abstract)</li>\n<li><strong><code>AGENTS.md</code></strong> - Compiled output (generated)</li>\n<li><strong><code>test-cases.json</code></strong> - Test cases for LLM evaluation (generated)</li>\n</ul>\n<h2>Getting Started</h2>\n<ol>\n<li><p>Install dependencies:</p>\n<pre><code>pnpm install\n</code></pre>\n</li>\n<li><p>Build AGENTS.md from rules:</p>\n<pre><code>pnpm build\n</code></pre>\n</li>\n<li><p>Validate rule files:</p>\n<pre><code>pnpm validate\n</code></pre>\n</li>\n<li><p>Extract test cases:</p>\n<pre><code>pnpm extract-tests\n</code></pre>\n</li>\n</ol>\n<h2>Creating a New Rule</h2>\n<ol>\n<li>Copy <code>rules/_template.md</code> to <code>rules/area-description.md</code></li>\n<li>Choose the appropriate area prefix:\n<ul>\n<li><code>async-</code> for Eliminating Waterfalls (Section 1)</li>\n<li><code>bundle-</code> for Bundle Size Optimization (Section 2)</li>\n<li><code>server-</code> for Server-Side Performance (Section 3)</li>\n<li><code>client-</code> for Client-Side Data Fetching (Section 4)</li>\n<li><code>rerender-</code> for Re-render Optimization (Section 5)</li>\n<li><code>rendering-</code> for Rendering Performance (Section 6)</li>\n<li><code>js-</code> for JavaScript Performance (Section 7)</li>\n<li><code>advanced-</code> for Advanced Patterns (Section 8)</li>\n</ul>\n</li>\n<li>Fill in the frontmatter and content</li>\n<li>Ensure you have clear examples with explanations</li>\n<li>Run <code>pnpm build</code> to regenerate AGENTS.md and test-cases.json</li>\n</ol>\n<h2>Rule File Structure</h2>\n<p>Each rule file should follow this structure:</p>\n<pre><code>---\ntitle: Rule Title Here\nimpact: MEDIUM\nimpactDescription: Optional description\ntags: tag1, tag2, tag3\n---\n\n## Rule Title Here\n\nBrief explanation of the rule and why it matters.\n\n**Incorrect (description of what's wrong):**\n\n```typescript\n// Bad code example\n</code></pre>\n<p><strong>Correct (description of what's right):</strong></p>\n<pre><code>// Good code example\n</code></pre>\n<p>Optional explanatory text after examples.</p>\n<p>Reference: <a href=\"https://example.com\">Link</a></p>\n<h2>File Naming Convention</h2>\n<ul>\n<li>Files starting with <code>_</code> are special (excluded from build)</li>\n<li>Rule files: <code>area-description.md</code> (e.g., <code>async-parallel.md</code>)</li>\n<li>Section is automatically inferred from filename prefix</li>\n<li>Rules are sorted alphabetically by title within each section</li>\n<li>IDs (e.g., 1.1, 1.2) are auto-generated during build</li>\n</ul>\n<h2>Impact Levels</h2>\n<ul>\n<li><code>CRITICAL</code> - Highest priority, major performance gains</li>\n<li><code>HIGH</code> - Significant performance improvements</li>\n<li><code>MEDIUM-HIGH</code> - Moderate-high gains</li>\n<li><code>MEDIUM</code> - Moderate performance improvements</li>\n<li><code>LOW-MEDIUM</code> - Low-medium gains</li>\n<li><code>LOW</code> - Incremental improvements</li>\n</ul>\n<h2>Scripts</h2>\n<ul>\n<li><code>pnpm build</code> - Compile rules into AGENTS.md</li>\n<li><code>pnpm validate</code> - Validate all rule files</li>\n<li><code>pnpm extract-tests</code> - Extract test cases for LLM evaluation</li>\n<li><code>pnpm dev</code> - Build and validate</li>\n</ul>\n<h2>Contributing</h2>\n<p>When adding or modifying rules:</p>\n<ol>\n<li>Use the correct filename prefix for your section</li>\n<li>Follow the <code>_template.md</code> structure</li>\n<li>Include clear bad/good examples with explanations</li>\n<li>Add appropriate tags</li>\n<li>Run <code>pnpm build</code> to regenerate AGENTS.md and test-cases.json</li>\n<li>Rules are automatically sorted by title - no need to manage numbers!</li>\n</ol>\n<h2>Acknowledgments</h2>\n<p>Originally created by <a href=\"https://x.com/shuding\">@shuding</a> at <a href=\"https://vercel.com\">Vercel</a>.</p>\n","files":[{"path":"AGENTS.md","sizeBytes":108261,"isText":true},{"path":"metadata.json","sizeBytes":921,"isText":true},{"path":"README.md","sizeBytes":3360,"isText":true},{"path":"rules/advanced-effect-event-deps.md","sizeBytes":1802,"isText":true},{"path":"rules/advanced-event-handler-refs.md","sizeBytes":1483,"isText":true},{"path":"rules/advanced-init-once.md","sizeBytes":958,"isText":true},{"path":"rules/advanced-use-latest.md","sizeBytes":1072,"isText":true},{"path":"rules/async-api-routes.md","sizeBytes":1125,"isText":true},{"path":"rules/async-cheap-condition-before-await.md","sizeBytes":1220,"isText":true},{"path":"rules/async-defer-await.md","sizeBytes":2208,"isText":true},{"path":"rules/async-dependencies.md","sizeBytes":1293,"isText":true},{"path":"rules/async-parallel.md","sizeBytes":654,"isText":true},{"path":"rules/async-suspense-boundaries.md","sizeBytes":2510,"isText":true},{"path":"rules/bundle-analyzable-paths.md","sizeBytes":2382,"isText":true},{"path":"rules/bundle-barrel-imports.md","sizeBytes":2795,"isText":true},{"path":"rules/bundle-conditional.md","sizeBytes":949,"isText":true},{"path":"rules/bundle-defer-third-party.md","sizeBytes":920,"isText":true},{"path":"rules/bundle-dynamic-imports.md","sizeBytes":791,"isText":true},{"path":"rules/bundle-preload.md","sizeBytes":1149,"isText":true},{"path":"rules/client-event-listeners.md","sizeBytes":1969,"isText":true},{"path":"rules/client-localstorage-schema.md","sizeBytes":1950,"isText":true},{"path":"rules/client-passive-event-listeners.md","sizeBytes":1644,"isText":true},{"path":"rules/client-swr-dedup.md","sizeBytes":1159,"isText":true},{"path":"rules/js-batch-dom-css.md","sizeBytes":3266,"isText":true},{"path":"rules/js-cache-function-results.md","sizeBytes":1949,"isText":true},{"path":"rules/js-cache-property-access.md","sizeBytes":532,"isText":true},{"path":"rules/js-cache-storage.md","sizeBytes":1651,"isText":true},{"path":"rules/js-combine-iterations.md","sizeBytes":753,"isText":true},{"path":"rules/js-early-exit.md","sizeBytes":1133,"isText":true},{"path":"rules/js-flatmap-filter.md","sizeBytes":1411,"isText":true},{"path":"rules/js-hoist-regexp.md","sizeBytes":1028,"isText":true},{"path":"rules/js-index-maps.md","sizeBytes":837,"isText":true},{"path":"rules/js-length-check-first.md","sizeBytes":1747,"isText":true},{"path":"rules/js-min-max-loop.md","sizeBytes":2290,"isText":true},{"path":"rules/js-request-idle-callback.md","sizeBytes":2647,"isText":true},{"path":"rules/js-set-map-lookups.md","sizeBytes":532,"isText":true},{"path":"rules/js-tosorted-immutable.md","sizeBytes":1782,"isText":true},{"path":"rules/rendering-activity.md","sizeBytes":564,"isText":true},{"path":"rules/rendering-animate-svg-wrapper.md","sizeBytes":1185,"isText":true},{"path":"rules/rendering-conditional-render.md","sizeBytes":980,"isText":true},{"path":"rules/rendering-content-visibility.md","sizeBytes":815,"isText":true},{"path":"rules/rendering-hoist-jsx.md","sizeBytes":1039,"isText":true},{"path":"rules/rendering-hydration-no-flicker.md","sizeBytes":2308,"isText":true},{"path":"rules/rendering-hydration-suppress-warning.md","sizeBytes":872,"isText":true},{"path":"rules/rendering-resource-hints.md","sizeBytes":2549,"isText":true},{"path":"rules/rendering-script-defer-async.md","sizeBytes":1868,"isText":true},{"path":"rules/rendering-svg-precision.md","sizeBytes":588,"isText":true},{"path":"rules/rendering-usetransition-loading.md","sizeBytes":2074,"isText":true},{"path":"rules/rerender-defer-reads.md","sizeBytes":973,"isText":true},{"path":"rules/rerender-dependencies.md","sizeBytes":824,"isText":true},{"path":"rules/rerender-derived-state.md","sizeBytes":728,"isText":true},{"path":"rules/rerender-derived-state-no-effect.md","sizeBytes":1201,"isText":true},{"path":"rules/rerender-functional-setstate.md","sizeBytes":2968,"isText":true},{"path":"rules/rerender-lazy-state-init.md","sizeBytes":2016,"isText":true},{"path":"rules/rerender-memo.md","sizeBytes":1148,"isText":true},{"path":"rules/rerender-memo-with-default-value.md","sizeBytes":1173,"isText":true},{"path":"rules/rerender-move-effect-to-event.md","sizeBytes":1268,"isText":true},{"path":"rules/rerender-no-inline-components.md","sizeBytes":2135,"isText":true},{"path":"rules/rerender-simple-expression-in-memo.md","sizeBytes":1018,"isText":true},{"path":"rules/rerender-split-combined-hooks.md","sizeBytes":1844,"isText":true},{"path":"rules/rerender-transitions.md","sizeBytes":1055,"isText":true},{"path":"rules/rerender-use-deferred-value.md","sizeBytes":1846,"isText":true},{"path":"rules/rerender-use-ref-transient-values.md","sizeBytes":1742,"isText":true},{"path":"rules/_sections.md","sizeBytes":1554,"isText":true},{"path":"rules/server-after-nonblocking.md","sizeBytes":2012,"isText":true},{"path":"rules/server-auth-actions.md","sizeBytes":2649,"isText":true},{"path":"rules/server-cache-lru.md","sizeBytes":1353,"isText":true},{"path":"rules/server-cache-react.md","sizeBytes":2228,"isText":true},{"path":"rules/server-dedup-props.md","sizeBytes":2060,"isText":true},{"path":"rules/server-hoist-static-io.md","sizeBytes":4423,"isText":true},{"path":"rules/server-no-shared-module-state.md","sizeBytes":1766,"isText":true},{"path":"rules/server-parallel-fetching.md","sizeBytes":1554,"isText":true},{"path":"rules/server-parallel-nested-fetching.md","sizeBytes":992,"isText":true},{"path":"rules/server-serialization.md","sizeBytes":996,"isText":true},{"path":"rules/_template.md","sizeBytes":631,"isText":true},{"path":"SKILL.md","sizeBytes":7251,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-09-30T19:54:01.500274Z","sha256":"ACAA5A1DDF78AC69602188AF673A7ECEBDCBA45C374FDA6102538CED2F19567C","sizeBytes":94266},"review":null,"source":{"repositoryUrl":"https://github.com/runkids/my-skills","path":"frontend/react-best-practices","license":null,"commit":"7f33dbc5934c5e27920b3e88e8a6ccb06f304b98","subtreeSha":"A33BD60ED15FDED58509A19A33F1EA57DE21D700CC51B3E3E9D42A29C9786D7B","lastSyncedAt":"2026-09-30T19:53:09.4483Z"},"reviewedAt":"2026-09-30T20:00:58.179462Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/runkids/my-skills/tree/main/frontend/react-best-practices"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install runkids-my-skills@llmmart"},{"target":"git","command":"git clone https://github.com/runkids/my-skills.git"}]}