skills.rest
naps62
naps62COMMUNITY
Explore all skills by this author →
Website𝕏@naps62GitHub

vercel-react-best-practices

Apply Vercel engineering guidelines to improve React and Next.js performance.

1|Updated Oct 5, 2024
Search Tags:#performance#react#optimization#next.js#vercel#best-practices
One-click install
npx skills add https://github.com/naps62/nixos-config --skill vercel-react-best-practices-naps62
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/naps62/nixos-config/tree/main/home/common/programs/opencode/skills/vercel-react-best-practices
Command: npx skills add https://github.com/naps62/nixos-config --skill vercel-react-best-practices-naps62

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a structured set of React/Next.js performance guidelines from Vercel Engineering to help teams write, review, or refactor code for optimal performance.

Core Features & Use Cases

  • Comprehensive guidelines covering 45 rules across 8 categories to guide automated refactoring and code generation.
  • Prioritized patterns for eliminating perf bottlenecks in data fetching, bundles, server/client rendering, and re-renders.
  • Use Case: When starting a React/Next.js project or performing code reviews, apply these rules to achieve efficient, scalable performance.

Quick Start

Start applying the guidelines during component creation, code reviews, or refactoring to ensure optimal performance.

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 component creation?▼

Optimize React and Next.js performance during component creation by applying structured Vercel engineering guidelines that target data fetching, bundle size, and rendering efficiency. The rule set uses category-based priorities and naming prefixes to guide actionable refactoring patterns.

What are the best practices for reviewing React code to reduce bundle size and re-renders?▼

Best practices for reviewing React code involve applying 45 Vercel performance rules across 8 categories to identify and eliminate bottlenecks. This structured approach targets bundle size reduction, server and client rendering optimization, and unnecessary re-renders.

Can I use these Vercel React guidelines for refactoring an existing Next.js project?▼

You can use these Vercel React guidelines to refactor existing Next.js projects by applying a prioritized rule set during code reviews. The guidelines help resolve performance bottlenecks in data fetching, bundles, and rendering to achieve scalable efficiency.

Why does my Next.js application have rendering performance bottlenecks and how are they categorized?▼

Rendering performance bottlenecks in Next.js are addressed by a structured rule set covering 8 categories with naming prefixes for actionable patterns. Applying these Vercel guidelines during development or refactoring helps systematically eliminate data fetching and rendering inefficiencies.

Related Skills

Explore More Software Engineering Skills→
dmmulroydmmulroy
232

vercel-react-best-practices

Apply React and Next.js performance guidelines to optimize components and data fetching.

Community
Advanced
wredziowredzio

vercel-react-best-practices

Enforce React and Next.js performance rules for code reviews and refactoring.

Community
Advanced
ZawHlaingPhyoTsukiZawHlaingPhyoTsuki

vercel-react-best-practices

Enforce React/Next.js performance guidelines for writing, reviewing, and refactoring code.

Community
Advanced
georgekhananaevgeorgekhananaev
27

react-best-practices

Identify React/Next.js performance bottlenecks and generate targeted optimizations.

Community
Advanced