fe-react

Apply prioritized React and Next.js performance optimization rules.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/MiguelAguiarDEV/baymax --skill fe-react
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: fe-react
Source: https://github.com/MiguelAguiarDEV/baymax/tree/main/skills/fe-react
Command: npx skills add https://github.com/MiguelAguiarDEV/baymax --skill fe-react

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses performance bottlenecks in React and Next.js applications, ensuring faster load times, reduced bundle sizes, and a smoother user experience.

Core Features & Use Cases

  • Prioritized Optimization Rules: Apply a structured set of rules covering waterfalls, bundle size, server-side, and client-side fetching.
  • Modern Framework Focus: Specifically tailored for React and Next.js development.
  • Use Case: When developing a new feature in a Next.js app, use this skill to identify and fix potential performance issues before they impact users, such as optimizing data fetching or reducing component re-renders.

Quick Start

Apply modern React and Next.js performance patterns with prioritized rules.

Frequently Asked Questions about fe-react

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 modern patterns using prioritized rules that eliminate data fetching waterfalls, reduce bundle size, and improve server-side rendering and client-side fetching for faster load times.

What causes slow load times and large bundle sizes in Next.js?

Slow load times and large bundle sizes in Next.js often stem from unoptimized data fetching waterfalls, heavy client-side JavaScript, and excessive component re-renders. Applying structured optimization rules addresses these specific bottlenecks.

How do I fix data fetching waterfalls in Next.js?

Fixing data fetching waterfalls in Next.js involves applying prioritized optimization rules to both server-side and client-side fetching. This structured approach eliminates sequential data loading delays and speeds up applications.

Can I use these React performance rules for systematic debugging and UI regression analysis?

These React performance rules integrate with frontend design and systematic debugging skills to support comprehensive UI optimization and regression analysis, ensuring performance gains do not introduce visual or functional regressions.

Does this approach work for both server-side rendering and client-side fetching optimization?

This approach works for both server-side rendering and client-side fetching optimization by applying prioritized rules that target waterfalls, bundle size, and JavaScript performance across the entire React and Next.js stack.