frontend/.claude/skills/state-management/SKILL.md
Manage client and server state with Zustand stores and React Query patterns.
npx skillsauth add redpanda-data/console state-managementInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
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.
development
Review UI code for Web Interface Guidelines compliance
development
Build UI with Redpanda Registry components, Tailwind v4, and accessibility best practices.
testing
Write and maintain tests with Vitest v4 dual configuration, mock utilities, and Zustand store testing patterns.
development
Migrate React applications from React Router to TanStack Router with file-based routing. Use when user requests: (1) Router migration, (2) TanStack Router setup, (3) File-based routing implementation, (4) React Router replacement, (5) Type-safe routing, or mentions 'migrate router', 'tanstack router', 'file-based routes'.