frontend-dev-guidelines

Structure React components using a feature-based folder organization to isolate related UI logic. This approach enhances maintainability by keeping feature-specific components, hooks, and utilities grouped together rather than separated by technical file type.

Manage server state in TypeScript applications using TanStack Query for data fetching and caching, while utilizing Zustand for lightweight client state management. This separation ensures predictable state updates and optimized rendering cycles.

Implement accessibility in React by mandating semantic HTML elements, ensuring proper form labeling, and enabling full keyboard navigation. These practices guarantee that UI components are perceivable and operable for users relying on assistive technologies.

Yes, TypeScript is required to apply these frontend development standards. The guidelines enforce type-safe React implementations, ensuring component structure and state management logic maintain strict consistency and unified developer experiences.

Use TanStack Query and Zustand instead of React Context to avoid unnecessary re-renders and complex provider nesting. This combination delivers specialized server state caching and decoupled client state management, improving component consistency.

Avoid a feature-based folder structure in React only when building extremely small or isolated utilities where the overhead of feature isolation outweighs the navigational benefits. For scalable applications, this structure remains essential for maintainability.