What problem does it solve? Setting up Zustand correctly in React projects involves subtle pitfalls: TypeScript middleware typing breaks without the curried create<T>()() syntax, Next.js apps hit hydration mismatches with persisted state, and naive selectors cause infinite render loops. This Skill provides production-tested patterns that prevent these documented issues. ## Core Features & Use Cases - Typed Store Patterns: Three setup patterns (basic JavaScript, TypeScript, and persistent stores) with correct create<T>()() syntax and interface separation. - Middleware Configuration: Ready-made setups for persist (localStorage), devtools (Redux DevTools), immer, and custom middleware composition. - Issue Prevention: Documented fixes for five known issues including Next.js hydration mismatch, infinite render loops, and slices pattern typing. - Use Case: When building a Next.js app that needs user preferences persisted across reloads, apply the _hasHydrated flag pattern with the persist middleware to avoid SSR hydration errors. ## Quick Start Ask the agent to create a TypeScript Zustand store with persist middleware for your React project.
