ck:frontend-development

Structure scalable React frontends by separating project organization into features/ and components/ directories, applying strong TypeScript typing and MUI v7 styling conventions to ensure maintainable, consistent code across teams.

Implement Suspense-based data fetching by using the useSuspenseQuery hook to manage asynchronous states seamlessly. This pattern allows your React components to suspend rendering while loading data, providing a seamless loading experience without manual loading state management.

Set up TanStack Router by adopting its declarative, folder-based routing structure to manage navigation. This approach automatically generates routes from your file tree, allowing you to implement code splitting and lazy loading for routes and heavy components to optimize performance.

Yes, you can implement lazy loading and code splitting for both routes and heavy components. This architecture decision reduces initial bundle size and optimizes performance by loading resources only when required during navigation or component interaction.

Yes, the pattern guide satisfies specific requirements for typing and import alias conventions. It provides documented best practices and starter templates to enforce robust TypeScript usage and standardized import paths across your scalable React project architecture.