vercel-react-best-practices

Review React and Next.js projects for performance anti-patterns and refactor suggestions.

1|1|Updated Dec 15, 2024
One-click install
npx skills add https://github.com/Alejocabeza/dotfiles --skill vercel-react-best-practices-alejocabeza
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/Alejocabeza/dotfiles/tree/main/opencode/skills/vercel-react-best-practices
Command: npx skills add https://github.com/Alejocabeza/dotfiles --skill vercel-react-best-practices-alejocabeza

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Performance bottlenecks in React and Next.js projects slow down user experiences; this skill provides a structured, scalable set of guidelines to optimize rendering, data fetching, and bundle size.

Core Features & Use Cases

  • 57 rules across 8 categories covering client-side rendering, server-side strategies, and bundle optimizations.
  • Use cases include writing, reviewing, or refactoring React/Next.js code to achieve faster load times and more reliable performance.
  • Helps automate refactor suggestions and enforce naming prefixes for quick discovery.

Quick Start

Review a React/Next.js project to identify performance anti-patterns and generate actionable refactor suggestions.

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 project?

To identify React and Next.js performance bottlenecks, review your project against structured rules covering client-side rendering, server-side strategies, and bundle optimizations to generate actionable refactor suggestions.

What is the best way to optimize React rendering and reduce bundle size?

The best way to optimize React rendering and bundle size is applying a scalable set of 57 rules across 8 categories, targeting anti-patterns in data fetching, server-client strategies, and bundling for faster load times.

How do I refactor Next.js code to improve server-side rendering performance?

Refactor Next.js code for server-side rendering performance by evaluating server-client strategies against specific guidelines, automating refactor suggestions to resolve data fetching and rendering inefficiencies.

Can I use these React optimization patterns for code review?

Yes, you can use these React optimization patterns for code review by checking code against 57 rules across 8 categories to enforce naming prefixes, identify anti-patterns, and ensure reliable performance.

Does this approach work for both client-side and server-side Next.js optimizations?

Yes, this approach works for both client-side and server-side Next.js optimizations, providing structured guidelines across 8 categories that comprehensively cover rendering strategies, data fetching, and bundle size reduction.