Agent skill · software engineering · secondsky
zustand-state-management
Zustand state management for React with TypeScript. Use for global state, Redux/Context API migration, localStorage persistence, slices pattern, devtools, Next.js SSR, or encountering hydration errors, TypeScript inference issues, persist middleware problems, infinite render loops.
Why this skill is useful
Provides specific patterns and TypeScript interfaces for Zustand state management that enhance React applications, which the AI may not generate accurately on its own.
What it needs
Requires zustand installed locally. About 5k tokens when loaded. Last updated 2026-08-06. 204 stars on the source repository.
What this skill does
Zustand State Management Status: Production Ready ✅ Last Updated: 2026-08-03 Latest Version: zustand@5.0.14 Dependencies: React 18+, TypeScript 5+ --- Quick Start (3 Minutes) 1. Install Zustand Why Zustand? Minimal API: Only 1 function to learn (create) No boilerplate: No providers, reducers, or actions TypeScript-first: Excellent type inference Fast: Fine-grained subscriptions prevent unnecessary re-renders Flexible: Middleware for persistence, devtools, and more 2. Create Your First Store (TypeScript) CRITICAL: Notice the double parentheses create<T>()() - this is required for TypeScript with middleware. 3. Use Store in Components Why this works: Components only re-render when their selected state changes No Context providers needed Selector function extracts specific state slice --- The 3-Pattern Setup Process Pattern 1: Basic Store (JavaScript) For simple use cases without TypeScript: When to use: Prototyping Small apps No TypeScript in project Pattern 2: TypeScript Store (Recommended) For production apps with type safety: Key Points: Separate interface for state + actions Use create<T>()() syntax (currying for middleware) Full IDE autocomplete and type checking Pattern 3: Persistent Store For state that survives page reloads: Why this matters: State automatically saved to localStorage Restored on page reload Works with sessionStorage too Handles serialization automatically --- Critical Rules Always Do ✅ Use create<T>()() (double parentheses) in TypeScript for middleware compatibility ✅ Define separate interfaces for state and actions ✅ Use selector functions to extract specific state slices ✅ Use set with updater functions for derived state: set((state) => ({ count: state.count + 1 })) ✅ Use unique names for persist middleware storage keys ✅ Handle Next.js hydration with hasHydrated flag pattern ✅ Use shallow for selecting multiple values ✅ Keep actions pure (no side effects except state updates) Never Do ❌ Use create<T>(...) (single parentheses) in TypeScript …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills secondsky/zustand-state-management