frontend-dev-guidelines

Organize your React/TypeScript project using a features-based structure that separates feature directories from shared components, implements Suspense-based data fetching with useSuspenseQuery, applies MUI v7 styling via sx props, and uses TanStack Query and Router for data and navigation management to ensure consistency and scalability.

Use useSuspenseQuery for Suspense-integrated data fetching in React, pair it with React.lazy and SuspenseLoader for lazy-loaded components, and follow TypeScript best practices with React.FC typing to enable automatic loading states and error boundaries without manual loading logic.

Apply React performance patterns including useMemo, useCallback, and React.memo to memoize values and functions, implement debouncing via use-debounce for input handling, and follow guidelines on component composition to eliminate unnecessary renders and memory leaks.

Yes, this Skill guides integrating MUI v7 styling with sx configuration, TanStack Query for data management, and TanStack Router for navigation within a single React/TypeScript application, ensuring all three work cohesively in a features-based structure.

Use React.FC with TypeScript for type-safe component declarations, apply strict TypeScript typing to hooks like useSuspenseQuery, integrate react-hook-form with zod validation for form handling, and follow feature-based organization to maintain type safety across your codebase.

Configure TanStack Router following this Skill's guidelines for route structure, combine it with lazy loading and Suspense for code splitting, and organize routes within a features-based directory structure to keep routing logic modular and maintainable.