frontend-dev-guidelines

Structure your React TypeScript project by grouping related components, hooks, and APIs into a features directory. This approach ensures cohesive code organization, standardized component architecture, and consistent styling patterns across your application.

Implement lazy loading and Suspense boundaries by using React.lazy for component imports and wrapping them in Suspense tags. This pattern enforces standardized component structure, improves initial load performance, and integrates seamlessly with useSuspenseQuery for data fetching.

Configure TanStack Router by defining route trees and integrating them within your React application structure. This provides type-safe routing capabilities and enforces consistent navigation patterns across your features directory organization.

Yes, you can use MUI v7 styling patterns with React.FC and explicit props. This combination enforces a standardized component structure, ensuring cohesive styling and type safety while applying modern React TypeScript patterns consistently.

useSuspenseQuery works with Suspense boundaries by suspending component rendering until data is resolved. This pattern enforces standardized data fetching in React TypeScript projects, ensuring consistent loading states across components.