frontend-implementation-guard

What problem does it solve?

Component logic often sprawls across render methods and event handlers, making components hard to test and reuse. This guard helps keep React components focused, with business logic moved to hooks, and with state placed at the appropriate scope.

Core Features & Use Cases

• Enforces single-responsibility component design and clean separation of concerns.
• Encourages moving business logic to custom hooks or services, and using TanStack Query for server data.
• Guides proper state placement, avoids overuse of Context for frequently-updated data, and promotes discriminated props for variant rendering.
• Applies to writing or reviewing component-level code, hooks, and client-side data fetching in React projects.

Quick Start

Create or review a small React component that follows the guard's rules for focused state, hook discipline, and client-side data fetching.