skills.rest
ninehills
ninehillsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Identify and apply React and Next.js performance best practices for code reviews and bundle optimization.

278|26|Updated Jan 14, 2026
Search Tags:#performance#refactoring#frontend#react#nextjs#bundle#server-components
One-click install
npx skills add https://github.com/ninehills/skills --skill vercel-react-best-practices-ninehills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/ninehills/skills/tree/main/skills/react-best-practices
Command: npx skills add https://github.com/ninehills/skills --skill vercel-react-best-practices-ninehills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The React Best Practices skill consolidates Vercel's performance guidelines to help engineers identify and apply proven optimizations in React and Next.js projects, reducing runtime latency and bundle sizes.

Core Features & Use Cases

  • Provide prioritized, category-based rules for eliminating waterfalls, bundle optimizations, server and client data strategies, re-render reductions, and rendering improvements; suitable for code reviews, refactors, and architectural decisions; practical examples and clear guidance for teams.

Quick Start

Review a React component or Next.js page, identify performance bottlenecks, and apply the recommended rules to deliver faster, leaner code.

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 during a code review?▼

Optimize React and Next.js performance by applying prioritized rules to eliminate data waterfalls, reduce re-renders, and improve rendering. This identifies bottlenecks and delivers faster, leaner code.

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

Reduce Next.js bundle size by applying category-based bundle optimization rules and server/client data strategies. This ensures efficient code splitting and minimizes runtime latency.

How do I stop React server-components data fetching waterfalls?▼

Stop server-components data fetching waterfalls by applying proven server and client data strategies. These patterns optimize data fetching across React projects to reduce runtime latency.

Can I use these React best practices for automated refactoring?▼

Yes, these React best practices support automated refactoring. The skill captures 8 priority categories with front-matter-driven metadata designed to support automated refactoring and code generation.

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

Yes, this approach works for server and client data fetching in React. It provides prioritized rules for server and client data strategies to optimize data fetching and reduce runtime latency.

Why should I apply Vercel performance guidelines to my React components?▼

Apply Vercel performance guidelines to React components to consolidate proven patterns for eliminating waterfalls and reducing bundle sizes. This reduces runtime latency and improves code quality.

Related Skills

Explore More Software Engineering Skills→
wellnessbrotherjay-debugwellnessbrotherjay-debug

vercel-react-best-practices

Audits and refactors React & Next.js projects for improved performance and efficiency.

Community
Basic
namninhndnamninhnd

performance-profiling

Analyze web performance with Lighthouse audits and optimization scripts.

Community
Intermediate
patrickhaahrpatrickhaahr

vercel-react-best-practices

Identify and apply React/Next.js performance best practices for rendering, data fetching, and bundle size.

Community
Basic
TymorIbrahimTymorIbrahim

react-performance

Identify and fix performance bottlenecks in React and Next.js applications.

Community
Advanced