skills.rest
mjbalcueva
mjbalcuevaCOMMUNITY
Explore all skills by this author →
𝕏@mj_balcuevaGitHub

vercel-react-best-practices

Optimize React and Next.js applications with Vercel performance guidelines.

Updated Oct 19, 2025
Search Tags:#code quality#performance#web development#react#optimization#next.js
One-click install
npx skills add https://github.com/mjbalcueva/turbo-template --skill vercel-react-best-practices-mjbalcueva
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/mjbalcueva/turbo-template/tree/main/.ruler/skills/vercel-react-best-practices
Command: npx skills add https://github.com/mjbalcueva/turbo-template --skill vercel-react-best-practices-mjbalcueva

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses common performance bottlenecks in React and Next.js applications, ensuring faster load times, smoother user experiences, and more efficient development.

Core Features & Use Cases

  • Performance Optimization: Provides over 40 rules across 8 categories to improve application speed.
  • Code Refactoring Guidance: Offers specific examples of incorrect vs. correct implementations for various performance patterns.
  • Use Case: When developing a new Next.js feature, consult this Skill to ensure data fetching is parallelized, bundle sizes are minimized, and re-renders are optimized, leading to a significantly faster user-facing application.

Quick Start

Apply the vercel-react-best-practices skill to refactor the provided React component for 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 for faster load times?▼

React and Next.js performance optimization requires addressing bottlenecks like data fetching waterfalls, bundle size, and re-render efficiency. This skill provides over 40 rules across 8 categories to refactor codebases for peak speed.

What is the best way to eliminate data fetching waterfalls in Next.js?▼

Eliminating data fetching waterfalls involves parallelizing server-side and client-side requests. This skill offers specific incorrect versus correct implementation examples to help refactor data fetching patterns for optimal speed.

How do I reduce bundle size and JavaScript execution overhead in React applications?▼

Reducing bundle size and JavaScript execution overhead involves applying advanced rendering patterns and strict optimization rules. This skill guides AI agents to generate and refactor code that minimizes unnecessary client-side JavaScript.

Can I use these Vercel engineering guidelines to refactor existing React components?▼

Yes, you can use these Vercel engineering guidelines to refactor existing React components. The skill is designed to help agents maintain and refactor codebases by providing correct patterns for re-render efficiency and rendering performance.

Does this skill cover both server-side and client-side data fetching optimization?▼

Yes, this skill covers both server-side and client-side data fetching optimization. It provides comprehensive guidelines to ensure parallelized requests and efficient data loading across your Next.js application architecture.

Related Skills

Explore More Software Engineering Skills→
cyanluna-gitcyanluna-git

vercel-best-practice

Apply Vercel React/Next.js performance guidelines to optimize rendering, bundles, and API calls.

Community
Advanced
hybrid-npmhybrid-npm
17

vercel-react-best-practices

Apply React and Next.js performance best practices to optimize rendering and data fetching.

Official
Advanced
AIBiz-AutomatyzacjeAIBiz-Automatyzacje
70

code-review

Automate React code review with static analysis and pattern detection.

Community
Advanced
heimanbaheimanba
2

performance-optimization

Identify and optimize performance bottlenecks in web and backend applications.

Community
Advanced