ck:frontend-development

Structure a scalable React and TypeScript frontend by organizing features into api/, components/, hooks/, and types/ directories. This enforces strict TypeScript typings, explicit prop interfaces, and consistent import aliases to reduce boilerplate and ensure maintainability across teams.

Handle React loading states by fetching data with useSuspenseQuery and wrapping components in Suspense boundaries. This approach simplifies loading state management and unifies error handling across your application without manual loading boilerplate.

Improve initial load performance in a React application by applying lazy loading for routes and components. Combined with Suspense boundaries, lazy loading defers rendering non-critical resources until they are explicitly needed by the user's navigation.

Yes, the framework explicitly integrates TanStack Router for routing and MUI v7 for styling. It enforces consistent styling using the MUI sx prop alongside strict TypeScript typings and explicit prop interfaces for cohesive UI patterns.

Enforce consistent TypeScript typings by applying strict type rules and defining explicit prop interfaces using React.FC. This framework standardizes these patterns alongside import alias conventions to ensure maintainable, unified code across development teams.

Use useSuspenseQuery instead of manual state management to unify data fetching and error handling within Suspense boundaries. This modern React pattern eliminates isolated loading boilerplate, simplifying component logic and ensuring consistent UI rendering states.