React component architecture
Skill ulpi-io/plugin-marketplace/plugins/aj-geddes/skills/react-component-architecture
A curated collection of 7,800+ agent skills for Claude Desktop, sourced from skills.sh
npx -y skills add ulpi-io/plugin-marketplace --skill react-component-architectureAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Design scalable React components using functional components, hooks, composition patterns, and TypeScript. Use when building reusable component libraries and maintainable UI systems.
SKILL.md
2.3 KB, as published. Nobody here has run it
React Component Architecture
Table of Contents
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'
};
const sizeStyles = {
// ... (see reference guides for full implementation)
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