charhub-react-component-patterns

What problem does it solve?

CharHub frontend projects often suffer from inconsistent React component patterns, leading to inefficiencies, confusion, and onboarding friction. This Skill defines a cohesive set of conventions for component structure, naming, props typing, and usage patterns to improve maintainability and developer velocity.

Core Features & Use Cases

• Standardized component file structure and PascalCase naming for clarity and consistency.
• Props typing with interfaces, clear optional props, function props, defaults via destructuring, and robust type safety.
• Event handler naming with the handle prefix and guidance on useCallback memoization for performance.
• Children and render-prop patterns, enabling flexible composition and reuse.
• Rendering patterns: conditional rendering, early returns, and stable list rendering with unique keys.
• Component composition with small building blocks and reusable primitives (Avatar, Badge, etc.).
• Fragment pattern, portals for modals, and simple error boundaries to isolate failures.
• Styling approaches: className conventions, conditional classes, and Tailwind utility usage.
• Size guidelines to keep components focused and maintainable.
• Documentation patterns and the requirement that each component ships with a .docs.md file.

Quick Start

Apply these patterns when creating a new CharHub React component to ensure consistent structure, naming, and behavior.