skills.rest
figueroaignacio
figueroaignacioCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Optimize React/Next.js performance patterns for components, data fetching, and SSR/CSR scenarios.

7|Updated Apr 9, 2024
Search Tags:#performance#react#optimization#next.js#bundling#ssr#csr
One-click install
npx skills add https://github.com/figueroaignacio/ai --skill vercel-react-best-practices-figueroaignacio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/figueroaignacio/ai/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/figueroaignacio/ai --skill vercel-react-best-practices-figueroaignacio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Optimizes React/Next.js performance patterns.

Core Features & Use Cases

  • Comprehensive rules covering eliminating waterfalls, bundle optimization, server/client performance, rendering optimizations, and advanced patterns to guide automated refactoring and code generation.
  • Automated guidance for code splitting, caching, and parallel data fetching to improve TTI, FCP, and perceived performance in production Next.js projects.
  • Real-world examples and templates that can be used to generate optimized code and review performance during development and code reviews.

Quick Start

Run the skill to review a React/Next.js codebase and generate targeted refactor tasks and performance improvements.

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 patterns for server-side rendering?▼

To optimize React and Next.js performance, this skill enforces rules for SSR/CSR scenarios, data fetching, and bundling. It guides automated refactoring to eliminate waterfalls and improve rendering across your application.

What is the best way to eliminate waterfalls and improve bundle optimization in Next.js?▼

The best way to eliminate waterfalls is applying curated rules for parallel data fetching, code splitting, and caching. This generates targeted refactor tasks to improve TTI, FCP, and perceived performance.

How do I review a React codebase to generate targeted performance refactor tasks?▼

You review a React codebase by running the skill to analyze components and data fetching. It automatically generates targeted refactor tasks and performance improvements based on real-world examples and templates.

Does this skill support both client-side and server-side rendering optimization scenarios?▼

Yes, it supports both client-side and server-side rendering optimization. The skill applies comprehensive rules covering server and client performance, rendering optimizations, and bundling across React and Next.js projects.

Can I use this skill to guide automated code generation for React performance improvements?▼

Yes, you can use it to guide automated code generation. The skill enforces a curated set of rules and checks to guide automated refactoring and code generation for optimized React and Next.js performance patterns.

Related Skills

Explore More Software Engineering Skills→
loagmaloagma

vercel-react-best-practices

Apply rule-based React/Next.js performance patterns to codebases.

Community
Advanced
loagmaloagma

chrome-devtools-mcp

Measure web performance metrics and validate fixes using Chrome DevTools MCP automation.

Community
Advanced
cyanluna-gitcyanluna-git

vercel-best-practice

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

Community
Advanced
georgekhananaevgeorgekhananaev
27

react-best-practices

Identify React/Next.js performance bottlenecks and generate targeted optimizations.

Community
Advanced