skills.rest
Arize-ai
Arize-aiOFFICIAL
Explore all skills by this author →
Website𝕏@arizeaiGitHub

vercel-react-best-practices

Generate optimization plans for React and Next.js performance issues across eight categories.

11.0k|1.0k|Updated Nov 9, 2022
Search Tags:#performance#react#optimization#next.js#bundle#server-rendering
One-click install
npx skills add https://github.com/Arize-ai/phoenix --skill vercel-react-best-practices-arize-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/Arize-ai/phoenix/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/Arize-ai/phoenix --skill vercel-react-best-practices-arize-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects often suffer from performance regressions due to suboptimal patterns, bloated bundles, and inefficient data-fetching. This Skill consolidates proven best practices into actionable guidelines to prevent waterfalls, reduce bundle size, and improve rendering speed.

Core Features & Use Cases

  • Comprehensive, category-structured performance rules for React and Next.js applications.
  • Guidance for both code authors and automation to generate or refactor performant code.
  • Use cases include optimizing data fetching, bundling strategies, and server-component workflows in Next.js.

Quick Start

  • Provide a prioritized optimization plan for a Next.js project focusing on waterfalls, bundle size, and SSR data fetching.

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 fix React and Next.js performance issues like data fetching waterfalls?▼

Fix React and Next.js performance issues by applying structured optimization guidelines that prevent waterfalls, reduce bundle size, and improve server-side rendering speed across eight categories.

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

Optimize bundle size in a Next.js application by following consolidated best practices for bundling strategies and server-component workflows to reduce bloat and prevent performance regressions.

How do I improve server-side rendering speed for React components?▼

Improve server-side rendering speed by applying actionable guidelines for SSR data fetching and rendering strategies that prevent suboptimal patterns and inefficient data fetching.

Can I automate code refactoring to follow React performance best practices?▼

Automate code refactoring for React performance best practices by using these structured rules to generate, review, or refactor code with reproducible results across data fetching and rendering workflows.

Does this Skill provide guidance for both client data fetching and server-component workflows in Next.js?▼

This Skill provides guidance for both client data fetching and server-component workflows in Next.js, covering rendering strategies and optimization rules across eight comprehensive categories.

Related Skills

Explore More Software Engineering Skills→
Omar-ObandoOmar-Obando
44

performance

Profile application layers and validate optimizations with before/after benchmarks.

Community
Intermediate
Typeless-GitTypeless-Git
1

vercel-react-best-practices

Provide performance optimization guidelines for React and Next.js applications.

Official
Advanced
DIO0550DIO0550

typescript-performance-review-skill

Review TypeScript and React code for performance bottlenecks using measurement-first optimization.

Community
Intermediate
yeshan333yeshan333
94

optimize

Analyze Core Web Vitals and optimize loading, rendering, animations, and bundle size.

Community
Advanced