skills.rest
cephalization
cephalizationCOMMUNITY
Explore all skills by this author →
Website𝕏@cephalizationGitHub

vercel-react-best-practices

Apply 57 React/Next.js performance rules across 8 categories.

1|Updated Jan 29, 2026
Search Tags:#performance#react#optimization#next.js#bundle#server-components#client-components
One-click install
npx skills add https://github.com/cephalization/bonfire --skill vercel-react-best-practices-cephalization
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/cephalization/bonfire/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/cephalization/bonfire --skill vercel-react-best-practices-cephalization

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React/Next.js projects often struggle with waterfalls, bloated bundles, and suboptimal rendering. This skill consolidates authoritative performance guidelines to help teams write, review, and refactor code for faster, reliable experiences.

Core Features & Use Cases

  • Contains 57 rules across 8 categories, prioritized to target critical bottlenecks like waterfalls and bundle size.
  • Guides for both authoring and reviewing code, plus automated patterns for refactoring and code generation.
  • Use cases span data fetching, server actions, React Server Components, and client rendering optimizations.

Quick Start

Analyze a React component or page and apply the top-priority rules to improve performance across waterfalls, bundle size, and rendering efficiency.

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 data fetching and rendering?▼

Optimize React and Next.js performance by applying a structured set of 57 best practices across 8 categories, targeting critical bottlenecks like data fetching waterfalls and bundle size. This guides component authoring and refactoring workflows.

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

Reduce bundle size by applying prioritized rules that target bloated bundles and suboptimal rendering. The guidelines cover code-splitting and optimizing client rendering to ensure faster, reliable experiences.

How do I refactor React components to use Server Components and Client Components effectively?▼

Refactor React components by applying codified rules for Server Components and Client Components. These patterns guide automated refactoring, tooling, and code-generation workflows across development and review tasks.

Does this approach work for both writing new code and reviewing existing React pages?▼

Yes, the approach works for both writing and reviewing code. It provides guides for authoring new components and pages, plus automated patterns for refactoring existing code to improve rendering efficiency.

Why does my Next.js app experience rendering waterfalls and how can I fix them?▼

Rendering waterfalls occur due to suboptimal data fetching patterns. Fix them by applying prioritized best practices that consolidate authoritative performance guidelines to restructure data fetching and server actions.

Related Skills

Explore More Software Engineering Skills→
hathbangerhathbanger

vercel-react-best-practices

Apply React and Next.js performance best practices to reduce bundle size.

Community
Advanced
Andy-HNUAndy-HNU

platform-strategy

Develop platform strategies for marketplaces, ecosystems, and developer platforms.

Community
Intermediate
vudovnvudovn
8.1k

performance-profiling

Profile web applications with a Baseline, Identify, Fix, Validate workflow using Lighthouse and DevTools.

Community
Advanced
ConradmakerConradmaker

fe-code-review

Review frontend code for conventions, React patterns, accessibility, and performance.

Community
Advanced