frontend-dev-guidelines

Frontend development guidelines for React/TypeScript with modern patterns like Suspense, lazy loading, MUI v7, and TanStack Router.

• Guidelines for modern React/TypeScript development
• Best practices for components, data fetching, routing, styling, and file organization
• Emphasis on Suspense, lazy loading, and performance optimization
• Use with new components, features, data fetching, routing, styling, and code structure

• Use Suspense boundaries for data fetching with useSuspenseQuery
• Lazy load heavy components with React.lazy() and wrap in <SuspenseLoader>
• File organization with features/ directory and subdirectories: api, components, hooks, helpers, types
• MUI v7 styling with sx prop and type-safe SxProps<Theme>
• TanStack Router with folder-based routing and lazy loading
• Critical rule: no early returns with loading spinners
• Use useMuiSnackbar for error/feedback, not react-toastify
• Import aliases: @/, ~types, ~components, ~features

1. 1.Create component with React.FC<Props> and lazy load if heavy
2. 2.Wrap in <SuspenseLoader> and use useSuspenseQuery for data
3. 3.Set up feature structure with subdirectories and export public API
4. 4.Use import aliases and follow import patterns
5. 5.Apply loading state rules: never early return, always use SuspenseLoader