skills.rest
JoaoPedroAmaral
JoaoPedroAmaralCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-patterns

Document React component, hook, and composition design guidelines.

Updated Aug 23, 2026
Search Tags:#typescript#testing#performance#react#hooks#composition#state-management
One-click install
npx skills add https://github.com/JoaoPedroAmaral/backBarbearia --skill react-patterns-joaopedroamaral
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-patterns
Source: https://github.com/JoaoPedroAmaral/backBarbearia/tree/main/.claude/skills/react-patterns
Command: npx skills add https://github.com/JoaoPedroAmaral/backBarbearia --skill react-patterns-joaopedroamaral

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent component design, fragile hooks, scattered state placement, and ad-hoc performance work make React codebases hard to maintain and scale; this Skill provides structured principles and patterns to standardize implementation and improve long-term maintainability.

Core Features & Use Cases

  • Component Design: Guidelines for server, client, presentational, and container components to enforce single responsibility and predictable state flow.
  • Hook Patterns & Composition: When to extract custom hooks, top-level rules, and composition strategies including compound components and render-prop alternatives.
  • State, Performance & TypeScript: Advice for selecting state management (useState, Context, React Query, Zustand), profiling optimizations, and TypeScript prop/ref typing for robust components.
  • Testing & Error Handling: Priorities across unit, integration, and E2E tests and recommended placement of error boundaries and recovery UX.

Quick Start

Use the react-patterns skill to review a React component and recommend refactors for hooks, state placement, TypeScript typings, and performance improvements.

Frequently Asked Questions about react-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the best React patterns for structuring production components?▼

Best practices for React hook extraction involve following top-level rules to separate reusable logic from components. This standardizes composition techniques like compound components, ensuring fragile hooks are refactored into robust, maintainable custom hooks.

How do I choose the right React state management strategy for my application?▼

Profiling React performance optimizations involves systematically identifying render bottlenecks and applying composition strategies to prevent unnecessary re-renders. This structured approach replaces ad-hoc performance work with measurable tuning steps.

How should I type React component props and refs with TypeScript?▼

Testing React applications involves prioritizing unit, integration, and E2E tests while strategically placing error boundaries for recovery UX. This comprehensive approach standardizes validation across component responsibilities and state flows.

Does this React patterns skill support React 19 hooks?▼

No external dependencies are required to document React patterns, as the skill operates without listed component or dependency inputs. It provides structured principles and guidelines directly applicable to any existing React codebase.

Related Skills

Explore More Software Engineering Skills→
markus41markus41
18

react-vite

Develop React 18+ apps with Vite and TypeScript.

Community
Intermediate
jamon8888jamon8888

gitnexus-refactoring

Rename, extract, and restructure code with dependency impact analysis.

Community
Advanced
mindcockpit-aimindcockpit-ai
11

react-patterns

Enforce modern React and TypeScript coding standards via static analysis.

Official
Intermediate
yutnayutna
2

nextjs-architecture

Explain Next.js App Router fundamentals and React Server Components for architecture decisions.

Community
Advanced