frontend-dev-guidelines

React frontend development uses a feature-based directory structure under features/ and applies import aliases like /@ and ~features. This file organization standardizes coding standards, reduces cognitive load, and accelerates onboarding when building new components and pages.

Data fetching in modern React uses Suspense-based patterns with the useSuspenseQuery hook. This approach standardizes asynchronous data retrieval and component rendering delays, ensuring consistent performance across the frontend application.

TanStack Router routing for React and TypeScript projects is configured using pattern-centric guidelines that enforce consistent navigation structures. These standards apply specifically during page creation and routing tasks to maintain application coherence.

MUI v7 works with TypeScript for styling React components by applying the sx prop directly. This method standardizes styling practices across the team, ensuring consistent visual implementation during feature creation.

Standardized frontend guidelines should be applied when starting any new frontend feature, component, or page to ensure scalable code. They establish project structure, import conventions, and data-fetching patterns, reducing technical debt across team workflows.