frontend-dev-guidelines

Organize your React/TypeScript project using feature-based directories, enforce strict type safety with TypeScript conventions, implement Suspense-based data fetching with TanStack Query, use lazy loading for components, and style with MUI v7. This structure reduces inconsistency, prevents common anti-patterns, and ensures performance optimization across your codebase.

Use `useSuspenseQuery` from TanStack Query to fetch data with Suspense boundaries, centralizing API services for consistency. This approach enables efficient rendering, prevents memory leaks, and integrates Suspense-based data fetching patterns that improve perceived performance and reduce loading-state complexity.

Use the component creation checklist: define strict TypeScript types, apply MUI v7 styling consistently, organize files in your feature directory, implement memoization where needed, and follow established component patterns. This ensures your components adhere to best practices from creation and reduces debugging time.

Yes, TanStack Router works with TypeScript React applications for type-safe routing. This Skill provides guidance on integrating TanStack Router within your feature-based folder organization, ensuring consistent routing patterns and maintaining strict type safety across your navigation layer.

Optimize rendering with memoization, implement lazy loading for code splitting, use Suspense for data fetching, prevent memory leaks through proper cleanup, and enforce strict TypeScript standards to catch errors early. These techniques collectively reduce bundle size and improve runtime performance.