How does this skill improve React performance?

It applies 12 prioritized rules targeting critical areas such as async waterfalls, bundle size, re-render logic, and DOM rendering efficiency.

Can this skill refactor existing code?

Yes, it is designed to be triggered during refactoring tasks to identify and fix suboptimal patterns in existing React components.

Does it support specific data fetching libraries?

Yes, it specifically promotes patterns for Tanstack Query to ensure automatic request deduplication and efficient state management.

How does it handle bundle size optimization?

The skill provides rules to avoid costly barrel file imports and guides the deferral of non-critical third-party libraries.

Is this skill specific to the Mastra framework?

While developed by the Mastra team, the performance guidelines are applicable to any modern TypeScript-based React application.

React Best Practices

Name: React Best Practices
Author: mastra-ai

bymastra-ai

•

20,405

デザインツール

Optimizes React application performance through automated refactoring guidelines and high-impact implementation patterns.

概要

The React Best Practices skill provides Claude with a comprehensive framework for writing, reviewing, and refactoring React code based on Mastra Engineering's performance standards. It organizes 12 high-impact rules across six prioritized categories—including waterfall elimination, bundle size optimization, and re-render management—to ensure that AI-generated frontend code is production-ready, efficient, and scalable. This skill is particularly useful for developers looking to automate performance audits and implement advanced patterns like Tanstack Query integration, lazy state initialization, and immutable state management.

主な機能

Enhances DOM rendering performance for complex SVGs and long lists
20,405 GitHub stars
Eliminates asynchronous waterfalls using parallel execution patterns
Optimizes bundle sizes by managing barrel imports and third-party scripts
Implements efficient client-side data fetching with Tanstack Query
Reduces unnecessary re-renders via lazy initialization and transitions

ユースケース

Refactoring legacy React components to improve core web vitals
Conducting automated performance audits during PR reviews
Generating high-performance UI components with optimized state logic

概要

主な機能

Enhances DOM rendering performance for complex SVGs and long lists
20,405 GitHub stars
Eliminates asynchronous waterfalls using parallel execution patterns
Optimizes bundle sizes by managing barrel imports and third-party scripts
Implements efficient client-side data fetching with Tanstack Query
Reduces unnecessary re-renders via lazy initialization and transitions

ユースケース

Refactoring legacy React components to improve core web vitals
Conducting automated performance audits during PR reviews
Generating high-performance UI components with optimized state logic