frontend-dev-guidelines

Organize code into `features/` and `components/` directories with a feature-oriented structure. This modular approach promotes reusability, maintainability, and scalability across large codebases while ensuring consistent implementation patterns across your team.

Use `useSuspenseQuery` from TanStack Query to fetch data with built-in Suspense support, eliminating manual loading states. Combine with Suspense boundaries to handle async operations cleanly and improve user experience through proper data fetching patterns.

Apply `useMemo`, `useCallback`, and `React.memo` to prevent unnecessary re-renders, optimize computations, and avoid memory leaks. Implement debouncing for expensive operations to maintain application performance at scale.

Yes. MUI v7 integrates seamlessly with TanStack Router and lazy loading patterns. This skill specifies type-safe conventions for sx-based styling, routing configuration, and lazy-loaded components that work together across modern React/TypeScript applications.

Enforce type-safe patterns throughout your codebase using TypeScript, including properly typed props, hooks, and data fetching. This prevents runtime errors and ensures consistency across components, pages, and feature implementations.

Lazy loading reduces initial bundle size and improves performance by code-splitting features. Alias imports improve code readability and maintainability by replacing relative paths with clean, absolute import paths across your feature-oriented structure.