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.

主な機能

Advanced state management guidance using useState and useReducer
Functional component architecture with strict TypeScript prop typing
Safe side-effect handling with mandatory cleanup and dependency tracking
Component composition patterns including compound components and custom hooks
45 GitHub stars
Anti-pattern detection for state mutation, array index keys, and React.FC usage

ユースケース

Building new feature components with production-grade TypeScript interfaces
Refactoring legacy React code to modern functional patterns and hooks
Debugging complex render cycles and side-effect memory leaks

概要

主な機能

Advanced state management guidance using useState and useReducer
Functional component architecture with strict TypeScript prop typing
Safe side-effect handling with mandatory cleanup and dependency tracking
Component composition patterns including compound components and custom hooks
45 GitHub stars
Anti-pattern detection for state mutation, array index keys, and React.FC usage

ユースケース

Building new feature components with production-grade TypeScript interfaces
Refactoring legacy React code to modern functional patterns and hooks
Debugging complex render cycles and side-effect memory leaks