Does this skill support React Class components?

No, this skill strictly enforces modern functional components and hooks, as they are the current industry standard for performance and maintainability.

Why does it discourage the use of React.FC?

The skill promotes explicit function declarations over React.FC to avoid issues with defaultProps and to provide better support for generic components and cleaner prop typing.

Can it help with complex state management?

Yes, it provides a decision framework for choosing between local state, useReducer, the Context API, or external libraries like Zustand and TanStack Query.

How does it handle TypeScript in React?

It requires explicit interface definitions for props and utilizes specialized React types for events and children, ensuring full type safety across the UI layer.

How does it handle API calls and side effects?

It implements a strict useEffect pattern that requires dependency arrays, AbortControllers for cleanup, and discourages using effects for derived state.

Programming in React

Name: Programming in React
Author: ed3dai

byed3dai

•

開発者ツール

Guides the development of modern React applications using functional components, hooks, and strict TypeScript patterns.

This skill provides a comprehensive framework for building high-quality React applications within Claude Code. It enforces modern best practices such as functional components over classes, precise hook usage (including state management and side effects), and robust TypeScript integration. By focusing on component composition and avoiding common anti-patterns like state mutation or improper effect cleanup, it ensures code maintainability, performance, and reliability across .jsx and .tsx files.

主な機能

01Advanced state management guidance using useState and useReducer

02Functional component architecture with strict TypeScript prop typing

03Safe side-effect handling with mandatory cleanup and dependency tracking

04Component composition patterns including compound components and custom hooks

0545 GitHub stars

06Anti-pattern detection for state mutation, array index keys, and React.FC usage

ユースケース

01Building new feature components with production-grade TypeScript interfaces

02Refactoring legacy React code to modern functional patterns and hooks

03Debugging complex render cycles and side-effect memory leaks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ed3dai/ed3d-plugins programming-in-react

For use in Claude.ai and ChatGPT

Download Skill