state-management
Modern frontend state management patterns, tools, architecture decisions, and scalability patterns
Profile →npx skills add cosmicstack-labs/mercury-agent-skills --skill state-management --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# State Management Comprehensive patterns for managing state in modern frontend applications — from local component state to global application state. ## State Categories | Type | Description | Examples | Tool | |------|-------------|----------|------| | **Local** | Component-scoped state | Form inputs, toggles | `useState`, `useReducer` | | **Shared** | State shared between components | Selected item, filter state | Zustand, Context | | **Server** | Data from APIs/database | User list, product catalog | TanStack Query, SWR | | **URL** | State in the URL | Page number, search query | `next/navigation`, React Router | | **Persisted** | State that survives refresh | Theme preference, auth token | localStorage, AsyncStorage | ## Patterns by Scale ### Small App (< 5 screens) ```tsx // Just useState + lifting state up is enough function Parent() { const [count, setCount] = useState(0); return ( <> <ChildA count={count} /> <ChildB onIncrement={() => setCount(c => c + 1)} /> </> ); } ``` ### Medium App (5-20 screens) ```tsx // Zustand — minimal boilerplate, great performance import { create } from 'zustand'; import { persist } from 'zustand/middleware'; interface CartStore { items: CartIt
- State Categories
- Patterns by Scale
- Small App (< 5 screens)
- Medium App (5-20 screens)
- Large App (20+ screens, multiple teams)
- Server State Pattern
- Common Mistakes
What does the state-management skill do?
Modern frontend state management patterns, tools, architecture decisions, and scalability patterns
How do I install it?
Run `npx skills add cosmicstack-labs/mercury-agent-skills --skill state-management --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From cosmicstack-labs/mercury-agent-skills, a repository with 364 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.