skills.rest
BartekFo
BartekFoCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Review React and Next.js code for performance bottlenecks using best practices.

Updated Sep 7, 2025
Search Tags:#performance#react#optimization#bundle size#next.js#server-side rendering
One-click install
npx skills add https://github.com/BartekFo/my-dev-setup --skill vercel-react-best-practices-bartekfo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/BartekFo/my-dev-setup/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/BartekFo/my-dev-setup --skill vercel-react-best-practices-bartekfo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and scripts (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of rules and guidelines to optimize the performance of React and Next.js applications, addressing critical areas like bundle size, server-side rendering, and re-render efficiency.

Core Features & Use Cases

  • Performance Optimization: Apply best practices for eliminating waterfalls, reducing bundle size, and improving server-side and client-side rendering.
  • Code Refactoring: Use the detailed rules to refactor existing code for better performance.
  • Use Case: Ensure your Next.js e-commerce site loads quickly by applying rules to optimize image loading, reduce JavaScript bundle size, and parallelize data fetching on the server.

Quick Start

Apply the vercel-react-best-practices skill to review the provided React component code for performance bottlenecks.

Frequently Asked Questions about vercel-react-best-practices

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

FAQPage Schema
What's the best way to reduce JavaScript bundle size in a Next.js application?▼

Reducing JavaScript bundle size in Next.js involves applying targeted optimization rules to remove unused code and optimize imports. This process minimizes client-side payload, directly improving application loading times.

How do I fix React re-render efficiency issues and prevent unnecessary component updates?▼

Fixing React re-render efficiency requires reviewing component code against specific rules for preventing unnecessary updates. Refactoring components based on these guidelines minimizes redundant rendering cycles and improves client-side responsiveness.

Can I use this to refactor existing React components for better performance?▼

Yes, you can use the detailed optimization rules to refactor existing React components for better performance. The guide provides over 50 actionable rules to identify and resolve performance bottlenecks in current codebases.

Why does my Next.js e-commerce site have slow image loading and how can I speed it up?▼

Slow Next.js image loading is resolved by applying rules to optimize image loading and parallelize server-side data fetching. Implementing these practices ensures quick asset delivery and faster page rendering.

Related Skills

Explore More Software Engineering Skills→
loagmaloagma

vercel-react-best-practices

Apply rule-based React/Next.js performance patterns to codebases.

Community
Advanced
flexisuite-orgflexisuite-org

vercel-react-best-practices

Apply Vercel React and Next.js performance optimization guidelines to code.

Official
Intermediate
bacocobacoco
57

Architecture QA & Tech Stack Governance

Validate implementation plans against approved architecture and tech stack standards.

Community
Advanced
Colten-CovingtonColten-Covington

performance-profiling

Profiles React component rendering and bundle sizes to resolve web performance bottlenecks.

Community
Advanced