React Performance
React and Next.js performance patterns adapted from Vercel Engineering: 70+ prioritized rules on waterfalls, bundle size, server components, and re-renders.
- What
- React and Next.js performance patterns adapted from Vercel Engineering: 70+ prioritized rules on waterfalls, bundle size, server components, and re-renders.
- Cost
- Free
- Needs
- Use "React Performance" with your Muse.
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor: a performance skill that organizes 70+ React and Next.js optimization rules, adapted from Vercel Engineering's React Best Practices (MIT), into 8 priority categories: request waterfalls, bundle size, server-side rendering, client fetching, re-renders, rendering strategy, JS micro-perf, and advanced techniques. It includes decision-tree guidance for active code review and refactoring: diagnosing slow page loads, auditing bundle size and Lighthouse Core Web Vitals regressions, removing waterfalls in Server Components and API routes, reducing client-side re-renders, and optimizing long lists, animations, and hydration. Rules are ordered by impact so you fix the expensive problems first. By @affaan-m, listed here with credit to its creator (and to Vercel Labs for the original rules). From the affaan-m/ECC repository (MIT). Honest caveats: pure guidance, nothing to install; targets React 18/19 and Next.js, other frameworks need translation; some rules assume Vercel-style deployment conventions. Skill Harbor never reviews the code, review it yourself before use.
Version:
Install
Copy the install package below, then paste it into MuseThe install prompt below already includes the vetting steps: your agent follows the community checklist before installing anything with executable code. Want more?
Use "React Performance" with your Muse. Prerequisites: a React 18/19 or Next.js codebase to audit or refactor. Pure guidance skill, nothing to install. 1. Open the skill: https://github.com/affaan-m/ECC/blob/main/skills/react-performance/SKILL.md and copy the full SKILL.md text. 2. Paste it into a chat with Muse and add: "Audit this page/component against the priority index, highest impact first: waterfalls, bundle size, re-renders." 3. For a specific symptom, ask: "Diagnose this slow interaction using the decision tree: is it a waterfall, a re-render storm, or bundle weight?" Tip: include Lighthouse or bundle-analyzer output when you have it; the rules map directly onto those numbers. Safety: a skill is plain-text instructions; it runs nothing by itself. Measure before and after with real metrics, and review refactors before merging.
Saved to your recent installs. Find it anytime on /connect.
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.