skills.rest
frinz-123
frinz-123COMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

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

Updated Aug 27, 2026
Search Tags:#performance#react#next.js#bundling#data-fetching#server-actions
One-click install
npx skills add https://github.com/frinz-123/dashboardtest --skill vercel-react-best-practices-frinz-123
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/frinz-123/dashboardtest/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/frinz-123/dashboardtest --skill vercel-react-best-practices-frinz-123

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill consolidates React and Next.js performance best practices into a practical framework to guide development, reviews, and refactoring, helping teams ship faster and avoid regressions.

Core Features & Use Cases

  • Extensive rule set across 8 categories (Eliminating Waterfalls, Bundle Size, Server-Side Performance, Client-Side Data Fetching, Re-render Optimization, Rendering Performance, JavaScript Performance, Advanced Patterns) to address common performance pitfalls.
  • Actionable patterns for real-world tasks such as refactoring server actions, reducing bundle size, enabling parallel data fetching, and using Suspense effectively.
  • Use Case: apply these guidelines when building or auditing React/Next.js apps to improve initial paint, reduce waterfalls, and enhance user experience through codified rules.

Quick Start

Use the skill to audit a component or page against the 57 rules and iteratively apply the recommended changes. Start with bottlenecks like waterfalls, bundle size, and data fetching, then repeat performance checks after each change.

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 data fetching waterfalls in my React and Next.js application?▼

Fix data fetching waterfalls by prescribing parallel data fetching patterns and Suspense strategies. This skill provides actionable rules to refactor sequential requests into parallel streams, reducing load times and improving initial paint performance.

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

Reduce bundle size by auditing your codebase against 57 codified rules. This skill defines specific patterns across 8 categories, including Bundle Size, to identify heavy dependencies and optimize rendering strategies for a smaller client footprint.

How do I optimize React server actions for better server-side performance?▼

Optimize server actions by applying best-practice refactoring patterns from this skill. It addresses server-side performance bottlenecks directly, providing actionable guidelines to streamline server actions and improve overall rendering speed.

Does this React performance framework work with both client-side and server-side rendering?▼

Yes, this framework works with both rendering strategies. It includes specific categories for Client-Side Data Fetching and Server-Side Performance, ensuring comprehensive optimization across client and server environments in React and Next.js.

How do I audit my existing React components for re-render performance issues?▼

Audit React components by checking them against the Re-render Optimization rules. This skill provides a structured rule set to identify unnecessary re-renders and apply advanced patterns to enhance rendering performance.

Related Skills

Explore More Software Engineering Skills→
lyfe2025lyfe2025
4

using-git-worktrees

Create isolated git worktrees with automatic setup and safety checks.

Community
Advanced
Exia-thdExia-thd

performance-engineer

Profile web applications and generate k6/Artillery load testing scripts.

Community
Advanced
aroidoaroido

Web Vitals Monitoring Skill

Measure Core Web Vitals and enforce performance budgets in CI/CD pipelines.

Official
Advanced
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate