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

0•

디자인 도구

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

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.

주요 기능

01Advanced techniques for eliminating network waterfalls and optimizing bundle size

020 GitHub stars

03Specialized guidance for Next.js Server Components and Client Rendering

04Practical 'Fail/Pass' code examples for immediate implementation

0547 categorized performance rules covering critical to low-impact optimizations

06Targeted keyword scanning to rapidly identify performance bottlenecks

사용 사례

01Conducting performance audits on Next.js pages and data fetching logic

02Implementing code-splitting and bundle optimization strategies for faster load times

03Refactoring legacy React components to reduce unnecessary re-renders

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add adbutterfield/coding-agent-plugins developing-react-apps

For use in Claude.ai and ChatGPT

Download Skill