vercel-react-best-practices

Review React and Next.js code for performance and scalability.

105|12|Updated Feb 7, 2026
One-click install
npx skills add https://github.com/tmcfarlane/oh-my-cursor --skill vercel-react-best-practices-tmcfarlane
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/tmcfarlane/oh-my-cursor/tree/main/skills/vercel-react-best-practices
Command: npx skills add https://github.com/tmcfarlane/oh-my-cursor --skill vercel-react-best-practices-tmcfarlane

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Improve the performance and maintainability of React and Next.js projects by providing a structured set of engineering guidelines that cover component design, data fetching, bundling, and runtime efficiency.

Core Features & Use Cases

  • Guidelines for writing, reviewing, and refactoring React components and Next.js pages to maximize performance.
  • Clear rules for data fetching strategies, bundle optimization, and rendering efficiency across teams.
  • Use Case: When starting a new Next.js project or auditing an existing codebase, apply these best practices to achieve faster load times and better UX.

Quick Start

Audit a React component and apply the basic performance checks described in the guide to see immediate improvements.

Frequently Asked Questions about vercel-react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize React and Next.js performance during a code review?

Optimize React components and Next.js pages by applying engineering guidelines for bundling, data fetching, and rendering patterns during code reviews. This ensures fast load times and scalable frontends.

What are the best practices for data fetching and rendering in Next.js?

Best practices for data fetching involve using clear rules for SSR and CSR patterns to maximize rendering efficiency. This ensures scalable frontends by structuring data retrieval logic for fast load times.

How do I audit an existing React codebase for frontend performance issues?

Audit an existing React codebase by running basic performance checks on components and data-fetching logic to identify bottlenecks. This process applies structured guidelines to achieve better UX and faster load times.

Does this React performance guide work with Next.js SSR and CSR patterns?

Yes, this guide works with Next.js SSR and CSR patterns by enforcing performance guidelines across rendering optimizations. It provides clear rules for data fetching strategies and bundle optimization to ensure runtime efficiency.

How do I improve bundle optimization and runtime efficiency in React projects?

Improve bundle optimization and runtime efficiency in React projects by enforcing structured performance guidelines across component design and data fetching. This approach maximizes rendering efficiency and reduces load times.