Can it help reduce my JavaScript bundle size?

Yes, it includes guidelines for avoiding barrel files, implementing dynamic imports, and deferring non-critical third-party scripts.

How does this skill help with Next.js performance?

It provides specific patterns for App Router features like Suspense streaming, React.cache(), and the after() function to minimize server-side blocking.

Does it address React re-render issues?

Absolutely. It covers techniques like stable references, primitive dependencies, and using useTransition for non-urgent updates.

Is this suitable for existing projects?

Yes, the skill is designed to help with both new builds and the systematic refactoring of existing React/Next.js codebases.

React Performance Optimizer

Name: React Performance Optimizer
Author: s-hiraoku

bys-hiraoku

0•

学习与文档

Optimizes React and Next.js applications by implementing best practices for rendering speed, bundle size, and server-side efficiency.

This skill provides a comprehensive framework for identifying and fixing performance bottlenecks in React and Next.js applications. It guides developers through a prioritized hierarchy of optimizations, from critical waterfall elimination and bundle size reduction to advanced server-side patterns and re-render prevention techniques. By applying production-grade implementation patterns like Suspense streaming, direct imports, and stable reference management, it helps ensure your frontend remains responsive, efficient, and scores high on Core Web Vitals.

主要功能

01Eliminate async waterfalls using parallel fetching and Suspense streaming

02Prevent unnecessary re-renders through stable references and derived state patterns

03Reduce bundle size via tree-shakeable imports and dynamic code-splitting

04Enhance UI responsiveness using useTransition for non-urgent state updates

050 GitHub stars

06Optimize server-side performance with request-scoped deduplication and non-blocking work

使用场景

01Refactoring complex React components to minimize expensive re-renders

02Improving Core Web Vitals and LCP scores for Next.js applications

03Auditing and optimizing third-party script loading and bundle weight

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add s-hiraoku/synapse-a2a react-performance

For use in Claude.ai and ChatGPT

Download Skill