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

0•

Design Tools

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.

Key Features

01State management optimization and prop-drilling mitigation

02Advanced composition patterns over legacy inheritance

03Functional component standardization with React 18 hooks

04Error boundary implementation for resilient UI components

050 GitHub stars

06Custom hook extraction for shared business logic

Use Cases

01Refactoring redundant logic across multiple components into reusable custom hooks

02Developing new UI components that align with existing project architectural standards

03Debugging lifecycle and state synchronization issues in complex functional components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add joaopelegrino/app-controle react-components-patterns

For use in Claude.ai and ChatGPT

Download Skill