skills.rest
LuisUrrutia
LuisUrrutiaCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply prioritized Rust and Next.js performance best practices to your codebase.

Updated Oct 29, 2018
Search Tags:#performance#suspense#react#optimization#nextjs#bundle#server-actions
One-click install
npx skills add https://github.com/LuisUrrutia/.dotfiles --skill vercel-react-best-practices-luisurrutia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/LuisUrrutia/.dotfiles/tree/main/tools/opencode/config/.config/opencode/skills/vercel-react-best-practices
Command: npx skills add https://github.com/LuisUrrutia/.dotfiles --skill vercel-react-best-practices-luisurrutia

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps development teams consistently optimize React and Next.js applications by applying a prioritized set of performance best practices.

Core Features & Use Cases

  • Prioritized rules: a comprehensive catalogue of high-impact patterns across 8 categories, guiding improvements from eliminating waterfalls to bundle size reduction.
  • Concrete examples: actionable code patterns, anti-patterns, and step-by-step guidance for data fetching, rendering, server actions, and Suspense.
  • Code-quality guardrails: supports reviews and refactors to ensure performance gains are realized in production.

Quick Start

Audit a React component or Next.js page against the highest-impact rules and implement the recommended patterns in a small pilot to validate performance gains.

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 drift in my web application?▼

Fix React and Next.js performance drift by applying a prioritized guide of 57 best practices across 8 categories, providing actionable code patterns to improve runtime speed and reduce bundle size.

What is the best way to reduce bundle size when refactoring Next.js applications?▼

Reduce bundle size during Next.js refactors by applying concrete anti-patterns and step-by-step guidance for data fetching, server actions, and Suspense boundaries provided in the optimization rules.

How do I optimize server and client rendering to eliminate data fetching waterfalls in React?▼

Optimize server and client rendering by auditing React components against high-impact rules to eliminate data fetching waterfalls, ensuring performance gains are realized in production environments.

Can I use these React performance best practices for code reviews and refactoring?▼

You can use these React performance best practices as code-quality guardrails to support reviews and refactors, ensuring performance optimizations are applied consistently across development teams.

When do I need Suspense boundaries for optimizing Next.js page rendering?▼

Implement Suspense boundaries for Next.js page rendering when addressing performance bottlenecks, utilizing actionable examples to prioritize high-impact scenarios and optimize server/client rendering.

Related Skills

Explore More Software Engineering Skills→
Aniket-a14Aniket-a14
1

vercel-react-best-practices

Codify React and Next.js performance optimization rules for code review and generation.

Community
Intermediate
flexisuite-orgflexisuite-org

vercel-react-best-practices

Apply Vercel React and Next.js performance optimization guidelines to code.

Official
Intermediate
haidonglethqbhaidonglethqb

vercel-react-best-practices

Identify and apply React and Next.js performance patterns to optimize workloads.

Community
Advanced
Chang-Shih-YungChang-Shih-Yung

health

Aggregate type checker, linter, and test results into a 0-10 composite score.

Community
Advanced