react-best-practices

Optimize React and Next.js applications with rule-based performance analysis and refactoring.

Updated Dec 26, 2025

Search Tags:#code quality #performance #react #optimization #next.js #ai agent

Ready to run

npx skills add https://github.com/luisjedev/fontana --skill react-best-practices-luisjedev

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/luisjedev/fontana/tree/main/.github/skills/react-best-practices
Command: npx skills add https://github.com/luisjedev/fontana --skill react-best-practices-luisjedev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to optimizing React and Next.js applications, focusing on performance improvements for AI agents and LLMs.

Core Features & Use Cases

Performance Rules: Over 40 rules across 8 categories, prioritized by impact.
Automated Refactoring: Detailed explanations and examples to guide AI-driven code generation and optimization.
Use Case: An AI agent can use this guide to refactor a React codebase, identifying and fixing performance bottlenecks like waterfalls and large bundle sizes, leading to faster load times and a smoother user experience.

Quick Start

Apply the react-best-practices skill to optimize the provided React codebase for performance.

Frequently Asked Questions about 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 application performance?▼

To optimize React and Next.js performance, apply a rule-based guide covering 40+ rules across 8 categories to identify and fix bottlenecks like data waterfalls and large bundle sizes for faster load times.

What is the best way to eliminate data waterfalls in a React codebase?▼

The best way to eliminate data waterfalls involves applying rule-based analysis and AI-assisted refactoring to identify sequential fetches and restructure them for parallel execution, improving server-side performance.

How do I reduce bundle size in a Next.js application?▼

Reduce bundle size in Next.js applications by applying prioritized performance rules that guide AI-driven code generation to remove unnecessary dependencies and optimize server-side and client-side loading.

Can I use an AI agent to refactor React code for re-render optimization?▼

Yes, an AI agent can use detailed refactoring explanations and examples to automatically optimize React re-renders, addressing critical performance areas and advanced patterns to ensure a smoother user experience.

Does this React optimization guide require specific dependencies to work?▼

No specific dependencies are required; the guide functions as a reference for AI agents and LLMs to analyze and refactor existing React and Next.js codebases directly without installing additional libraries.