Can it help with state management decisions?

Yes, it includes a decision tree that guides the transition from local state to lifted state, composition, context, and finally external libraries.

Does it support the latest React 18/19 features?

Yes, it includes patterns for the use() hook, Server Components, streaming SSR, and automatic document metadata hoisting.

Why does it discourage the use of React.FC?

It favors standard function declarations to avoid implicit children typing and to simplify the implementation of TypeScript generics in components.

How does this skill handle useEffect?

It treats Effects as escape hatches for external synchronization only, providing specific criteria to determine if logic should instead be handled in event handlers or during rendering.

React Component Architecture

Name: React Component Architecture
Author: xobotyi

byxobotyi

•

Design Tools

Enforces React component discipline through pure functions, minimal state management, and optimized hook usage for performant UI development.

This skill empowers Claude to build and maintain high-quality React applications by adhering to strict architectural principles like component purity, the 'Thinking in React' methodology, and efficient state placement. It provides deep expertise in modern React patterns, including the use of the new use() API, server components, and rigorous hook rules, ensuring that effects are used only as escape hatches while maintaining a clean separation between logic and declarative JSX.

Key Features

014 GitHub stars

02Optimizes JSX structure by separating event logic into dedicated handler objects.

03Enforces 'Effects as escape hatches' to prevent synchronization bugs and race conditions.

04Implements a state placement decision tree to minimize prop drilling and unnecessary global state.

05Standardizes component architecture using pure functional patterns and one-way data flow.

06Provides guidance for modern features like Server Components, Suspense, and the use() hook.

Use Cases

01Designing scalable frontend architectures for large applications using compound components and composition.

02Debugging complex hook dependencies and identifying unnecessary re-renders in performance-critical views.

03Refactoring bloated components into pure, modular functions with minimal state footprints.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xobotyi/cc-foundry react

For use in Claude.ai and ChatGPT

Download Skill