Is this skill based on specific industry standards?

Yes, it is based on Vercel's React best practices, focusing on high-impact performance optimizations used in production-grade web applications.

How does this skill improve React bundle size?

It identifies and discourages 'barrel' imports (index.ts) which often break tree-shaking, recommending direct imports and named exports to ensure only necessary code is bundled.

Can it help speed up data fetching?

Yes, the skill identifies sequential 'await' calls that don't depend on each other and suggests parallelizing them using Promise.all to reduce total waiting time.

How does it handle unnecessary component re-renders?

It provides guidelines for implementing React.memo correctly, optimizing dependency arrays in hooks, and managing derived state to prevent redundant render cycles.

React Performance Optimizer

Name: React Performance Optimizer
Author: xxziiko

byxxziiko

0•

開発者ツール

Optimizes React and TypeScript applications by implementing best practices for rendering, bundle size, and asynchronous operations.

This skill provides specialized guidance for improving the performance of React and TypeScript projects. It focuses on critical areas such as optimizing asynchronous data fetching with parallel execution, reducing bundle sizes by eliminating barrel imports and leveraging tree-shaking, and minimizing unnecessary re-renders through memoization and effective state management. Based on Vercel’s best practices, it helps developers build faster, more efficient web applications by applying production-grade patterns and preventing common performance pitfalls in modern frontend development.

主な機能

01Re-render prevention using memoization and dependency array optimization

020 GitHub stars

03Bundle size reduction through tree-shaking and barrel import elimination

04Strategic implementation of Suspense boundaries for independent component loading

05Asynchronous processing optimization using parallel Promise execution

06Enhanced code structure using named exports for better IDE support and stability

ユースケース

01Refactoring sequential API calls into parallel operations to reduce page load times

02Auditing existing React codebases to identify and fix performance bottlenecks

03Restructuring project imports and exports to optimize tree-shaking and minimize bundle bloat

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xxziiko/subagent react-performance

For use in Claude.ai and ChatGPT