skills.rest
galafis
galafisCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply Vercel best-practices guidelines to React and Next.js code and architecture.

Updated Aug 27, 2026
Search Tags:#performance#react#refactor#nextjs#best-practices#ssr#bundle
One-click install
npx skills add https://github.com/galafis/fonte --skill vercel-react-best-practices-galafis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/galafis/fonte/tree/main/_kilo_marketplace_temp/skills/vercel-react-best-practices
Command: npx skills add https://github.com/galafis/fonte --skill vercel-react-best-practices-galafis

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects often suffer from performance regressions due to suboptimal patterns; this skill provides a consolidated, AI-friendly set of guidelines to prevent waterfalls, reduce bundle size, improve SSR/CSR performance, and optimize rendering.

Core Features & Use Cases

  • Comprehensive rules across eight categories, prioritized by impact, to guide automated refactoring and code generation.
  • Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
  • When applying changes, you can rely on a structured set of recommendations to drive automated generation and review workflows.
  • Use cases include code review, automated refactoring, and performance improvements across large React apps, at both server and client boundaries.

Quick Start

Review your React/Next.js codebase and apply the 45 rules to improve 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 prevent waterfall requests and improve data fetching performance in React?▼

React bundle size optimization involves applying specific rules during code generation and refactoring to minimize client-side imports. Reviewing components against best-practice guidelines helps reduce unnecessary dependencies across server boundaries.

How do I optimize bundle size when refactoring a Next.js application?▼

Next.js bundle size optimization involves applying specific rules during code generation and refactoring to minimize client-side imports. Reviewing components against best-practice guidelines helps reduce unnecessary dependencies across server boundaries.

What is the best way to review React components for SSR and CSR rendering performance?▼

The best way to review React components for rendering performance is applying a prioritized set of 45 rules across UI components and pages. This enforces optimal SSR and CSR boundaries during automated code reviews.

Can I use automated refactoring rules to fix performance regressions in existing Next.js pages?▼

Yes, you can use automated refactoring rules to fix Next.js performance regressions. The guidelines trigger on tasks involving Next.js pages and data fetching, driving automated generation and review workflows across large apps.

Does Vercel's React best practices skill support both writing new UI components and reviewing existing code?▼

Vercel's React best practices skill supports writing, reviewing, and refactoring tasks for UI components. It applies comprehensive rules across eight categories to guide both new code generation and existing code review workflows.

Related Skills

Explore More Software Engineering Skills→
cyanluna-gitcyanluna-git

vercel-best-practice

Apply Vercel React/Next.js performance guidelines to optimize rendering, bundles, and API calls.

Community
Advanced
siberiacancodesiberiacancode
16

vercel-react-best-practices

Apply 69 React/Next.js performance rules across 8 categories to optimize components and data flows.

Official
Advanced
vudovnvudovn
8.1k

performance-profiling

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

Community
Advanced
pitispitis
5

framework-doctor

Analyze frontend projects for security, performance, correctness, and architectural issues.

Community
Intermediate