Stats
Actions
Tags
From frontend-skills
Enforces zustand best practices: double-parens create, useShallow selectors, persist middleware. Use when preventing re-render issues or setting up zustand enforcement.
How this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-skills:setup-zustand**/*store*.ts**/*store*.tsxThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
- **Ban single-parens `create<T>()`** -- must be `create<T>()()` for middleware type inference
create<T>() -- must be create<T>()() for middleware type inference(s) => ({ a: s.a }) cause infinite re-renders, use useShallowpersist middlewareuseShallow required for multi-value selectors (hook enforce).set() (hook enforce).Initial setup (install, config, verify): see SETUP.md.
npx claudepluginhub redpanda-data/ui-harness --plugin frontend-skillsCreates and manages Zustand stores with selectors, persistence, devtools, and middleware. Useful for global state in React or vanilla JavaScript.
Implements Zustand middleware for persistence (persist), devtools integration, Immer immutability, and custom store enhancements. Guides composition, best practices, partialize, and migrations.
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.