Frontend Layer Separation

A reusable decision-rule skill for React/Next.js projects: where does new code belong, and why? Enforces strict separation between presentation, state orchestration, business logic, pure utilities, and type definitions.

Why Layer Separation Matters

Without clear boundaries:

• Business logic scatters across components, making it untestable without mocking React
• Types duplicate in multiple files, creating sync nightmares
• API calls and state management hide inside JSX, tangling concerns
• Refactoring becomes risky because dependencies are implicit
• Mock vs. real implementations diverge

With clear layers:

• Components focus on render logic (props in, JSX out)
• Hooks handle state/effects orchestration without rendering
• Pure helpers are testable without any framework
• API adapters are swappable (mock/real, old/new endpoints)
• Types are single sources of truth