Skills pour agents · Programmation
Vercel React Best Practices : des règles de vitesse pour l’agent Un agent qui écrit du React enchaîne facilement les requêtes, alourdit le bundle et multiplie les re-rendus inutiles. Ce skill de l’équipe d’ingénierie de Vercel lui fournit 70 règles réparties en 8 catégories classées par impact, de la suppression des cascades à la taille du bundle et aux micro-optimisations JavaScript, appliquées à l’écriture comme à la revue.
32 930 étoiles sur GitHub · #32
Obtenir le skill Ouvrir sur GitHub
Auteur Vercel
Licence non précisée
Pack Un seul skill
Mis à jour 14 octobre 2026 Ce qu’il fait Supprime les cascades de requêtes : Promise.all() pour les opérations indépendantes, await placé dans la bonne branche, streaming avec Suspense Allège le bundle : imports directs au lieu des fichiers barrel, next/dynamic pour les composants lourds, analytics après l’hydratation Accélère le serveur avec React.cache() par requête, un cache LRU entre requêtes et after() pour les tâches non bloquantes Réduit les re-rendus en dérivant l’état pendant le rendu, avec setState fonctionnel et startTransition pour le non urgent Chaque règle a son fichier dans rules/ avec l’explication, un exemple de code incorrect et un exemple correct Quand s’en servir Vous écrivez de nouveaux composants React ou pages Next.js et voulez éviter d’emblée les pièges de performance Une page charge lentement et il faut repérer les requêtes exécutées l’une après l’autre au lieu d’en parallèle Avant une mise en production, vous voulez une revue axée sur la taille du bundle et le temps de chargement Demandez à l’agent Passe ce composant React en revue selon les règles de performance de Vercel Repère les cascades de requêtes dans app/dashboard/page.js et parallélise-les Pourquoi cette liste se re-rend à chaque frappe ? Corrige avec les règles rerender Avant d’installer Les règles visent React et Next.js, et lors d’un refactoring l’agent modifie votre code pour s’y conformer. Le README et SKILL.md annoncent la licence MIT, mais GitHub ne détecte aucun fichier de licence dans le dépôt.
Questions Comment installer React Best Practices de Vercel ? Lancez npx skills add vercel-labs/agent-skills@vercel-react-best-practices. Sans la partie après @, c’est toute la collection Vercel qui s’installe.
Combien de règles contient-il ? D’après SKILL.md, 70 règles en 8 catégories, de priorité critique à faible. Le README de la collection indique encore 40+.
Est-il réservé à Next.js ? Non. Certaines règles portent sur les composants serveur et next/dynamic, mais les sections re-rendus et JavaScript valent pour tout code React.
