vercel-react-best-practices

Coming up with Trending and Relevant Blog Topics for Your Business: 100+ Ideas to Inspire You (2025 edition preview)

18|8|Updated May 31, 2023

Search Tags:#performance #react #optimization #bundle size #rendering #next.js

Ready to run

npx skills add https://github.com/jpmorgan-payments/embedded-finance --skill vercel-react-best-practices-jpmorgan-payments

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/jpmorgan-payments/embedded-finance/tree/main/.github/skills/vercel-react-best-practices
Command: npx skills add https://github.com/jpmorgan-payments/embedded-finance --skill vercel-react-best-practices-jpmorgan-payments

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides comprehensive guidelines to optimize the performance of React and Next.js applications, ensuring faster load times, smoother user experiences, and more efficient development.

Core Features & Use Cases

Performance Optimization: Offers 40+ rules across 8 categories, from critical bundle size reduction to advanced rendering patterns.
Automated Refactoring Guidance: Designed for AI agents to consistently apply best practices in code generation and refactoring.
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 for maximum efficiency.

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 application performance?▼

To optimize React and Next.js performance, you can apply over 57 prioritized rules covering bundle size reduction, parallel data fetching, server-side efficiency, and re-render optimization. These guidelines provide specific code examples for automated refactoring.

What is the best way to reduce bundle size in a Next.js application?▼

Reducing bundle size in Next.js involves applying specific optimization rules from this Skill, which guide AI agents to refactor imports and split code efficiently. This ensures minimized bundle sizes and faster load times for your application.

How do I eliminate data fetching waterfalls in React?▼

Eliminating data fetching waterfalls in React requires parallelizing data requests. This Skill provides detailed rules and code examples to help AI agents automatically refactor sequential fetches into parallel operations for better performance.

Why does my React component re-render inefficiently and how can I fix it?▼

Inefficient React re-renders often stem from improper state management or prop changes. This Skill offers targeted rules to optimize rendering patterns, guiding AI agents to refactor components and maximize re-render efficiency.

Can I use these React optimization rules for automated code generation?▼

Yes, these React optimization rules are designed for AI agents to consistently apply best practices during automated code generation and refactoring. This ensures new features are built with parallelized data fetching and optimized rendering.

Does this Skill provide server-side performance optimization for Next.js?▼

Yes, this Skill provides server-side performance optimization for Next.js by offering specific rules for server-side efficiency. It guides AI agents to refactor server logic and improve overall application responsiveness.