Vercel React Best Practices
Vercel Engineering's performance rules for React and Next.js as an agent skill: the main file summarises 70 rules across 8 categories, prioritised from critical (eliminating request waterfalls
- What
- Vercel Engineering's performance rules for React and Next.js as an agent skill: the main file summarises 70 rules across 8 categories, prioritised from critical (eliminating request waterfalls
- Cost
- Free
- Needs
- Before you start: read this whole install prompt, tell me in a few lines what this skill does and what installing it involves, and wait for my go-ahead before you do anything else.
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor — Vercel Engineering's performance rules for React and Next.js as an agent skill: the main file summarises 70 rules across 8 categories, prioritised from critical (eliminating request waterfalls, shrinking bundle size) through server-side and client-side data fetching, re-render and rendering performance, to JavaScript micro-optimisations and advanced patterns, and each rule has its own detailed file with incorrect and correct code. A compiled agents document expands every rule in one place. It is knowledge the agent applies while writing, reviewing or refactoring React and Next.js code — it runs nothing, installs nothing and contacts nothing. Curated by Skill Harbor — React and Next.js performance guidelines from Vercel Engineering, by @vercel-labs, listed here with credit to its creator. By @vercel-labs, listed here with credit to its creator. MIT-licensed (announced in the upstream README; no LICENSE file). Skill Harbor never reviews the code, review it yourself before use.
Version:
Install
Copy the install package below, then paste it into Muse📌 Pinned version: commit 063bee9Before you start: read this whole install prompt, tell me in a few lines what this skill does and what installing it involves, and wait for my go-ahead before you do anything else. Prerequisites — None — no account, no key, no payment, and no script in its folder. It is a knowledge-only skill: at use time the agent reads its rule files while working on my own React or Next.js code, nothing is installed into my project, no project metrics are collected and nothing is contacted. Install "Vercel React Best Practices" for me. It gives the agent Vercel Engineering's performance guidelines for React and Next.js: 70 rules in 8 categories ordered by impact — eliminating waterfalls (parallel and deferred awaits, Suspense boundaries), bundle size (direct imports, dynamic imports, deferring third-party code), server performance (authenticating server actions, React.cache, minimising serialisation), client data fetching (SWR deduplication, passive listeners, localStorage discipline), re-render optimisation, rendering performance, JavaScript performance, and advanced patterns. Its folder holds the summary SKILL.md (frontmatter name vercel-react-best-practices), 70 detailed rule files, a compiled AGENTS.md with every rule expanded, a README and a metadata file. Repository: https://github.com/vercel-labs/agent-skills (the skill is the whole skills/react-best-practices/ folder at the pinned commit: SKILL.md plus 75 companion files, 76 files in total) Pinned version: install the code at commit 063bee94c3f4df8453406c830b0a7df0f2860278 exactly. Do not substitute a newer version. If this commit is unreachable, stop and tell me. 1. Clone https://github.com/vercel-labs/agent-skills into a temporary folder, check out commit 063bee94c3f4df8453406c830b0a7df0f2860278, and copy the skills/react-best-practices/ folder from that checkout. Then compare every file in the folder with the fingerprints recorded for this listing on 2026-10-22: [FINGERPRINTS] - AGENTS.md: SHA-256 fc93e7421177bbf869cce892bc60a6c83a4517d974bc3bf65c4e2c1e58a6ccf6 - README.md: SHA-256 9eafb2123d3b8b2aef41fba0db2648a3f4f49996f8c7c8bb2c86263befd8b48a - SKILL.md: SHA-256 71ed7794962fa6e803ee83030517b5b93a9f70fbfeb431ec4535c5480a8d8355 - metadata.json: SHA-256 c4e18bac3290fbe1b471a605867d4df68b03144ea26b8befdbe8f9d8fd124354 - rules/_sections.md: SHA-256 01c59969e4e867f0708c8f8ef9c6d87fab9a07d0586244f429ff84013db8a115 - rules/_template.md: SHA-256 99df2a3ea088c6c22de2484ddc7e964d0e9923846f44c63380343ecc64455442 - rules/advanced-effect-event-deps.md: SHA-256 55ed8f9f27a1bff803d6fa55828176207714b02123cbb97ddb8a90d88024a723 - rules/advanced-event-handler-refs.md: SHA-256 a3097edeecfb2ff6851cd66ed8cdf0617c3c88180504bee824aa6e75a215bbbc - rules/advanced-init-once.md: SHA-256 3e4dc22173eb0e2b6dcf583e3babd862b8696328f8f59aee7c4d746c5bc05f6c - rules/advanced-use-latest.md: SHA-256 8a3f64dfe5a77d1564248faf17fe662ae75b55d497a243cb30b38eb07ccbbf9a - rules/async-api-routes.md: SHA-256 523338540d73427dc14c0cbb19f2741ebccdf8b105a7b2c1b33d2905cf237a42 - rules/async-cheap-condition-before-await.md: SHA-256 03107c1f70a293cd58a8abc5474c5548e20ea4efdf01b6d45aae7ad0ac1cb32c - rules/async-defer-await.md: SHA-256 f3c142d090615abdcc99d31c123be37b31f0f1ed8d9ec9f7789a3bc6883ae0fb - rules/async-dependencies.md: SHA-256 16ef469f877e30c6b8e1e1b4bc3e527312fa3c6318cb785a4eca186ea236131a - rules/async-parallel.md: SHA-256 6d2f841896279e976dfcdc1ac89e70771ac188baadfd43c096b5706cb838b961 - rules/async-suspense-boundaries.md: SHA-256 de05fedac2eb7ae563b887b5a424464ec3dfaf84e5b7797467ebe2a796ac8afc - rules/bundle-analyzable-paths.md: SHA-256 62090b5c815fd71bf1133dce754f51abc16a9456d0ccd025fd627de27726e92a - rules/bundle-barrel-imports.md: SHA-256 e648f6d54525f07a691357040ca5bff6ea3424788a91ff63812adb29622a671b - rules/bundle-conditional.md: SHA-256 09c8259c3efb04fc0abb8e412ccbda217c222ae8118516283e571c995fe3a7d4 - rules/bundle-defer-third-party.md: SHA-256 3719fb47b191e8db4fe22686ec88448ad5af9e6838585425abbe103d0b642e37 - rules/bundle-dynamic-imports.md: SHA-256 401817a7369f315fc5a68a1095742ff7d53d0461906880dc9d64a41495ee1986 - rules/bundle-preload.md: SHA-256 d1f7cc28da7cd5ab249acd287edc5b761afcfb194e9cb62cd44c5f3543db2de2 - rules/client-event-listeners.md: SHA-256 242a873349febc1ce685e85617994784dbab92c2eaa68aed7fed5a83e7680e93 - rules/client-localstorage-schema.md: SHA-256 0fb7cdf9dc93fdf22f87e3669f953fb9d4ac9b0be42eec4a29fe9a2560610b88 - rules/client-passive-event-listeners.md: SHA-256 1f35016f9053de69e884ee9be00654e37979c2ca85f5e57764dc2626ff7acb4b - rules/client-swr-dedup.md: SHA-256 644652c39c6cc00de8d1c77a7273612e868dc3f7edda30764164c12ec0f764a3 - rules/js-batch-dom-css.md: SHA-256 480b891b9eaf96e929dc1e964274a4828e3a78009b7d00ccd965a0d425215959 - rules/js-cache-function-results.md: SHA-256 3daaa11d24f4295cb6be8bc6f407f2ce83cc7b5bd1f0e68891ea8ab835721dc7 - rules/js-cache-property-access.md: SHA-256 73e47431e74878a927061bf0ddc7cd91a7556cb35d2573f3421e82300d9ae311 - rules/js-cache-storage.md: SHA-256 11b826b0433898c1ece2d3547010d8e77db9fb240185748c45db91493de9b6cc - rules/js-combine-iterations.md: SHA-256 71add08aeeb43091d4ff4c0b2842cce8b4bdef8ad3e732cc034bb5a84827e746 - rules/js-early-exit.md: SHA-256 925ce5ce87f3347186ca62212f29cc6baa2b8c85a96d2720ad07c3d0abf781c0 - rules/js-flatmap-filter.md: SHA-256 9e5b166a41914d975bef7635467f8fb32cd98b5c3126c0bc6f163490812fb5f0 - rules/js-hoist-regexp.md: SHA-256 f9e9aef2f7c2307dd7310f283df85dcada45fc43e9bb941b0c3aa414dec21ec4 - rules/js-index-maps.md: SHA-256 5df1bdc2cfabb2c98abd55d26762e5c18189535c2e686184f426082e62920391 - rules/js-length-check-first.md: SHA-256 8b54a311c826b299272f29187fc58bc55772a04c4a72eeb29456ee96dc9fc624 - rules/js-min-max-loop.md: SHA-256 87dfb67e2f39df6ad8bcfb5b78c5fb364d3c07554ad188a202408d99f3763421 - rules/js-request-idle-callback.md: SHA-256 ee08f83905b4011abbc33d594033157d77561b5bbd9b36b04f0f409581ffec32 - rules/js-set-map-lookups.md: SHA-256 a7fd781a6ba9ad49065961b6f9a90ef486bf6b648390e1a08704025f98e1642b - rules/js-tosorted-immutable.md: SHA-256 d0a5e1b0fec48a0a81397957e2f068e224329f7c42cb5feeed8aae6fa64025e8 - rules/rendering-activity.md: SHA-256 1e5e7eaf3555e61d6a2e900089c676527d26259501db5594f59544b6c664f85a - rules/rendering-animate-svg-wrapper.md: SHA-256 9c6ae0ca7a51434e803887c64cded760956579a1452ccb80a461a03f9c937c77 - rules/rendering-conditional-render.md: SHA-256 2ec2fa23c4148285144687050c52369adba3da2fbe3d486f8d3e0aad8f06f2bc - rules/rendering-content-visibility.md: SHA-256 64eee6d5b916fe74df33363994b27fc7f71bea3bcedc7ee04bda23107ca3e6e4 - rules/rendering-hoist-jsx.md: SHA-256 93b229560fae92005ed9a2a829064607b39b2e984e92d221d05b2d41df2b7c0e - rules/rendering-hydration-no-flicker.md: SHA-256 dc7ab358c67c177bca6e6f360fbc935ebe4efa928c0ba3ebd3f9f3d9e2000ca3 - rules/rendering-hydration-suppress-warning.md: SHA-256 915bacb934e2927d84b37a3f3d225a47b309ac8f9e494ed2bcb66ce07c5676a2 - rules/rendering-resource-hints.md: SHA-256 351b1095d641717b930f1b2253282b7120af3023bc74e06c17675168d4286864 - rules/rendering-script-defer-async.md: SHA-256 4cea07b7875ba7fc2c7465ff23b63a2bb334f90aaf2d9293d38d67b05fdb32ab - rules/rendering-svg-precision.md: SHA-256 ed468533f6e95f622859c884b122cf21f9f593ed6bb3d500a54de4b9f9bcb9fb - rules/rendering-usetransition-loading.md: SHA-256 3a1249c3f13026b6f54ab5712c388df219d6af01b12aa542749acd99a46f4bc1 - rules/rerender-defer-reads.md: SHA-256 234050a77faf50cb306be10a9e15bd4421134ab5907e75f13e6d78e2bd262dc9 - rules/rerender-dependencies.md: SHA-256 17eb5830956fb56486fd3cfc7431f5849d39751730c05ad9e77dd4f0c27169c5 - rules/rerender-derived-state-no-effect.md: SHA-256 cb11ec76f50aa7b6847269f02d79b120c889a30d9ecd2c1d578f75144419c77a - rules/rerender-derived-state.md: SHA-256 1c326bb67b01fb084eb00c8911b0a7cff54681c2315b629f88e49b64eaa6481d - rules/rerender-functional-setstate.md: SHA-256 5e68df6b2ae8058e67f476ff1ac67bde159f5a9d18df439e46eabcdeb7b52e58 - rules/rerender-lazy-state-init.md: SHA-256 4ae844740f266fc8cbf050701230286624a2440ec5be67b9a63d9edc3c580573 - rules/rerender-memo-with-default-value.md: SHA-256 81c47476564ad8a79fc68fc442734255ca7d6829424359464503fda0a9f9a0dd - rules/rerender-memo.md: SHA-256 1f258990c2f27ff6256b3cc5c43300631bb3f0d81f749aed08d07fcdcc131dd1 - rules/rerender-move-effect-to-event.md: SHA-256 abc2cbf167bee056743023351e96806a411d3398da8802093620aecf0721f029 - rules/rerender-no-inline-components.md: SHA-256 1cc32907a770272524ba682eef9e7efdd8ad4533b6f89b718a1fcd7d1d0eb6a3 - rules/rerender-simple-expression-in-memo.md: SHA-256 5bdcf2d1558ba5204e643c887b7b4060f89630969425651eb68e96427d97f800 - rules/rerender-split-combined-hooks.md: SHA-256 6f45d703343484ef9acef9388397f3642966ae6a5a258899a0cf1f9977cfbf6c - rules/rerender-transitions.md: SHA-256 60f4033909a62df5e5b8c601494f9e50a562e2f8c1c2d81eac24f38142265f1c - rules/rerender-use-deferred-value.md: SHA-256 8c3579576a61a949884167745dcfaf1d5426ba305cc61fd0a79602d70fda4909 - rules/rerender-use-ref-transient-values.md: SHA-256 f1a649af9d1d0b5c762f6c9c4c1c70c90d7df82aa10296ee87aadb78c1b76c54 - rules/server-after-nonblocking.md: SHA-256 d0b8d24a3db9f0f65f9e2bddbf230b0e03a5f60e1229d93a4a18f5e7a991c7c2 - rules/server-auth-actions.md: SHA-256 a2ca8aa102839251c7971ec784560fab943c20b36fe6f80365d4110c13260c23 - rules/server-cache-lru.md: SHA-256 1924b64561841923b88a657085097a0aeba3e0ba2d5470b9f5c15cc10d6ae70f - rules/server-cache-react.md: SHA-256 fddeea6c870bb3da4134b61d54b7d09b83d2603f929b7547cd3dc1dc269edd5c - rules/server-dedup-props.md: SHA-256 c2747424cdac46be62f835f245a0aa887b0090b416d28e2ac8676702645eeb37 - rules/server-hoist-static-io.md: SHA-256 5abea4dd882b13661bd5f7dfb93f9e547d5f08176c61c448ade91b210ed5d49f - rules/server-no-shared-module-state.md: SHA-256 4d869bf1cd2f1632e5ca4c0e64b1cf0e71c5f5a0f940bc8a22174d205e735ed7 - rules/server-parallel-fetching.md: SHA-256 569a2e9fc04f9606686cd75c5894ef8781b502786a7fffe241396846c7733472 - rules/server-parallel-nested-fetching.md: SHA-256 ad5d9656984d4a959997a2367bf59cc6632297b4634a1dd13a087939d83f30b3 - rules/server-serialization.md: SHA-256 f4c7d68b29c82381baad059c4a7f09e868e71ec9c3115a26ad3ae7d24c0dfe1f If a file does not match, it changed since the listing was prepared: do not install it yet, tell me what you found and let me decide. 2. Read SKILL.md in full, and tell me in plain words: what the skill does when used, what it connects to, whether it reads or sends any personal information or credentials, and anything that seems unusual. Stop on any red flag and tell me before going further. Confirm these points from the files: - The skill folder holds 76 files and no executable code: SKILL.md (frontmatter name vercel-react-best-practices), AGENTS.md (the compiled full guide), README.md, metadata.json, a sections overview and a rule template under rules/, and 70 rule files. There is no script to run, at install time or at use time. - Nothing is sent anywhere during installation itself; the only download at install time is the skill folder from GitHub at the pinned commit. - At use time the agent only reads these rule files while working on my own React or Next.js project, locally. No Vercel account or project is accessed, no metrics are collected, no service is contacted, and no personal information or credentials are read or sent — the one rule about authentication is guidance for securing my own server actions in my own code. - Do not apply any rule, do not refactor any component, and do not use the skill in any way during this install: using it is a separate step that only starts when I ask for React or Next.js work later. 3. When I say "yes, install", install it as a skill: copy the whole react-best-practices folder into the agent's skills directory, in a folder named exactly "react-best-practices", keeping its 76 files in their original relative layout (SKILL.md at its root). 4. Verify with no network calls: frontmatter valid (name: vercel-react-best-practices), the 76 files in place with matching fingerprints. Do not run anything from the folder and do not use the skill to verify. 5. Report what was installed, where, and what I still need to do myself (for example: that it is knowledge-only, covers React and Next.js only, and that using it is a separate step that only starts when I ask for React or Next.js work). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.
Saved to your recent installs. Find it anytime on /connect.
🔒 Security, provenance and what this touches
The install prompt below already includes the vetting steps: your agent follows the community checklist before installing anything with executable code. Want more?
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.