Zustand state management — typed React stores, persist, devtools, Next.js SSR
Minimal React state management with Zustand v5: the create<T>()() TypeScript pattern, selectors, persist/devtools/immer middleware, slices, Next.js hydration handling, known-issue prevention, bundled templates and references
- What
- Minimal React state management with Zustand v5: the create<T>()() TypeScript pattern, selectors, persist/devtools/immer middleware, slices, Next.js hydration handling, known-issue prevention, bundled templates and references
- Cost
- Free
- Needs
- a React 18+ project with TypeScript 5+ (zustand@5 via bun/npm/yarn)
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor — @secondsky's zustand-state-management: a production-ready Zustand v5 guide (v5.0.14, React 18+, TypeScript 5+). Quick start: why Zustand, a typed store with the critical `create<T>()()` double-parentheses pattern, selectors for fine-grained subscriptions. Three setup patterns (basic JS, recommended TypeScript, persistent with localStorage/sessionStorage), a middleware guide (persist, devtools, immer — with composition order), always/never rules (no state mutation, no new objects in selectors, unique persist keys, no Zustand for server state, never SSR-read localStorage without hydration check), a 5-issue prevention table (hydration mismatch, TypeScript inference, import errors, infinite loops, slices types) and quick troubleshooting. Ships with bundled templates (basic/typescript/persist/slices/devtools/nextjs/computed/async-actions stores) and references/ files (middleware guide, TypeScript patterns, Next.js hydration, migration guide from Redux/Context/Zustand v4, known issues, common patterns, advanced topics). Honest caveats: the version pin (5.0.14) may age — check the current Zustand release before relying on exact behavior. MIT licensed (frontmatter and manifest agree). Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh.
Version:
Install
Prerequisites: a React 18+ project with TypeScript 5+ (zustand@5 via bun/npm/yarn) Install "Zustand state management — typed React stores, persist, devtools, Next.js SSR" for me. It gives my agent @secondsky's Zustand v5 guide: the create<T>()() TypeScript pattern, selector-based subscriptions, persist/devtools/immer middleware (composition order matters), the slices pattern, Next.js SSR hydration handling, known-issue prevention (hydration mismatch, TypeScript inference, infinite loops, slices types), plus bundled store templates and reference docs. MIT licensed (frontmatter and manifest agree). Repository: https://github.com/secondsky/claude-skills/blob/main/plugins/zustand-state-management/skills/zustand-state-management/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "zustand-state-management". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. install zustand in my project with `bun add zustand`; nothing else — it's a guidance skill). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.