React Best Practices

A 40+ rule performance guide (from Vercel Engineering) for React and Next.js apps — how to keep a web app fast by avoiding slow data-loading patterns and bloated downloads. Advisory reference for any React-based MM web work.

Cowork & Chat

How to use it

Ask Claude to write, review, or refactor React/Next code and it applies the prioritized rules (eliminate “waterfalls,” shrink bundles, smarter rendering). Works in Cowork/Chat — it reviews and rewrites the code you share; it doesn’t have to run the app.

How to invoke / keep it on

Mention React/Next performance and Claude loads it; or name it explicitly. Add it to a Project’s instructions for an ongoing front-end build.

20 powerful examples for Melinda Maria

Copy, tweak, make them yours. Just describe the task — Claude loads the skill automatically.

01"Review this React component for an MM web page and fix any request waterfalls so it loads faster."

02"Explain “barrel imports” in plain English and show me where they’re bloating this Next.js page’s download size."

03"Refactor this data-fetching code to load things in parallel and stream with Suspense, and tell me the expected speed win."

04"Do a performance-focused review of a React page and give me the top three highest-impact changes first."

05"Look at this product-grid component and tell me why it re-renders too often, with the fix."

06"Review how this page loads product data and remove any sequential fetches that should be parallel."

07"Tell me which parts of this component should be a server component versus a client component, and why."

08"Find the heaviest imports in this React file and suggest lighter alternatives or lazy loading."

09"Refactor a list of jewelry products to render efficiently without janky scrolling."

10"Explain memoization in plain English and show me where it would actually help this component (and where it wouldn’t)."

11"Review this image-heavy collection page’s React code for lazy-loading and sizing best practices."

12"Show me how to code-split this Next.js page so the initial download is smaller."

13"Fix a component that fetches on every keystroke so it debounces or batches instead."

14"Review the data flow and tell me where prop-drilling is hurting maintainability and performance."

15"Refactor this to fetch on the server so the client gets HTML faster, and explain the tradeoff."

16"Identify unnecessary client-side state in this component that could live on the server."

17"Tell me which of these 40 rules this codebase is violating most and fix the top offenders."

18"Review a search box component for performance and accessibility together."

19"Show me how to prefetch the next collection page so navigation feels instant."

20"Give me a prioritized React performance punch list for this page, critical first."

← Back to Engineering & Prompt-craft