About state-management
A skill for choosing state-management approaches by use case, including global state, cross-component sharing, and persistence across navigation. Its decision flow distinguishes server data, URL state, and form state.
Key features
- 01Choose state solutions by use case
- 02Separate server data from client state
- 03Guide Zustand persistence and selectors
Use cases
- 01Manage global or shared component state
- 02Persist state across navigation
- 03Choose an approach for API data
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/state-managementin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
rules/use-react-query-for-server.mduse-zustand-persist.mduse-zustand-selectors.mdDetails
From the project READMEState Management
Choose the right state solution for each use case.
Activation Conditions
- Managing global state
- Persisting state across navigation
- Cross-component data sharing
- Questions about Zustand vs React Query
Quick Reference
| Action | Rule |
|---|---|
| Read from store | use-zustand-selectors.md |
| Persist state | use-zustand-persist.md |
| Fetch server data | use-react-query-for-server.md |
Decision Tree
Is it server data (API response)?
├── Yes → React Query / Connect Query
│ (caching, refetching, invalidation)
└── No → Is it URL state?
├── Yes → React Router
│ (search params, path params)
└── No → Is it form state?
├── Yes → React Hook Form
│ (validation, submission)
└── No → Is it shared across components?
├── Yes → Zustand
│ (global, persisted)
└── No → useState / useReducer
(local component state)
Rules
See rules/ directory for detailed guidance.
Comments
Markdown supported