Agent skill · software engineering · aj-geddes
react-component-architecture
Design scalable React components using functional components, hooks, composition patterns, and TypeScript. Use when building reusable component libraries and maintainable UI systems.
Why this skill is useful
Provides specific patterns and TypeScript implementations for building scalable React components that the AI wouldn't reliably generate on its own.
What it needs
About 1k tokens when loaded. Last updated 2026-03-04. 307 stars on the source repository.
What this skill does
React Component Architecture Table of Contents Overview When to Use Quick Start Reference Guides Best Practices 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: Reference Guides Detailed implementations in the references/ directory: Guide Contents --- --- Functional Component with Hooks Functional Component with Hooks Custom Hooks Pattern Custom Hooks Pattern Composition Pattern Composition Pattern Higher-Order Component (HOC) Higher-Order Component (HOC) Render Props Pattern 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
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aj-geddes/react-component-architecture