skills.rest
leonvanzyl
leonvanzylCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Audits React/Next.js pages/components and applies prioritized performance patterns from a structured 69-rule catalog.

426|199|Updated Aug 13, 2025
Search Tags:#automation#performance#react#optimization#next.js#best-practices#code-review
One-click install
npx skills add https://github.com/leonvanzyl/agentic-coding-starter-kit --skill vercel-react-best-practices-leonvanzyl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/leonvanzyl/agentic-coding-starter-kit --skill vercel-react-best-practices-leonvanzyl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js apps often struggle with performance as projects scale, leading to slower load times, larger bundles, and brittle UX.

Core Features & Use Cases

  • A curated set of proven performance patterns across 8 priority categories (async, bundle size, server-side, client-side, re-render, rendering, JavaScript, and advanced patterns) to guide refactoring and code generation.
  • Practical guidance for code reviews, automated tooling, and safe optimizations to improve load times, reduce bundle sizes, and stabilize rendering under real workloads.
  • Use cases include optimizing per-page performance, improving server actions, and enabling scalable, maintainable React/Next.js codebases.

Quick Start

Audit a React/Next.js component or page and apply the top-priority performance patterns to improve load times and bundle size.

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 slower load times and larger bundles?▼

To optimize React and Next.js performance, you can apply Vercel-endorsed best practices across code reviews and refactoring. This involves using a structured catalog of 69 rules to improve bundle size, data fetching, and rendering.

What are the best practices for reducing bundle size in Next.js applications?▼

Best practices for reducing Next.js bundle size involve applying structured rules from categories like bundle optimization and advanced patterns. These rules guide safe refactoring and code generation to stabilize rendering under real workloads.

How do I review React components for performance bottlenecks and re-render issues?▼

To review React components for performance bottlenecks, apply a curated set of rules across client-side, server-side, and re-render categories. This enforces safe, scalable improvements and stabilizes rendering during code reviews.

Can I use these React optimization patterns for both code generation and refactoring tasks?▼

Yes, you can use these React optimization patterns for both code generation and refactoring tasks. The guidance covers components, pages, data fetching, and bundle optimization to drive safe, scalable improvements across your codebase.

What is the best way to improve server-side rendering performance in Next.js?▼

The best way to improve Next.js server-side rendering performance is by applying Vercel-endorsed rules from the server-side and async categories. This structured catalog guides practical refactoring to optimize per-page performance and server actions.

Do I need to configure any dependencies before applying these Next.js performance rules?▼

No dependencies are required to start applying these Next.js performance rules. The Skill operates independently using a structured catalog of 69 rules defined in its internal documentation to drive code-writing and review tasks.

Related Skills

Explore More Software Engineering Skills→
sergicalsergical

vercel-react-best-practices

Apply 57 performance rules across 8 categories to React and Next.js code.

Community
Advanced
Kevin-Liu-01Kevin-Liu-01
16

vercel-react-best-practices

Apply 69 prioritized rules to optimize React and Next.js performance.

Community
Advanced
mburumaxwellmburumaxwell
240

vercel-react-best-practices

Identify and prescribe React/Next.js performance best practices for frontend bottlenecks.

Community
Basic
alfredolopez80alfredolopez80
145

vercel-react-best-practices

Enforce Vercel Engineering best practices for React and Next.js performance.

Community
Advanced