State Management Agent Skill
Zustand/Jotai for client state, React Query for server, URL for filters.
The Skill
Full content, every format. Copy it, download it, or install with one command.
---
description: Zustand/Jotai for client state, React Query for server, URL for filters.
homepage: https://yepapi.com/skills/state-management
metadata:
tags: [state, zustand, react-query, url-state]
---
# State Management
## Rules
- Server state vs client state — don't mix them
- React Query / TanStack Query for server state: fetch, cache, revalidate
- Zustand or Jotai for client state — lightweight, no boilerplate
- URL state for filters, pagination, search: `useSearchParams()` in Next.js
- Form state: React Hook Form — controlled, performant, Zod validation
- Optimistic updates: update UI immediately, revert on server error
- Avoid global state for things that should be component-local
- Derived state: compute during render — don't sync with useEffectInstall
Why Use the State Management Skill?
Without this skill, your AI guesses at state management patterns. It might hallucinate deprecated APIs, use outdated conventions, or miss best practices entirely. With it, your AI follows a proven ruleset — every suggestion aligns with current standards.
Drop this skill into your project and your AI instantly knows the rules. Better code suggestions, fewer errors, faster shipping.
Try These Prompts
These prompts work better with the State Management skill installed. Your AI knows the context and writes code that fits.
"Set up state management with Zustand for client state and React Query for server state"
"Create a global store with Zustand that handles auth, preferences, and UI state"
"Build a URL-driven filter system that syncs state between URL params and React components"
State Management skill — FAQ
It covers Zustand for client state, React Query for server state, and URL params for filters. Your AI picks the right state solution for each use case instead of over-engineering with Redux.
Run `npx skills add YepAPI/skills --skill state-management` in your project root. This copies the skill file into your repo where your AI coding tool can read it automatically.
For most apps, no. The skill recommends Zustand for simple client state, React Query for server state, and URL params for filter state. This covers 95% of use cases with less boilerplate than Redux.