state-management
Implements industry-standard state management patterns using Zustand and React Query.
Install
mkdir -p .claude/skills/state-management && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/3462" && unzip -o skill.zip -d .claude/skills/state-management && rm skill.zipInstalls to .claude/skills/state-management
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Manage client and server state with Zustand stores and React Query patterns.Key capabilities
- →Manage global application state with Zustand
- →Persist state across user navigation using Zustand
- →Fetch and cache server data with React Query
- →Handle URL state using React Router
- →Manage form state with React Hook Form
- →Utilize standard React hooks for local component state
How it works
The skill provides a decision tree to guide users in selecting the appropriate state management tool based on whether the data is server-side, URL-based, form-based, or shared across components.
Inputs & outputs
When to use state-management
- →Implementing global state with Zustand
- →Caching server data with React Query
- →Determining the right state tool for a requirement
- →Refactoring local state to global state
About this skill
State 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.
How it compares
This skill offers a structured approach to choosing state management tools for different data types, contrasting with a single-solution or ad-hoc method.
Compared to similar skills
state-management side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| state-management (this skill) | 1 | 5mo | No flags | Beginner |
| react-modernization | 21 | 2mo | No flags | Advanced |
| writing-react-effects | 1 | 3mo | No flags | Intermediate |
| form-refactorer | 1 | 5mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by redpanda-data
View all by redpanda-data →You might also like
react-modernization
wshobson
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
writing-react-effects
dust-tt
Writes React components without unnecessary useEffect. Use when creating/reviewing React components, refactoring effects, or when code uses useEffect to transform data or handle events.
form-refactorer
redpanda-data
Refactor legacy forms to use modern Redpanda UI Registry Field components with react-hook-form and Zod validation. Use when user requests: (1) Form refactoring or modernization, (2) Converting Chakra UI or @redpanda-data/ui forms, (3) Updating forms to use Field components, (4) Migrating from legacy form patterns, (5) Implementing forms with react-hook-form and Zod validation.
building-compound-components
tambo-ai
Creates unstyled compound components that separate business logic from styles. Use when building headless UI primitives, creating component libraries, implementing Radix-style namespaced components, or when the user mentions "compound components", "headless", "unstyled", "primitives", or "render props".
rendering-conditional-render
TheOrcDev
Use explicit ternary operators instead of && for conditional rendering. Apply when rendering values that could be 0, NaN, or other falsy values that might render unexpectedly.
creating-styled-wrappers
tambo-ai
Creates styled wrapper components that compose headless/base compound components. Use when refactoring styled components to use base primitives, implementing opinionated design systems on top of headless components, or when the user mentions "use base components", "compose primitives", "styled wrapper", or "refactor to use base".