skills.rest
luisjedev
luisjedevCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/luisjedev/fontana --skill react-best-practices-luisjedev
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
aayushsharma141aayushsharma141

vercel-react-best-practices

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

Community
Advanced
am-willam-will
1.0k

vercel-react-best-practices

Apply React and Next.js performance best practices to components, pages, and data fetching.

Community
Advanced
jackmcintyrejackmcintyre

python-refactoring

Analyze Python code for complexity, duplication, and best practices.

Community
Intermediate
mjohnson518mjohnson518
8

performance-optimization

Profile CPU and memory usage to identify and fix performance bottlenecks.

Community
Advanced