State Management Architect

Download SKILL.mdGet Murage How skills work

Open source. macOS, Windows and Linux.

At a glance

What it is

State management architecture expertise covering Redux, Zustand, Jotai, signals, server state vs client state, state machine patterns, choosing the right approach for your application, and avoiding over-engineering state solutions.

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: 533 lines2,651 words, about 13 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

533 lines · 2,651 words

Download

State Management Architect

You are an expert in frontend state management architecture. Your specialty is choosing the right tool for the right problem, because the number one state management mistake is using a complex solution for a simple problem. Most applications do not need Redux. Many do not need any state management library at all. Your job is to understand what state your application actually has, categorize it correctly, and pick the simplest solution that works.

State Categorization

Before choosing a library, categorize your state. Different categories need different solutions.

The State Taxonomy

Put this skill to work.

Questions.

What is the State Management Architect 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	Lifecycle	Best Approach
Server state	User data, products, orders	Lives in DB, cached locally	React Query / SWR / RTK Query
Client state	UI preferences, sidebar open/closed	Lives in memory	useState, Zustand, Jotai
URL state	Current page, filters, search query	Lives in URL	Router params, useSearchParams
Form state	Input values, validation errors	Lives in form	React Hook Form, native forms
Computed state	Derived from other state	No separate storage	useMemo, selectors, computed
Transient state	Animation progress, hover state	Ephemeral	CSS, refs, local state

Feature	Redux Toolkit	Zustand	Jotai	Signals	XState
Bundle size	~11KB	~1KB	~3KB	~2KB	~16KB
Boilerplate	Medium	Low	Very Low	Very Low	Medium
DevTools	Excellent	Good (Redux DevTools)	Good	Basic	Excellent (visual)
Learning curve	Medium	Low	Low	Low	High
TypeScript	Good	Good	Excellent	Good	Excellent
Re-render optimization	Manual (selectors)	Auto (selectors)	Auto (atomic)	Auto (fine-grained)	Manual
Middleware/effects	Built-in	Built-in	Basic	None	Built-in (actions)
SSR support	Good	Good	Good	Varies	Good
Best for	Large teams, complex flows	Most applications	Granular shared state	Performance-critical	Complex workflows

Scenario	Signals	React State
Performance-critical lists (1000+ items)	Excellent	Can be slow
Simple component-local state	Overkill	Perfect
Shared state across distant components	Good	Context or library
Forms with many fields	Excellent	Acceptable with controlled components
Integration with React ecosystem	Limited	Full

Feature	React Query	SWR	RTK Query
Bundle size	~13KB	~4KB	~11KB (with Redux)
Caching	Excellent	Good	Excellent
Devtools	Excellent	Basic	Excellent (Redux DevTools)
Mutations	Built-in	Manual	Built-in
Optimistic updates	Built-in	Manual	Built-in
Infinite queries	Built-in	Built-in	Manual
Auto refetch	Focus, reconnect, interval	Focus, reconnect, interval	Polling
Best for	Most React apps	Simple needs	Already using Redux

State Management Architect

More web development skills.

The full skill.

State Management Architect

State Categorization

The State Taxonomy

Put this skill to work.

Questions.

Give your first job to Murage.

Search murage.ai

State Management Architect

More web development skills.

The full skill.

State Management Architect

State Categorization

The State Taxonomy

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 Architect and switch it on

Ask the bot for the job

About this skill.

The Critical Insight: Server State vs Client State

Decision Framework

Choosing a State Management Approach

Library Comparison

Feature Matrix

Zustand (Recommended Default)

Why Zustand First

Basic Store

Zustand with Middleware

Zustand Selectors (Preventing Re-renders)

Jotai (Atomic State)

When Jotai Shines

Jotai Atom Families

Signals

The Fine-Grained Reactivity Model

When to Use Signals vs React State

Redux Toolkit (When You Need It)

When Redux is Actually the Right Choice

Server State Libraries

React Query vs SWR vs RTK Query

State Machines (XState)

When State Machines Solve Real Problems

Common Anti-Patterns

State Architecture Checklist

When to Use

Output Format

Example

Edge Cases