React Component Architecture

by aj-geddes3f5182cfd739No license355 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 7 months ago

Design scalable React components using functional components, hooks, composition patterns, and TypeScript. Use when building reusable component libraries and maintainable UI systems.

Instructions onlySoftware Development

AI-generated overview

Guides design of scalable React components using functional components, hooks, composition patterns and TypeScript.

What it does: Provides guidance and reference material for structuring React components with functional components, hooks, composition, higher-order components and render props, using TypeScript for type safety. It includes a quick-start example, reference guides in a references directory, and a component template file. The output is architectural guidance and code patterns rather than a generated application.
When to use it: Use when designing reusable component libraries, building large-scale React applications, or establishing reusable UI patterns and custom hooks. Also relevant when optimizing component structure and maintainability.
Requirements: No scripts or runtime required beyond the agent; the skill is instructions and reference documents. TypeScript and React are the subject matter, not execution dependencies.

Overview

Build scalable, maintainable React components using modern patterns including functional components, hooks, composition, and TypeScript for type safety.

When to Use

Component library design
Large-scale React applications
Reusable UI patterns
Custom hooks development
Performance optimization

Quick Start

Minimal working example:

typescript

// Button.tsximport React, { useState, useCallback } from 'react';
interface ButtonProps {  variant?: 'primary' | 'secondary' | 'danger';  size?: 'sm' | 'md' | 'lg';  disabled?: boolean;  onClick?: () => void;  children: React.ReactNode;}
export const Button: React.FC<ButtonProps> = ({  variant = 'primary',  size = 'md',  disabled = false,  onClick,  children}) => {  const variantStyles = {    primary: 'bg-blue-500 hover:bg-blue-600',    secondary: 'bg-gray-500 hover:bg-gray-600',    danger: 'bg-red-500 hover:bg-red-600'  };
  const sizeStyles = {// ... (see reference guides for full implementation)

// Button.tsximport React, { useState, useCallback } from 'react';
interface ButtonProps {  variant?: 'primary' | 'secondary' | 'danger';  size?: 'sm' | 'md' | 'lg';  disabled?: boolean;  onClick?: () => void;  children: React.ReactNode;}
export const Button: React.FC<ButtonProps> = ({  variant = 'primary',  size = 'md',  disabled = false,  onClick,  children}) => {  const variantStyles = {    primary: 'bg-blue-500 hover:bg-blue-600',    secondary: 'bg-gray-500 hover:bg-gray-600',    danger: 'bg-red-500 hover:bg-red-600'  };
  const sizeStyles = {// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
Functional Component with Hooks [blocked]	Functional Component with Hooks
Custom Hooks Pattern [blocked]	Custom Hooks Pattern
Composition Pattern [blocked]	Composition Pattern
Higher-Order Component (HOC) [blocked]	Higher-Order Component (HOC)
Render Props Pattern [blocked]	Render Props Pattern

Best Practices

✅ DO

Follow established patterns and conventions
Write clean, maintainable code
Add appropriate documentation
Test thoroughly before deploying

❌ DON'T

Skip testing or validation
Ignore error handling
Hard-code configuration values

Source and attribution

Source:aj-geddes/useful-ai-promptsinskills/react-component-architectureat commit3f5182c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

React Component Architecture

React Component Architecture

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

Source and attribution

More from aj-geddes/useful-ai-prompts

Xss Prevention

Wireframe Prototyping

Web Performance Optimization

Vue Application Structure

Visual Regression Testing

User Persona Creation

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices