frontend-dev-guidelines

Organize your project under a features/ directory, where each feature contains api/, components/, hooks/, types/, and routes/ subdirectories. This architecture standardizes file organization, improves maintainability, and scales across components, pages, and routing while following React/TypeScript best practices.

Use useSuspenseQuery to standardize data loading and wrap components in Suspense boundaries. This approach eliminates boilerplate, provides consistent error handling, and enables automatic loading states without manual useState logic.

Use the sx prop for theme-aware, type-safe styling in MUI v7. This pattern ensures consistency across components, integrates with your design system, and reduces CSS file overhead while maintaining performance.

Yes. TanStack Router provides typed, breadcrumb-friendly routes for React/TypeScript projects. It eliminates string-based route definitions, catches routing errors at compile time, and integrates with the feature directory structure.

Apply lazy loading, memoization, and efficient rendering patterns as defined in the guidelines. These techniques reduce bundle size, prevent unnecessary re-renders, and maintain scalability as your application grows.

The guidelines apply to planning, coding, reviewing, and maintaining components across both new and existing projects. You can incrementally adopt patterns for new features or refactor existing code to align with the standardized approach.