skills.rest
Derlys
DerlysCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Optimize React and Next.js applications with performance best practices.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (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 code.

Core Features & Use Cases

  • Performance Optimization: Provides 57 rules across 8 categories (waterfalls, bundle size, server-side, etc.) to improve application speed.
  • Code Refactoring Guidance: Offers concrete examples of incorrect vs. correct implementations for AI agents and developers.
  • Use Case: When building a new Next.js page, apply these best practices to avoid critical waterfalls, minimize bundle size, and ensure optimal server-side rendering.

Quick Start

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

You can refactor React components for improved performance by applying concrete examples of incorrect versus correct implementations, targeting critical areas like waterfalls, bundle size, and rendering efficiency.

What causes performance bottlenecks in Next.js server-side rendering?▼

This Skill addresses common performance bottlenecks in Next.js by providing rules to eliminate critical waterfalls, minimize bundle size, and ensure optimal server-side rendering for faster load times.

Can I use these React best practices for an existing Next.js page?▼

When building a new Next.js page, applying these best practices helps avoid critical waterfalls, minimize bundle size, and ensure optimal server-side rendering from the start.

What is the best way to reduce bundle size in a React application?▼

Bundle size reduction is achieved through specific optimization rules that offer concrete examples of incorrect versus correct implementations, ensuring more efficient code and faster load times.

How do I eliminate data fetching waterfalls in React?▼

This Skill provides 57 rules across 8 categories, including eliminating waterfalls, to help developers and AI agents improve application speed and user experience through best practices.

Related Skills

Explore More Software Engineering Skills→
MGriotMGriot

vercel-react-best-practices

Identify and apply React/Next.js performance optimizations to components, pages and data flows.

Community
Advanced
amo-tech-aiamo-tech-ai

performance-optimization

Optimize React SPAs, Supabase queries, and edge functions for performance.

Community
Advanced
viktorbezdekviktorbezdek
10

moai-workflow-testing

Automate end-to-end development workflows integrating testing, debugging, profiling, and code review.

Community
Advanced
terrylicaterrylica
62

multi-agent-performance-profiling

Profile data pipeline stages to identify performance bottlenecks and prioritize optimizations.

Community
Advanced