skills.rest
Tristan578
Tristan578COMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Identify React/Next.js performance bottlenecks and apply 8-category best practices.

5|1|Updated Feb 11, 2026
Search Tags:#performance#react#optimization#nextjs#bundling#server-actions
One-click install
npx skills add https://github.com/Tristan578/project-forge --skill vercel-react-best-practices-tristan578
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/Tristan578/project-forge/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/Tristan578/project-forge --skill vercel-react-best-practices-tristan578

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects often struggle with performance bottlenecks across rendering, data fetching, and bundle size, leading to waterfalls, slow first paints, and higher maintenance costs.

Core Features & Use Cases

This skill consolidates 67 rules across 8 priority categories to guide writing, reviewing, and refactoring React/Next.js code for optimal performance. It covers server/client patterns, SSR/ hydration considerations, and bundle optimization to reduce waterfalls, improve TTI, and streamline refactoring workflows in real-world apps.

Quick Start

Audit your codebase for waterfalls and bundle bloat, then apply the 8-category guidelines to refactor React/Next.js code for 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 fix React and Next.js performance bottlenecks like slow first paint and data waterfalls?▼

Fix React and Next.js performance bottlenecks by auditing your codebase for waterfalls and bundle bloat, then applying 67 structured rules across 8 priority categories to refactor rendering and data fetching.

What are the best practices for refactoring React Server Components and Server Actions?▼

Best practices for refactoring React Server Components and Server Actions involve applying prioritized guidelines across 8 categories that ensure compatibility with SSR, hydration considerations, and optimal server/client patterns.

How do I reduce bundle size and optimize data fetching in Next.js?▼

Reduce bundle size and optimize data fetching in Next.js by applying battle-tested bundling guidelines and refactoring data fetching logic to eliminate waterfalls and improve Time to Interactive.

Does this Next.js optimization approach work with existing production apps?▼

This Next.js optimization approach works for production apps by structuring refactoring workflows through 8 priority categories with CRITICAL and HIGH rules, security checks, and server/client pattern guidelines.

Why does my React app have slow TTI and how can I prioritize fixes?▼

Your React app has slow TTI due to rendering and data fetching waterfalls; prioritize fixes using the 8-category guidelines that rank rules by CRITICAL and HIGH priority for structured refactoring.

When should I not use React Server Components for performance optimization?▼

Consider limitations of React Server Components when client-side interactivity is required, using the 8-category guidelines to evaluate SSR, hydration, and server/client patterns for optimal performance.

Related Skills

Explore More Software Engineering Skills→
r1cA18r1cA18
4

vercel-react-best-practices

Optimize React and Next.js applications with prioritized performance rules.

Community
Advanced
mohamed-g-shoaibmohamed-g-shoaib

vercel-react-best-practices

Identify React/Next.js performance bottlenecks and propose concrete improvements.

Community
Advanced
Impertio-StudioImpertio-Studio

shadcn-agents-rsc-boundary-validator

Audit Next.js App Router codebases for React Server Components boundary violations in shadcn ui imports.

Official
Advanced
daudaudinangdaudaudinang

vercel-react-best-practices

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

Community
Advanced