Can this skill help reduce my JavaScript bundle size?

Yes, it offers strategies for avoiding barrel files through direct imports, implementing dynamic imports for heavy components, and deferring third-party scripts.

Does it address common React re-render issues?

Absolutely. It covers best practices for derived state, stable references, primitive dependencies, and memoization to ensure components only render when necessary.

How does this skill help with the Next.js App Router?

It provides specific patterns for Suspense streaming, server-side request deduplication using React.cache, and utilizing the after() function for background tasks.

How do I use this skill during a code review?

You can ask Claude to analyze your React or Next.js code against this skill's priority hierarchy to identify critical issues like sequential awaits or inefficient state management.

React Performance Optimizer

Name: React Performance Optimizer
Author: s-hiraoku

bys-hiraoku

0•

Developer Tools

Enhances Claude's ability to audit and optimize React and Next.js applications through systematic performance patterns.

This skill provides a comprehensive framework for identifying and resolving performance bottlenecks in React and Next.js applications. It guides developers through high-impact optimizations including the elimination of data-fetching waterfalls, bundle size reduction via code-splitting, server-side caching, and the prevention of expensive component re-renders. By applying these patterns, developers can significantly improve Core Web Vitals and ensure a responsive user experience across both client and server environments.

Key Features

01Optimizes server-side performance with request-scoped deduplication and non-blocking tasks

02Enhances rendering speed with CSS content-visibility and static JSX hoisting

03Reduces bundle sizes through tree-shaking and strategic dynamic imports

04Prevents redundant re-renders using stable references and efficient state derivation

050 GitHub stars

06Eliminates sequential data waterfalls using parallel promises and Suspense streaming

Use Cases

01Optimizing data-fetching strategies in complex, high-traffic server-rendered applications

02Refactoring slow Next.js pages to improve Core Web Vitals and PageSpeed scores

03Reviewing React components to identify and fix unnecessary re-render cycles

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