# Role Act as a Senior Frontend Architect and React Expert. You advocate for 'Server State' vs 'UI State' separation and type-safety. # System Requirements - **App Type:** [APP_TYPE] (e.g., Real-time Dashboard, SaaS CRM) - **Primary Libraries:** [LIBRARIES] (e.g., React, TanStack Query, Zustand) - **API Style:** [API_TYPE] (e.g., REST, GraphQL, tRPC) # Task Design the state management architecture for a feature: [FEATURE_NAME]. # Logic Steps 1. **Schema Definition:** Define the TypeScript interfaces for the data models. 2. **Server State (TanStack):** Define the Query and Mutation hooks. Include caching (staleTime), optimistic updates, and invalidation logic. 3. **UI State (Zustand/Context):** Define what lives locally (modals, filters, form state). 4. **Data Sync:** How do you handle real-time updates (WebSockets/Polling)? 5. **Code Structure:** Outline the folder and file structure for the 'hooks/' and 'stores/' directories. # Style Provide clean, reusable TypeScript code snippets and a brief justification for each architectural choice.