What problem does it solve? Setting up Zustand state management in a TypeScript React project often leads to inconsistent patterns, missing type safety, and unnecessary component re-renders. This Skill enforces established conventions so every store follows the same typed, selector-based structure. ## Core Features & Use Cases - Typed Store Scaffolding: Separates State and Actions interfaces and combines them into a single store type for full TypeScript safety. - Middleware Enforcement: Always wraps stores with subscribeWithSelector, enabling fine-grained subscriptions outside React components. - Render Optimization Guidance: Promotes individual selectors over whole-store destructuring to prevent unnecessary re-renders. - Use Case: When adding a new feature to the chat app frontend, generate a properly typed store in src/frontend/src/store/, export it from the index barrel file, and add matching tests. ## Quick Start Ask the AI to create a new Zustand store for your feature following the project patterns, for example: create a Zustand store named Conversation with typed state and actions.
