Does it provide code examples?

Every rule includes 'Fail' and 'Pass' code snippets to clearly demonstrate the correct way to implement performance fixes.

How does this skill improve React app speed?

It applies 47 specific rules focused on eliminating waterfalls, reducing bundle size, and optimizing re-renders to ensure high-performance code patterns.

How do I trigger these performance checks?

The skill triggers automatically during tasks involving React components, hooks, or data fetching when using Claude Code.

Can I use this for Next.js applications?

Yes, the skill includes specific patterns for Next.js, including Server-Side Rendering (SSR) and Server Component optimizations.

React Performance Architect

Name: React Performance Architect
Author: adbutterfield

byadbutterfield

Design Tools

Optimizes React and Next.js applications using 47 performance-focused rules to eliminate waterfalls, reduce bundle sizes, and improve rendering efficiency.

About

This skill provides a comprehensive set of 47 performance best practices specifically designed for React and Next.js development. It guides Claude to identify and fix common anti-patterns like network waterfalls, bloated bundles, and unnecessary re-renders. By integrating these rules into the development workflow, the skill ensures that code reviews are more rigorous and new features are built with high-performance standards from the start, covering everything from server-side rendering strategies to client-side data fetching and JavaScript-level optimizations.

Key Features

Advanced techniques for eliminating network waterfalls and optimizing bundle size
0 GitHub stars
Specialized guidance for Next.js Server Components and Client Rendering
Practical 'Fail/Pass' code examples for immediate implementation
47 categorized performance rules covering critical to low-impact optimizations
Targeted keyword scanning to rapidly identify performance bottlenecks

Use Cases

Conducting performance audits on Next.js pages and data fetching logic
Implementing code-splitting and bundle optimization strategies for faster load times
Refactoring legacy React components to reduce unnecessary re-renders

About

Key Features

Advanced techniques for eliminating network waterfalls and optimizing bundle size
0 GitHub stars
Specialized guidance for Next.js Server Components and Client Rendering
Practical 'Fail/Pass' code examples for immediate implementation
47 categorized performance rules covering critical to low-impact optimizations
Targeted keyword scanning to rapidly identify performance bottlenecks

Use Cases

Conducting performance audits on Next.js pages and data fetching logic
Implementing code-splitting and bundle optimization strategies for faster load times
Refactoring legacy React components to reduce unnecessary re-renders