Can it help me fix React Hook errors?

Yes, it identifies violations of the Rules of Hooks and helps resolve common issues like stale closures and incorrect dependency arrays in useEffect.

How does this skill improve React component design?

It provides guidance on breaking down large components, prioritizing composition over inheritance, and separating presentational logic from container logic.

Which state management tools does this skill recommend?

It advocates for modern, lightweight solutions like Zustand or Jotai for client state, and React Query (TanStack Query) for server state.

How do I use this skill to optimize performance?

You can use the /react-coder command to request a performance audit, which will suggest implementations for React.memo, useMemo, and lazy loading.

React Best Practices

Name: React Best Practices
Author: Protagonistss

byProtagonistss

0•

開発者ツール

Guides developers in building maintainable, high-performance React applications following industry-standard design patterns and modern architectural principles.

This skill acts as a specialized architectural consultant for React development, focusing on component-driven design and modern state management. It assists developers in refactoring complex logic into custom hooks, optimizing rendering performance through memoization, and identifying common anti-patterns like prop drilling or improper useEffect usage. By enforcing core principles such as declarative programming and immutability, it ensures that frontend codebases remain scalable and performant while recommending a modern ecosystem including Next.js, Zustand, and React Query.

主な機能

01Component architecture guidance focusing on composition and single responsibility

02Advanced state management strategies for server vs. client data

03Anti-pattern detection for props drilling, stale closures, and key usage

04Hook optimization and logic extraction into custom reusable hooks

050 GitHub stars

06Performance tuning via code splitting, virtualization, and memoization

ユースケース

01Refactoring monolithic components into modular, hook-based functional structures

02Auditing complex useEffect dependencies to resolve infinite loops and memory leaks

03Optimizing data-heavy interfaces using virtualization and efficient re-render strategies

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add protagonistss/ithinku-plugins react-best-practices

For use in Claude.ai and ChatGPT

Download Skill