presentational-components

What problem does it solve?

This Skill enforces a strict separation between UI presentation and data logic in React applications, leading to more maintainable, testable, and reusable code.

Core Features & Use Cases

• Enforces Presentational Components: Ensures UI components only receive data via props and trigger actions via callbacks, preventing direct data fetching or side effects within them.
• Promotes Domain-Focused Hooks: Guides the creation of reusable hooks named after the data domain (e.g., useCommunity) rather than specific UI components.
• Use Case: When building a new feature with multiple components that display user data and allow interactions like editing or deleting, use this skill to ensure a clean architecture where components are easily testable and reusable.

Quick Start

Review the current component architecture to ensure all data is passed via props and actions are handled by callbacks.