React Component Architecture

Gives you patterns for building React components the right way: functional components with hooks, composition over inheritance, TypeScript props, and custom hooks. The reference guides cover practical implementations like HOCs and render props, which is helpful when you're setting up a component library or trying to keep a large React app from turning into spaghetti. It's opinionated toward modern React (no class components here), which is good because that's what you should be writing anyway. Best for greenfield projects or refactoring existing codebases where you want consistent patterns across your team.

skills.sh installs: 683
GitHub stars: 379
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add aj-geddes/useful-ai-prompts --skill react-component-architecture --agent claude-code

Installs into .claude/skills of the current project.

Files

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:

// Button.tsx
import 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'
  };

SKILL.md on GitHub