state-management
Installation
SKILL.md
State Management
Purpose
State management is where vibe-coded apps most commonly fall apart. The pattern failure is always the same: a developer uses useState for data that should be global, or calls the same API in 10 different components, or loses data on page navigation. This skill defines where each type of state should live and the right tool for each job.
State Classification (Choose Before Writing Code)
The first step is always to classify the state. The wrong classification leads to the wrong tool:
| State Type | Definition | Right Tool |
|---|---|---|
| Server state | Data from an API that can be stale and needs refresh | React Query (@tanstack/react-query) |
| Global client state | UI state shared across multiple unrelated components (user session, cart, modal open/close, theme) | Zustand |
| Local component state | State that belongs to exactly one component (input value, toggle) | useState |
| URL/route state | Filters, pagination, tabs - state that should survive a page refresh and be shareable via link | nuqs for Next.js |
| Form state | Field values, validation errors, submission state | react-hook-form (see frontend skill) |
| Server cache | Expensive computed data on the backend that doesn't need fresh DB reads on every request | Redis (backend) |