From ork
Provides Zustand 5.x patterns for React state management: slices, middleware, Immer, useShallow, persistence, selectors, devtools, async actions, and anti-patterns with TanStack Query integration. Use for global client state without boilerplate.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ork:zustand-patternshaikuThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Modern state management with Zustand 5.x - lightweight, TypeScript-first, no boilerplate.
checklists/zustand-checklist.mdexamples/zustand-examples.mdreferences/anti-patterns-and-integration.mdreferences/core-patterns.mdreferences/middleware-composition.mdrules/_sections.mdrules/_template.mdrules/zustand-middleware-order.mdrules/zustand-middleware-pitfalls.mdrules/zustand-slice-pattern.mdscripts/store-template.tstest-cases.jsonModern state management with Zustand 5.x - lightweight, TypeScript-first, no boilerplate.
Covers basic stores, slices, Immer, persist, selectors, async actions, and devtools.
Load Read("${CLAUDE_SKILL_DIR}/references/core-patterns.md") for full code examples of all 7 core patterns.
// ✅ Create typed store with double-call pattern
const useStore = create<State>()((set, get) => ({ ... }));
// ✅ Use selectors for all state access
const count = useStore((s) => s.count);
// ✅ Use useShallow for multiple values (Zustand 5.x)
const { a, b } = useStore(useShallow((s) => ({ a: s.a, b: s.b })));
// ✅ Middleware order: immer → subscribeWithSelector → devtools → persist
create(persist(devtools(immer((set) => ({ ... })))))
// ❌ Never destructure entire store
const store = useStore(); // Re-renders on ANY change
// ❌ Never store server state (use TanStack Query instead)
const useStore = create((set) => ({ users: [], fetchUsers: async () => ... }));
| Decision | Option A | Option B | Recommendation |
|---|---|---|---|
| State structure | Single store | Multiple stores | Slices in single store - easier cross-slice access |
| Nested updates | Spread operator | Immer middleware | Immer for deeply nested state (3+ levels) |
| Persistence | Manual localStorage | persist middleware | persist middleware with partialize |
| Multiple values | Multiple selectors | useShallow | useShallow for 2-5 related values |
| Server state | Zustand | TanStack Query | TanStack Query - Zustand for client-only state |
| DevTools | Always on | Conditional | Conditional - enabled: process.env.NODE_ENV === 'development' |
Forbidden patterns (store destructuring, derived state, server state, direct mutation) and React Query integration guidance.
Load Read("${CLAUDE_SKILL_DIR}/references/anti-patterns-and-integration.md") for anti-pattern examples and TanStack Query separation patterns.
tanstack-query-advanced - Server state management (use with Zustand for client state)form-state-patterns - Form state (React Hook Form vs Zustand for forms)react-server-components-framework - RSC hydration considerations with ZustandKeywords: zustand, create, store, typescript, state Solves: Setting up type-safe Zustand stores with proper TypeScript inference
Keywords: slices, modular, split, combine, StateCreator Solves: Organizing large stores into maintainable, domain-specific slices
Keywords: immer, persist, devtools, middleware, compose Solves: Combining middleware in correct order for immutability, persistence, and debugging
Keywords: selector, useShallow, re-render, performance, memoization Solves: Preventing unnecessary re-renders with proper selector patterns
Keywords: persist, localStorage, sessionStorage, migrate, version Solves: Persisting state with schema migrations between versions
Load on demand with Read("${CLAUDE_SKILL_DIR}/references/<file>"):
| File | Content |
|---|---|
core-patterns.md | Basic store, slices, Immer, persist, selectors, async, devtools |
anti-patterns-and-integration.md | Forbidden patterns and React Query integration |
middleware-composition.md | Combining multiple middleware in correct order |
Other resources:
Read("${CLAUDE_SKILL_DIR}/scripts/store-template.ts") - Production-ready store templateRead("${CLAUDE_SKILL_DIR}/checklists/zustand-checklist.md") - Implementation checklistnpx claudepluginhub yonatangross/orchestkit --plugin orkCreates and manages Zustand stores for React state management, covering creation, selectors, actions, updates, and performance best practices like shallow equality.
Guides React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between solutions.
Zustand v5 state management for React. Use when implementing global state, stores, persist, or client-side state.