frontend-dev-guidelines

Suspense-based data fetching uses `useSuspenseQuery` from TanStack Query to handle loading states automatically. Define your component with a props interface, fetch data with `useSuspenseQuery`, wrap it in `<SuspenseLoader>`, and export via `React.lazy` for code splitting. This eliminates manual `isLoading` checks and simplifies data management.

Use Feature-Sliced Design with explicit folder structures: organize code into `features`, `entities`, and `shared` directories. This approach improves maintainability, reduces naming conflicts, and enforces consistent file organization across your React application.

Yes. This Skill provides integrated best practices for using TanStack Query for data fetching, TanStack Router for routing, and MUI v7 for styling in a cohesive React TypeScript stack. React Hook Form with Zod validation complements this tooling for form handling.

Apply performance optimization by using lazy loading with `React.lazy`, memoization with `useMemo` and `useCallback`, and component-level memoization with `React.memo`. These patterns reduce unnecessary re-renders and improve application speed.

Follow the New Component Checklist: define a props interface with JSDoc, use `useSuspenseQuery` for data fetching, wrap components in `<SuspenseLoader>`, and export with `React.lazy`. Organize code into feature-based folders and enforce strict TypeScript with consistent alias conventions.

Yes. Strict TypeScript usage is enforced as part of these guidelines to catch type errors at compile time and improve code reliability. Paired with JSDoc annotations and consistent alias conventions, it ensures maintainable and predictable React applications.