domains / families / software-engineering / react-best-practices

react-best-practices

combined

**IMPORTANT**: Any change to React or Next.js code must read through this skill first. React and Next.js guidelines from Vercel Engineering covering visual instability, layout shifts, CLS, flickering, hydration issues, and font loading. Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Use when writing new React components or Next.js pages, implementing data fetching (client or server-side), or reviewing code for performance issues.

When to use

• Writing new React components or Next.js pages
• Implementing data fetching (client or server-side)
• Reviewing code for performance issues
• Refactoring existing React/Next.js code
• Optimizing bundle size or load times

When not to use

• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

Skill page

Conflict

The three copies are the same Vercel React/Next.js performance guide, but they disagree on scope and rule count. The vercel-labs copy is the most complete (70 rules, including async-cheap-condition-before-await, bundle-analyzable-paths, server-auth-actions, server-dedup-props, server-hoist-static-io, server-no-shared-module-state, server-parallel-nested-fetching, client-passive-event-listeners, client-localstorage-schema, and many rerender/rendering rules). The benchflow-ai copy is a narrower variant focused on visual stability, CLS, flickering, hydration, and font loading, and it omits several rules present in the other two. The sickn33 copy matches the 45-rule set of the benchflow copy and adds a pointer to a compiled AGENTS.md plus generic limitations. Because each copy has material steps or constraints the others lack, and they disagree on the rule inventory, crowning one would hide a real alternative.