skills.rest
connorfurby
connorfurbyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Apply React and Next.js performance optimization patterns across components, pages, and APIs.

Updated Oct 8, 2024
Search Tags:#performance#refactoring#react#next.js#server-components#bundle-size
One-click install
npx skills add https://github.com/connorfurby/my-portfolio --skill vercel-react-best-practices-connorfurby
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/connorfurby/my-portfolio/tree/main/my-app/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/connorfurby/my-portfolio --skill vercel-react-best-practices-connorfurby

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects frequently suffer from performance regressions due to anti-patterns, bloated bundles, and server/waterfall bottlenecks. This skill consolidates official best practices and actionable guidance to help engineers write, review, and refactor code for faster, more reliable apps.

Core Features & Use Cases

  • Comprehensive rules across 8 categories (Eliminating Waterfalls, Bundle Size, Server-Side, Client-Side Fetching, Re-render, Rendering, JavaScript, Advanced Patterns) to guide automated improvements.
  • Scenario-based guidance for components, pages, API routes, and server actions to reduce waterfalls, optimize bundles, and accelerate first paint.
  • Step-by-step refactoring templates and examples to consistently apply performance patterns in real projects.

Quick Start

Run a targeted performance audit on a React/Next.js codebase to produce a prioritized refactor plan and implement the most impactful 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 optimize React and Next.js performance during a codebase refactor?▼

To optimize React and Next.js performance during a refactor, apply curated rules across 8 categories targeting rendering, data fetching, and bundle size to guide automated improvements while enforcing safe patterns and error handling.

What is the best way to eliminate waterfalls and reduce bundle size in Next.js server components?▼

Eliminating waterfalls and reducing bundle size in Next.js server components involves applying scenario-based guidance for pages and API routes to optimize server-side fetching and accelerate first paint.

Does this approach provide specific refactoring templates for client-side fetching bottlenecks?▼

Yes, this approach provides step-by-step refactoring templates and examples for client-side fetching bottlenecks to consistently apply performance patterns and safely restructure data retrieval logic in real projects.

Can I audit my existing React codebase to generate a prioritized performance improvement plan?▼

Yes, you can run a targeted performance audit on your React codebase to produce a prioritized refactor plan and implement the most impactful optimizations for rendering and bundle size.

Why does my React app suffer from bloated bundles and re-render bottlenecks?▼

React apps suffer from bloated bundles and re-render bottlenecks due to anti-patterns and server waterfall issues, which require applying advanced pattern rules to optimize rendering and data fetching safely.

Related Skills

Explore More Software Engineering Skills→
aayushsharma141aayushsharma141

vercel-react-best-practices

Enforce 57 React and Next.js performance rules across 8 categories.

Community
Advanced
yuhle-qugyuhle-qug

webpack-expert

Analyze and optimize Webpack configurations for faster, smaller bundles.

Community
Advanced
VollliebVolllieb

next-best-practices

Guide Next.js development with file structure, data handling, and deployment strategies.

Community
Advanced
VoTruongDanhVoTruongDanh

react-performance

Profile React apps with React DevTools and optimize re-renders and bundle size.

Community
Intermediate