frontend-dev-guidelines

Modern React projects benefit from organizing code into features/ and components/ directories, using TypeScript for type safety, and following standardized patterns for styling, routing, and data fetching. This Skill provides an opinionated guide covering MUI v7 styling, TanStack Router, and component organization best practices to establish a robust, consistent architecture across your team.

Suspense-based data fetching with useSuspenseQuery from TanStack Query eliminates callback-based patterns and enables cleaner component logic. This Skill covers implementing Suspense for lazy loading, streaming data, and error boundaries, ensuring your React app renders efficiently without blocking the UI.

Use React.FC with explicit prop typing and Zod for validation to catch errors at compile time and runtime. This Skill guides you through typed prop patterns, component structure, and file naming conventions that reduce bugs and make refactoring safer across your frontend codebase.

Yes. TanStack Router and TanStack Query (React Query) work synergistically for routing and data fetching. This Skill shows how to integrate both with TypeScript, lazy-loaded components, and Suspense to build fast, maintainable React applications with minimal boilerplate.

Lazy loading, Suspense-based data fetching, consistent file structure, and explicit TypeScript typing reduce refactoring cycles and review friction. This Skill consolidates these patterns into a unified guide so teams follow the same high-quality standards from day one.

This Skill applies to both new projects and refactoring efforts. Whether starting fresh or upgrading an existing React/TypeScript app, you can adopt its patterns incrementally—component organization, MUI v7 styling, TanStack tooling, and Suspense-based data fetching—to gradually improve code quality and performance.