vercel-react-best-practices

Apply performance optimization guidelines to React and Next.js applications.

Updated Jul 28, 2026
One-click install
npx skills add https://github.com/tuliof/dindin --skill vercel-react-best-practices-tuliof
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/tuliof/dindin/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/tuliof/dindin --skill vercel-react-best-practices-tuliof

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses performance bottlenecks in React and Next.js applications by providing a structured set of rules to eliminate waterfalls, optimize bundle sizes, and improve rendering efficiency.

Core Features & Use Cases

  • Performance Optimization: Provides 70+ actionable rules across 8 categories, ranging from critical waterfall elimination to advanced JavaScript micro-optimizations.
  • Automated Refactoring Guidance: Offers clear "Incorrect" vs "Correct" code patterns that can be used by AI agents to refactor existing codebases for better performance.
  • Use Case: When building a new Next.js page, use this Skill to ensure data fetching is parallelized, heavy components are dynamically imported, and third-party libraries are deferred to improve initial load times.

Quick Start

Apply the vercel-react-best-practices skill to review the current component implementation and suggest performance improvements based on the provided guidelines.

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 code reviews?▼

To optimize React and Next.js performance, apply a structured set of rules that eliminate data fetching waterfalls, reduce bundle sizes, and improve component rendering efficiency. This provides actionable incorrect versus correct code patterns for AI-assisted refactoring.

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

The best way to eliminate Next.js data fetching waterfalls is to parallelize data requests using structured optimization guidelines. This ensures high-performance code patterns by guiding AI agents to refactor sequential data fetching into parallel operations.

How do I reduce bundle size when building a new Next.js page?▼

Reduce Next.js bundle size by dynamically importing heavy components and deferring third-party libraries. This optimization technique improves initial load times by applying over 70 actionable performance rules across 8 distinct categories.

Can I use these React optimization guidelines for new feature development?▼

Yes, you can use these React optimization guidelines for new feature development. They provide consistent, high-performance code patterns for data fetching, component rendering, and bundle management tailored for AI-assisted workflows.

Why does my React component rendering efficiency need optimization?▼

React component rendering needs optimization to eliminate performance bottlenecks and reduce unnecessary re-renders. Applying structured guidelines improves rendering efficiency by providing clear code patterns for both refactoring and new development.

Do I need specific dependencies to apply these web development best practices?▼

No specific dependencies are required to apply these web development best practices. The guidelines function as standalone references for performance optimization tasks, working directly within your existing React and Next.js codebase.