frontend-dev-guidelines

Modern React components use features-directory organization, strict TypeScript typing, and Suspense-based data fetching with useSuspenseQuery. This ensures consistent structure, type safety, and proper async handling across your ActionPhase frontend codebase.

Use TanStack Query's useSuspenseQuery for server state management with built-in caching and synchronization. Combine with React Router lazy loading to avoid unnecessary re-renders and fetch data only when components render.

Apply useMemo, useCallback, and React.memo to prevent unnecessary re-renders, implement debouncing with use-debounce for frequent events, and use lazy loading with code splitting. These patterns reduce bundle size and improve runtime performance.

Yes. Tailwind CSS integrates with CSS variables for dynamic theming and dark mode support. Define theme tokens as CSS variables and apply them through Tailwind utilities to maintain consistency across components without style duplication.

Use react-hook-form for efficient form state management paired with Zod for schema-based validation. This combination provides type-safe validation, minimal re-renders, and clear error handling integrated with your component logic.

Use features-directory organization where each feature contains its own components, pages, hooks, and types. This structure scales with your application, keeps related code co-located, and makes navigation and maintenance straightforward.