skills.rest
borgius
borgiusCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply performance patterns to React and Next.js codebases.

5|Updated Feb 25, 2026
Search Tags:#performance#refactoring#react#next.js#ssr#client-server#bundle-size
One-click install
npx skills add https://github.com/borgius/kanban-lite --skill vercel-react-best-practices-borgius
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/borgius/kanban-lite/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/borgius/kanban-lite --skill vercel-react-best-practices-borgius

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js performance can degrade due to suboptimal component design, data fetching, and bundle handling. This Skill provides a curated, battle-tested set of practices to optimize rendering, server actions, and bundling across client/server boundaries.

Core Features & Use Cases

  • Offers a catalog of rules and patterns to reduce waterfalls, parallelize data fetching, and minimize serialization.
  • Helps engineers review and refactor code for faster initial paint, lower bundle size, and smoother SSR hydration.
  • Use cases include reviewing a Next.js app, optimizing API routes, and streamlining server actions for secure mutations.

Quick Start

Run a quick code-review pass on React/Next.js components to identify perf hotspots and apply the recommended patterns.

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 for server-side rendering?▼

To optimize React and Next.js performance, apply curated patterns for component design, parallel data fetching, and minimal serialization to reduce waterfalls and speed up SSR hydration.

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

The best way to reduce bundle size is by applying bundle optimization patterns across client and server contexts, deferring non-critical work, and streamlining component design.

How to refactor Next.js code to avoid data fetching waterfalls?▼

Refactor Next.js code by enforcing parallel data fetching patterns and minimal serialization, which prevents request waterfalls and improves initial paint speed.

Can I use this to review and streamline secure server actions in Next.js?▼

Yes, you can use it to review and refactor Next.js API routes and server actions, applying safe mutation patterns to ensure secure and efficient client-server interactions.

Does this approach work for both client and server contexts in React?▼

Yes, this approach works across client and server boundaries, providing battle-tested rules for rendering, server actions, and bundling to ensure optimal performance in both contexts.

Related Skills

Explore More Software Engineering Skills→
iceflowericeflower

react-convention

Standardize React and Next.js coding conventions for components, hooks, and project structure.

Community
Advanced
neogenzneogenz
4

angular-ssr

Configure server-side rendering, hydration, and prerendering for Angular v20+ applications.

Community
Intermediate
laguagulaguagu
58

vercel-react-best-practices

Identify and optimize React/Next.js performance bottlenecks in codebases.

Community
Advanced
jamon8888jamon8888

gitnexus-refactoring

Rename, extract, and restructure code with dependency impact analysis.

Community
Advanced