frontend-dev-guidelines

Organize your React project with `features/` and `components/` directories, use alias imports, apply TypeScript best practices, and enforce React.FC<Props> patterns. This modular structure improves code reusability, scalability, and makes maintenance easier across large applications.

Use `useSuspenseQuery` with Suspense boundaries to eliminate manual loading states and prevent layout shifts. This approach standardizes async data handling, reduces boilerplate code, and provides a cleaner component interface for handling pending and error states.

Use MUI v7's `sx` prop for inline styling or maintain separate styling files based on component complexity. This approach keeps styling scoped, maintainable, and consistent across your application while leveraging MUI's theming system.

Yes, TanStack Query's `useSuspenseQuery` hook integrates directly with Suspense boundaries, enabling you to manage server state with automatic caching, retry logic, and synchronization without manual loading state management.

Use TanStack Router for file-based routing that integrates with your feature-driven file structure. This provides type-safe routes, lazy loading support, and automatic code splitting aligned with your component and feature organization.

Combine Suspense boundaries with error boundaries to implement robust loading and error handling patterns. Suspense manages pending states while error boundaries catch failures, providing consistent user feedback and preventing cascading component failures.