Does this skill support React Class Components?

No, this skill specifically promotes and enforces modern functional components and hooks, following current React best practices for better performance and testability.

When should I use Context API according to this skill?

The skill advises using Context API for global data like themes or user authentication, while recommending standard props for component-specific data to maintain performance.

How does this help with code duplication?

It provides specific patterns for extracting shared logic into custom hooks and creating generic base components that can be reused across the entire application.

Is this skill suitable for testing?

Yes, it includes patterns and best practices for writing component tests using Vitest and React Testing Library to ensure UI stability.

React Component Patterns

Name: React Component Patterns
Author: joaopelegrino

byjoaopelegrino

デザインツール

Implements standardized React component patterns and hooks to build maintainable, reusable, and scalable frontend architectures.

概要

This skill provides a comprehensive architectural framework for building modern React applications, specifically optimized for complex educational and B2B platforms. It guides users through implementing functional components with React 18 hooks, advanced composition strategies to avoid inheritance pitfalls, and intelligent state management decisions between Props and the Context API. By focusing on unidirectional data flow and separation of concerns, it helps developers reduce code duplication, improve component testability, and maintain high performance across large-scale codebases.

主な機能

State management optimization and prop-drilling mitigation
Advanced composition patterns over legacy inheritance
Functional component standardization with React 18 hooks
Error boundary implementation for resilient UI components
0 GitHub stars
Custom hook extraction for shared business logic

ユースケース

Refactoring redundant logic across multiple components into reusable custom hooks
Developing new UI components that align with existing project architectural standards
Debugging lifecycle and state synchronization issues in complex functional components

概要

主な機能

State management optimization and prop-drilling mitigation
Advanced composition patterns over legacy inheritance
Functional component standardization with React 18 hooks
Error boundary implementation for resilient UI components
0 GitHub stars
Custom hook extraction for shared business logic

ユースケース

Refactoring redundant logic across multiple components into reusable custom hooks
Developing new UI components that align with existing project architectural standards
Debugging lifecycle and state synchronization issues in complex functional components