Menu
Manage client and server state with Zustand stores and React Query patterns.
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/redpanda-data/console --skill state-managementThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
Client-side React performance optimization patterns.
Connect Query patterns for API calls. Use when working with mutations, queries, or data fetching.
TypeScript, React, and JavaScript best practices enforced by Ultracite/Biome.
Based on SOC occupation classification
| name | state-management |
| description | Manage client and server state with Zustand stores and React Query patterns. |
Choose the right state solution for each use case.
| Action | Rule |
|---|---|
| Read from store | use-zustand-selectors.md |
| Persist state | use-zustand-persist.md |
| Fetch server data | use-react-query-for-server.md |
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)
See rules/ directory for detailed guidance.