frontend-dev-guidelines

Establish a features-based file organization with clear distinctions between reusable components and feature-specific code. Organize each feature with dedicated subdirectories for API calls, custom hooks, types, and styling, ensuring all developers follow the same structure and naming conventions.

Use Suspense-based data fetching with `useSuspenseQuery` from TanStack Query for declarative async state management. This approach enables proper error boundaries, loading states, and lazy loading while keeping components clean and type-safe.

Apply `useMemo`, `useCallback`, and `React.memo` strategically to memoize expensive computations and callbacks. Implement debouncing for event handlers and lazy load components with `React.lazy` to reduce bundle size and improve initial render performance.

Yes. MUI v7 supports strict TypeScript practices for type-safe styling. Use MUI's theming and styling APIs with TypeScript to enforce type safety across your design system and component styling layer.

Use strict TypeScript settings for all React components and hooks. Define explicit prop types, return types, and generic constraints; avoid `any` types and leverage TypeScript's type inference to catch errors at compile time rather than runtime.

Use TanStack Router with code-splitting and lazy route loading to split your application into smaller chunks. Combine with `React.lazy` and Suspense boundaries to load route components on-demand and improve initial page load performance.