skills.rest
oren-argu
oren-arguCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Audits React/Next.js components and pages for prioritized performance improvements.

Updated Apr 5, 2026
Search Tags:#performance#refactoring#react#next.js#best-practices#code-generation#web-performance
One-click install
npx skills add https://github.com/oren-argu/papermark --skill vercel-react-best-practices-oren-argu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/oren-argu/papermark/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/oren-argu/papermark --skill vercel-react-best-practices-oren-argu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Vercel React Best Practices Skill consolidates performance guidelines to help engineers build fast React/Next.js apps by providing prioritized rules, examples, and patterns.

Core Features & Use Cases

  • Comprehensive, 57 rules across 8 categories covering server, client, rendering, and JavaScript performance
  • Actionable guidance with before/after code snippets and real-world scenarios
  • Facilitates automated refactoring and code generation with guardrails and validations

Quick Start

Audit a React/Next.js component or page and apply the top-priority waterfall-elimination pattern.

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 performance bottlenecks in React and Next.js applications?▼

To fix performance bottlenecks in React and Next.js applications, apply a structured rule set of 57 prioritized guidelines across eight categories, providing actionable before/after code snippets for refactoring.

What are the best practices for React and Next.js bundle optimization?▼

React and Next.js bundle optimization best practices involve applying a structured rule set with clear guardrails and validations across eight categories to guide automated refactoring and reduce load times.

How do I audit a React component for web performance improvements?▼

To audit a React component for web performance improvements, review it against 57 prioritized rules covering server, client, rendering, and JavaScript performance to identify waterfall-elimination patterns.

Can I use these guidelines to automate React code refactoring?▼

Yes, you can use these guidelines to automate React code refactoring because the rules include clear guardrails, examples, and validations specifically designed to guide automated code generation and refactoring tasks.

Does this approach work for both client-side rendering and server-side Next.js pages?▼

Yes, this approach works for both client-side rendering and server-side Next.js pages, as the 57 comprehensive rules cover tasks involving writing, reviewing, and refactoring components, pages, and data fetching.

Related Skills

Explore More Software Engineering Skills→
FEMADOXFEMADOX
4

vercel-react-best-practices

Enforce 69 React/Next.js performance rules across 8 categories.

Community
Advanced
Bonny94ITABonny94ITA

performance

Audit website performance with Lighthouse and suggest code-level optimizations.

Community
Advanced
aayushsharma141aayushsharma141

vercel-react-best-practices

Enforce 57 React and Next.js performance rules across 8 categories.

Community
Advanced
ricardorochericardoroche
2

performance-profiling

Profile Python CPU, memory, and async performance with cProfile and memory_profiler.

Community
Intermediate