Will it refactor my existing React code?

When active, Claude will apply these best practices whenever it suggests changes, refactors, or new component implementations in your React project.

Does this skill support React 19 features?

Yes, it is specifically designed for modern React (19+) standards and follows the latest architectural patterns for hooks and rendering.

How does it handle data fetching?

The skill prioritizes external data libraries like TanStack Query over manual useEffect hooks to ensure efficient, cacheable, and error-resilient data management.

Is TypeScript integration included?

Yes, the skill enforces explicit prop typing and return types to ensure type safety and better developer experience in TypeScript environments.

Why does it discourage the use of useEffect?

It follows the 'You Might Not Need An Effect' philosophy to prevent common synchronization bugs and performance issues, favoring derived values during the render phase instead.

Modern React Best Practices

Name: Modern React Best Practices
Author: mrpitch

bymrpitch

0•

デザインツール

Builds clean, performant React 19+ components by enforcing modern patterns and avoiding common architectural pitfalls like over-usage of effects.

This skill transforms Claude into a senior React architect, focusing on the latest standards for React 19 and beyond. It prioritizes maintainability and performance by guiding the AI to favor derived state over synchronization, use named function components for clarity, and implement efficient event handling. By strictly following 'You Might Not Need An Effect' principles and leveraging TanStack Query for data fetching, it ensures your codebase remains lean, deterministic, and free from the complexities of manual state synchronization and premature optimization.

主な機能

01TanStack Query integration for robust data fetching

02TypeScript-first prop typing and explicit returns

03Effect reduction and derived state optimization

040 GitHub stars

05React 19+ compliance and modern hook patterns

06Composition-over-configuration component design

ユースケース

01Scaffolding new UI features with clean, maintainable component structures

02Auditing existing components to remove unnecessary useEffect and useState calls

03Refactoring legacy class or early hook components to modern React 19 standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mrpitch/mrp-claude-plugin modern-best-practice-react-components

For use in Claude.ai and ChatGPT

Download Skill