skills.rest
salesadriano
salesadrianoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Identify React and Next.js performance optimization opportunities in codebases using 57 rules across 8 priority categories.

Updated Aug 27, 2026
Search Tags:#performance#react#nextjs#best-practices#code-review#frontend-optimization
One-click install
npx skills add https://github.com/salesadriano/eventos --skill vercel-react-best-practices-salesadriano
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/salesadriano/eventos/tree/main/.github/agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/salesadriano/eventos --skill vercel-react-best-practices-salesadriano

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a structured set of performance optimization guidelines for React and Next.js, helping teams reduce rendering bottlenecks, improve load times, and write maintainable code.

Core Features & Use Cases

  • A catalog of rules across 8 priority categories (CRITICAL to LOW) to guide development, reviews, and refactoring.
  • Actionable guidance for component design, data fetching, server/client rendering, and bundle optimization to improve user experience.
  • Practical examples and guardrails enabling teams to audit and implement performance improvements in real projects.

Quick Start

Review a React/Next.js project and apply the 8-category performance rules to identify bottlenecks and implement recommended optimizations.

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 identify React and Next.js performance bottlenecks in my codebase?▼

You can identify React and Next.js performance bottlenecks by auditing your codebase against a structured catalog of 57 rules across 8 priority categories, covering components, data fetching, server rendering, and bundle strategies.

What are the best practices for optimizing React component rendering and data fetching?▼

Best practices for optimizing React component rendering involve applying actionable guidelines for component design, data fetching, and server/client rendering to reduce rendering bottlenecks and improve load times.

Can I use these performance optimization rules for automated code refactoring?▼

Yes, you can use these performance optimization rules for automated code refactoring because the system includes safety nets and validation to ensure automated changes remain correct across development workflows.

How do I audit a Next.js project for bundle size and frontend optimization issues?▼

To audit a Next.js project for bundle size and frontend optimization issues, review your project using the 8-category performance rules to pinpoint areas for bundle optimization and implement recommended improvements.

Does this React performance review approach work for both server and client rendering?▼

Yes, this React performance review approach works for both server and client rendering by providing specific actionable guidance for server/client rendering strategies alongside component design and data fetching rules.

Related Skills

Explore More Software Engineering Skills→
Aniket-a14Aniket-a14
1

vercel-react-best-practices

Codify React and Next.js performance optimization rules for code review and generation.

Community
Intermediate
cephalizationcephalization
1

vercel-react-best-practices

Apply 57 React/Next.js performance rules across 8 categories.

Community
Advanced
NivlNivl
1

vercel-react-best-practices

Analyze React/Next.js projects against 57 performance rules across 8 categories.

Community
Advanced
aberrantCodeaberrantCode
1

vercel-react-best-practices

Identify and eliminate performance bottlenecks in React and Next.js applications.

Community
Intermediate