State Management

Download SKILL.mdGet Murage How skills work

Open source. macOS, Windows and Linux.

At a glance

What it is

Comprehensive state management patterns covering local vs global state, Redux Toolkit, Zustand, Jotai, signals, server state with TanStack Query, URL state, form state, optimistic updates, and state machines with XState.

A skill is a written procedure a bot loads when a job calls for it. This one is a single file, SKILL.md, and the whole file is on this page.

File: SKILL.md
Length: 418 lines1,694 words, about 8 min read
Category: Web developmentfrontend frameworks
Level: Intermediate
License: Apache-2.0

More web development skills.

The full skill.

The whole file, exactly as it downloads. Read it before you rely on it.

SKILL.md

418 lines · 1,694 words

Download

State Management

Purpose

Select and implement the right state management approach for each use case in a web application. This skill provides decision frameworks, implementation patterns, and best practices for every category of application state.

State Category Classification

CATEGORY          EXAMPLES                        RECOMMENDED SOLUTION
---------------------------------------------------------------------------
UI State          Modal open/close, accordion,    useState / useReducer
(ephemeral)       tooltip visible, active tab      (component-local)

Shared UI State   Sidebar collapsed, theme,       Context / Zustand / Jotai
                  notification queue

Server State      API data, user profile,         TanStack Query / SWR
(cached)          list of items

URL State         Current page, filters,          URL search params (nuqs)
                  sort order, pagination

Form State        Input values, validation,       React Hook Form / Formik
                  dirty/touched tracking

Auth State        Current user, tokens,           Zustand / Context
                  permissions

Complex Workflows Multi-step forms, checkout,     XState (state machines)
                  onboarding flows

Put this skill to work.

Questions.

What is the State Management skill?

How much does it cost?

Nothing. It ships with Murage, which is open source. Your bots run on the AI plan you already have.

Can I change it?

Yes. Open it in Settings → Skills to read, edit or duplicate it. Skill Guard scans it again after every edit.

Give your first job to Murage.

Download the app, connect the AI you already pay for, and tell your Chief of Staff what needs doing. Plan on about ten minutes from install to a working team.

Download Murage

No account needed · Runs on the AI plan you already pay for

CATEGORY EXAMPLES RECOMMENDED SOLUTION --------------------------------------------------------------------------- UI State Modal open/close, accordion, useState / useReducer (ephemeral) tooltip visible, active tab (component-local) Shared UI State Sidebar collapsed, theme, Context / Zustand / Jotai notification queue Server State API data, user profile, TanStack Query / SWR (cached) list of items URL State Current page, filters, URL search params (nuqs) sort order, pagination Form State Input values, validation, React Hook Form / Formik dirty/touched tracking Auth State Current user, tokens, Zustand / Context permissions Complex Workflows Multi-step forms, checkout, XState (state machines) onboarding flows

State Management

More web development skills.

The full skill.

State Management

Purpose

State Category Classification

Put this skill to work.

Questions.

Give your first job to Murage.

Search murage.ai

State Management

More web development skills.

The full skill.

State Management

Purpose

State Category Classification

Put this skill to work.

Questions.

Give your first job to Murage.

Create a bot and use this skill.

Ask Ember to create the bot

Open the bot’s skills

Find State Management and switch it on

Ask the bot for the job

About this skill.

Decision Tree

Redux Toolkit Patterns

When to Use Redux

Slice Pattern

Zustand

When to Use Zustand

Store Pattern

Jotai (Atomic State)

When to Use Jotai

Atom Patterns

Server State (TanStack Query)

Core Patterns

URL State

Form State

State Machines (XState)

When to Use State Machines

Machine Pattern

State Management Checklist

When to Use

Output Format

Example

Edge Cases