zustand · pedronauck — Claude Code skill: Zustand store patterns
A skill that feeds your coding agent Zustand patterns: domain stores, selector hooks, middleware and persistence.
npx skills add pedronauck/skills --skill zustand -a claude-codeWhat zustand does
The skill hands the agent a set of rules for Zustand in your project. Stores stay domain-specific, large ones get split into slices, and selector hooks are exported for each state slice instead of subscribing to the whole store. A template shows the state interface with actions grouped in an actions object.
For production stores it recommends stacking middleware in one order: devtools, then persist, then immer. Persistence is narrowed with partialize so only the fields you pick end up in storage. The skill also draws a line between client state and server state, pointing the latter at TanStack Query.
The agent can only Read, Grep and Glob — it inspects your code and suggests changes, but never edits files itself. So don't expect it to rewrite your stores on its own. Deeper examples and anti-patterns live in references/patterns.md, and the checklist ends with pnpm run typecheck and pnpm run test.
What it helps with
- split shared client state into domain-specific stores
- wire devtools, persist and immer in the right order
- replace whole-store subscriptions with selector hooks
- persist only selected fields via partialize
- update nested state immer-style without mutating it
Example prompts for the agent
- Create a new cart store following the zustand skill patterns
- Check my stores against the zustand skill rules
- Help me add selector hooks to the auth store
How to install zustand
1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill zustand -a claude-code2Manually: put the files in place
~/.claude/skills/zustand/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/zustand/
1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill zustand -a codex2Manually: put the files in place
.agents/skills/zustand/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill zustand -a cursor2Manually: put the files in place
.cursor/skills/zustand/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install pedronauck/skills zustand2Manually: put the files in place
.github/skills/zustand/SKILL.md1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill zustand -a gemini-cli2Platform CLI
gemini skills install https://github.com/pedronauck/skills --path skills/curated/zustandManually: put the files in place
.devin/skills/zustand/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add pedronauck/skills --skill zustand -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about zustand
How do I install the zustand skill in Claude?
Run npx skills add pedronauck/skills --skill zustand -a claude-code. The skill file lands at ~/.claude/skills/zustand/SKILL.md.
What does the zustand skill do?
It gives the agent Zustand guidelines: store organization, middleware, selector hooks and nested state updates. The agent applies them whenever you build client state with Zustand.
Which tools can the zustand skill use?
Only Read, Grep and Glob. It reads and searches your code but does not edit files.
Similar skills
Everything for Frontend and UI →zustand by other authors comes first.