React Performance
Patterns de performance React et Next.js adaptés de Vercel Engineering : 70+ règles priorisées sur waterfalls, bundle, server components et re-renders.
- Quoi
- Patterns de performance React et Next.js adaptés de Vercel Engineering : 70+ règles priorisées sur waterfalls, bundle, server components et re-renders.
- Coût
- Gratuit
- Prérequis
- Utilisez « Performance React » avec votre Muse.
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor : un skill de performance qui organise 70+ règles d'optimisation React et Next.js, adaptées des React Best Practices de Vercel Engineering (MIT), en 8 catégories prioritaires : waterfalls de requêtes, taille du bundle, rendu côté serveur, fetching client, re-renders, stratégie de rendu, micro-perf JS et techniques avancées. Il inclut un guide d'arbre de décision pour la revue de code et le refactoring : diagnostiquer les chargements lents, auditer le bundle et les régressions Lighthouse Core Web Vitals, supprimer les waterfalls dans les Server Components et les routes API, réduire les re-renders côté client, optimiser les longues listes, animations et hydratation. Les règles sont ordonnées par impact pour corriger d'abord les problèmes coûteux. Par @affaan-m, listé ici avec crédit à son créateur (et à Vercel Labs pour les règles d'origine). Tiré du dépôt affaan-m/ECC (MIT). Bémols honnêtes : pur guide, rien à installer ; cible React 18/19 et Next.js, les autres frameworks devront être traduits ; certaines règles supposent des conventions de déploiement façon Vercel. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage.
Version :
Installation
Copiez le dossier d’installation ci-dessous, puis collez-le dans MuseLe prompt d'installation ci-dessous inclut déjà les étapes de vérification : votre agent suit la checklist communautaire avant d'installer tout ce qui contient du code exécutable. Vous en voulez plus ?
Utilisez « Performance React » avec votre Muse. Prérequis : une base de code React 18/19 ou Next.js à auditer ou refactorer. Skill de pur guide, rien à installer. 1. Ouvrez le skill : https://github.com/affaan-m/ECC/blob/main/skills/react-performance/SKILL.md et copiez le texte complet du SKILL.md. 2. Collez-le dans un chat avec Muse et ajoutez : « Audite cette page/ce composant selon l'index de priorité, impact décroissant : waterfalls, taille du bundle, re-renders. » 3. Pour un symptôme précis, demandez : « Diagnostique cette interaction lente avec l'arbre de décision : waterfall, tempête de re-renders, ou poids du bundle ? » Astuce : incluez les sorties Lighthouse ou bundle-analyzer quand vous les avez ; les règles correspondent directement à ces chiffres. Sécurité : un skill est du texte d'instructions ; il n'exécute rien tout seul. Mesurez avant et après avec de vraies métriques, et relisez les refactors avant de merger.
Enregistré dans vos installs récentes. Retrouvez-le à tout moment sur /connect.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.