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

•

Design Tools

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.

Key Features

01Enhances DOM rendering performance for complex SVGs and long lists

0220,405 GitHub stars

03Eliminates asynchronous waterfalls using parallel execution patterns

04Optimizes bundle sizes by managing barrel imports and third-party scripts

05Implements efficient client-side data fetching with Tanstack Query

06Reduces unnecessary re-renders via lazy initialization and transitions

Use Cases

01Refactoring legacy React components to improve core web vitals

02Conducting automated performance audits during PR reviews

03Generating high-performance UI components with optimized state logic

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mastra-ai/mastra react-best-practices

For use in Claude.ai and ChatGPT

Download Skill