Zustand State Management
Stand up type-safe Zustand stores with persist, devtools, slices, and Next.js SSR hydration patterns without Redux boilerplate.
Overview
zustand-state-management is an agent skill for the Build phase that implements type-safe global React state with Zustand, middleware, and Next.js hydration safeguards.
Install
npx skills add https://github.com/jezweb/claude-skills --skill zustand-state-managementWhat is this skill?
- TypeScript-first create store patterns with StateCreator and bound hooks
- Persist and devtools middleware setup with documented pitfalls
- Slices pattern for scaling multiple domains in one store
- Next.js SSR hydration handling to avoid text-content mismatch
- Guides for 6 documented failure modes (hydration, inference, loops, persist races)
- 6 documented errors prevented
- Skill version 1.0.0
- Production-tested note dated 2025-10-24
Adoption & trust: 1.3k installs on skills.sh; 841 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need shared React state without Redux weight but keep hitting hydration errors, weak TypeScript inference, or persist middleware race conditions.
Who is it for?
Indie SaaS and dashboard builders on React or Next.js who want persisted, debuggable global state with minimal ceremony.
Skip if: Server-only state, React Server Components data fetching without client stores, or greenfield apps that only need local useState on a single screen.
When should I use this skill?
Setting up React global state, migrating from Redux/Context, or fixing hydration, TypeScript inference, infinite render loops, or persist race conditions with Zustand.
What do I get? / Deliverables
You get a documented Zustand store layout—selectors, middleware, and SSR-safe hydration—aligned to your stack and free of the six called-out error patterns.
- Zustand store module(s) with typed actions and selectors
- Middleware configuration for persist and/or devtools when requested
Recommended Skills
Journey fit
How it compares
Opinionated Zustand recipes and error guards—not a full Redux migration toolkit or backend session store.
Common Questions / FAQ
Who is zustand-state-management for?
React and Next.js developers using coding agents who want Zustand stores with TypeScript, persist, devtools, and slices without trial-and-error on hydration and inference bugs.
When should I use zustand-state-management?
Use it in Build frontend when creating a new global store, migrating from Redux or Context, adding persist/devtools, or debugging hydration mismatch and infinite rerender issues in Zustand.
Is zustand-state-management safe to install?
It is documentation and patterns only—review the Security Audits panel on this Prism page and audit any generated store code before persisting secrets client-side.
SKILL.md
READMESKILL.md - Zustand State Management
{ "name": "zustand-state-management", "description": "Build type-safe global state in React with Zustand. Supports TypeScript, persist middleware, devtools, slices pattern, and Next.js SSR with hydration handling. Prevents 6 documented errors. Use when setting up React state, migrating from Redux/Context, or troubleshooting hydration errors, TypeScript inference, infinite render loops, or persist race conditions.", "version": "1.0.0", "author": { "name": "Jeremy Dawes", "email": "jeremy@jezweb.net" }, "license": "MIT", "repository": "https://github.com/jezweb/claude-skills", "keywords": [] } # Zustand State Management **Status**: Production Ready ✅ **Last Updated**: 2025-10-24 **Production Tested**: Used across 2025 React ecosystem, React 19 compatible --- ## Auto-Trigger Keywords Claude Code automatically discovers this skill when you mention: ### Primary Keywords - zustand - zustand state management - state management React - create store - useBoundStore - zustand v5 - StateCreator ### Secondary Keywords - global state React - React state management - persist middleware - devtools middleware - slices pattern - zustand TypeScript - zustand hooks - useState alternative - Redux alternative - Context API alternative - localStorage state - sessionStorage state - shallow equality - selector pattern - zustand immer ### Error-Based Keywords - "hydration error" zustand - "text content mismatch" zustand - "TypeScript inference" zustand - "infinite render" zustand - "StateCreator" types - "create<T>()" syntax - "createJSONStorage not exported" - "persist middleware error" - "Next.js hydration" zustand --- ## What This Skill Does Provides production-tested patterns for Zustand state management in React with TypeScript. Covers basic setup, middleware configuration (persist, devtools), slices pattern for modular stores, Next.js SSR handling, and advanced TypeScript patterns. ### Core Capabilities ✅ **TypeScript Setup** - Correct `create<T>()()` syntax with full type inference ✅ **Persist Middleware** - localStorage/sessionStorage with hydration handling ✅ **Slices Pattern** - Modular store organization for large apps ✅ **Next.js Integration** - SSR-safe stores with hydration checks ✅ **Devtools** - Redux DevTools integration for debugging ✅ **Common Patterns** - Async actions, computed values, selectors, resets ✅ **Error Prevention** - Prevents 5 documented issues with production-tested solutions ✅ **8 Templates** - Ready-to-use store patterns for every use case --- ## Known Issues This Skill Prevents | Issue | Why It Happens | Source | How Skill Fixes It | |-------|---------------|---------|-------------------| | Next.js Hydration Mismatch | Persist middleware reads localStorage on client but not server | [DEV.to](https://dev.to/abdulsamad/how-to-use-zustands-persist-middleware-in-nextjs-4lb5) | `_hasHydrated` flag pattern | | TypeScript Double Parentheses | Missing currying syntax breaks middleware types | [Official TypeScript Guide](https://zustand.docs.pmnd.rs/guides/typescript) | Always use `create<T>()()` | | Persist Import Error | Wrong import path or version mismatch | GitHub #2839 | Correct imports for v5 documented | | Infinite Render Loop | Creating new objects in selectors | GitHub #2642 | Use `shallow` or select primitives | | Slices TypeScript Complexity | Complex `StateCreator` types fail | [Official Slices Guide](https://github.com/pmndrs/zustand/blob/main/docs/guides/slices-pattern.md) | Explicit type annotations provided | --- ## When to Use This Skill ### ✅ Use When: - Setting up global state in React applications - Migrating from Redux or Context API to simpler solution - Need state persistence (localStorage/sessionStorage) - Building type-safe stores with TypeScript - Working with Next.js and need SSR-safe state - Want devtools integration for debugging - Building large apps needing modular store architecture (slices) - Encountering hydration errors or TypeScript issues ###