frontend-development

React components should follow React.FC<Props> patterns with TypeScript strict typing, no undefined types, and proper prop interfaces. This ensures type safety and maintainability across your frontend codebase while preventing runtime errors from missing or incorrect props.

Use Suspense-based data fetching with useSuspenseQuery and lazy loading via React.lazy and SuspenseLoader. This pattern improves performance by deferring component rendering until data arrives, reducing initial load time and enhancing user experience.

Organize code using feature-based directories and TanStack Router for type-safe routing. This structure scales across pages, components, and features while maintaining clear separation of concerns and making codebase navigation intuitive.

Yes, MUI v7 styling integrates with React/TypeScript projects via sx-based styling patterns. This approach provides type-safe, scoped styling directly on components while maintaining consistency with Material-UI design systems.

Testing guidance covers component validation and integration patterns specific to React/TypeScript. Performance optimization focuses on lazy loading, code splitting, and efficient data fetching to maintain responsive user interfaces at scale.

Frontend guidelines enforcement automates standards for components, pages, features, data fetching, styling, and routing. This ensures all developers follow the same patterns, reducing code review friction and maintaining a cohesive, maintainable codebase.