separation-of-concerns

What problem does it solve?

Mixed concerns in UI code create untestable, hard-to-maintain components. This Skill enforces the Iron Rule: never mix data fetching, business logic, and presentation in a single place.

Core Features & Use Cases

• Separated data layer: move data fetching into hooks or services.
• Pure logic layer: implement business rules and data transformations as pure functions.
• Presentation layer: build dumb UI components that render from props.
• Composition: use a container to connect layers, handle loading and errors, and compose final UI.
• Real-world use case: refactor a monolithic UserProfile component into a data hook, a formatter, a presentational card, and a container.

Quick Start

1. Identify a monolithic component that fetches data, runs logic, and renders UI.
2. Extract data fetching into a dedicated hook or service.
3. Move business logic into pure functions that transform data.
4. Create presentational components that render from props.
5. Build a container to compose the layers and manage loading and error states.