Vercel React Best Practices

Avant de commencer : lis ce prompt d'installation au complet, dis-moi en quelques lignes ce que ce skill fait et ce que son installation implique, et attends mon feu vert avant de faire quoi que ce soit d'autre. Prérequis — Aucun — aucun compte, aucune clé, aucun paiement, et aucun script dans son dossier. C'est un skill de connaissance seulement : à l'usage, l'agent lit ses fichiers de règles en travaillant sur mon propre code React ou Next.js, rien n'est installé dans mon projet, aucune métrique de projet n'est collectée et rien n'est contacté. Installe-moi « Vercel React Best Practices ». Il donne à l'agent les consignes de performance de Vercel Engineering pour React et Next.js : 70 règles en 8 catégories ordonnées par impact — éliminer les waterfalls (awaits parallèles et différés, frontières Suspense), la taille du bundle (imports directs, imports dynamiques, report du code tiers), la performance serveur (authentifier les actions serveur, React.cache, minimiser la sérialisation), la récupération de données côté client (déduplication SWR, écouteurs passifs, discipline localStorage), l'optimisation des re-rendus, la performance de rendu, la performance JavaScript, et les patterns avancés. Son dossier contient le SKILL.md de synthèse (nom frontmatter vercel-react-best-practices), 70 fichiers de règles détaillées, un AGENTS.md compilé avec toutes les règles développées, un README et un fichier de métadonnées. Dépôt : https://github.com/vercel-labs/agent-skills (le skill est tout le dossier skills/react-best-practices/ au commit épinglé : SKILL.md plus 75 fichiers compagnons, 76 fichiers en tout) Version épinglée : installe le code au commit 063bee94c3f4df8453406c830b0a7df0f2860278 exactement. Ne substitue pas une version plus récente. Si ce commit est inaccessible, arrête-toi et dis-le-moi. 1. Clone https://github.com/vercel-labs/agent-skills dans un dossier temporaire, place-toi au commit 063bee94c3f4df8453406c830b0a7df0f2860278, et copie le dossier skills/react-best-practices/ de ce checkout. Compare ensuite chaque fichier du dossier aux empreintes enregistrées pour cette fiche le 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 Si un fichier ne correspond pas, il a changé depuis la préparation de la fiche : ne l'installe pas encore, dis-moi ce que tu as trouvé et laisse-moi décider. 2. Lis SKILL.md au complet, et dis-moi en mots simples : ce que le skill fait quand on l'utilise, à quoi il se connecte, s'il lit ou envoie des informations personnelles ou des identifiants, et tout ce qui semble inhabituel. Arrête-toi sur tout signal d'alerte et dis-le-moi avant d'aller plus loin. Confirme ces points à partir des fichiers : - Le dossier du skill contient 76 fichiers et aucun code exécutable : SKILL.md (nom frontmatter vercel-react-best-practices), AGENTS.md (le guide complet compilé), README.md, metadata.json, un aperçu des sections et un modèle de règle sous rules/, et 70 fichiers de règles. Il n'y a aucun script à exécuter, ni à l'installation ni à l'usage. - Rien n'est envoyé nulle part pendant l'installation elle-même ; le seul téléchargement à l'installation est le dossier du skill depuis GitHub au commit épinglé. - À l'usage, l'agent lit seulement ces fichiers de règles en travaillant sur mon propre projet React ou Next.js, en local. Aucun compte ni projet Vercel n'est accédé, aucune métrique n'est collectée, aucun service n'est contacté, et aucune information personnelle ni aucun identifiant n'est lu ou envoyé — la seule règle sur l'authentification est un conseil pour sécuriser mes propres actions serveur dans mon propre code. - N'applique aucune règle, ne refactore aucun composant, et n'utilise le skill d'aucune façon pendant cette installation : l'utiliser est une étape séparée qui ne commence que quand je demande un travail React ou Next.js plus tard. 3. Quand je dis « yes, install », installe-le comme skill : copie tout le dossier react-best-practices dans le répertoire des skills de l'agent, dans un dossier nommé exactement « react-best-practices », en gardant ses 76 fichiers dans leur arborescence relative d'origine (SKILL.md à sa racine). 4. Vérifie sans appels réseau : frontmatter valide (name: vercel-react-best-practices), les 76 fichiers en place avec des empreintes concordantes. N'exécute rien du dossier et n'utilise pas le skill pour vérifier. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (par exemple : que c'est de la connaissance seulement, qu'il ne couvre que React et Next.js, et que l'utiliser est une étape séparée qui ne commence que quand je demande un travail React ou Next.js). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.