react-state-management

Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.

1.10x

Quality

77%

Does it follow best practices?

Impact

94%

1.10x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./config/claude/skills/react-state-management/SKILL.md

Evaluation results

100%

17%

E-Commerce Platform: Redux Store Setup

Redux Toolkit TypeScript setup

Criteria

Without context

With context

Typed RootState

100%

Typed AppDispatch

100%

useAppDispatch hook

100%

useAppSelector hook

100%

createAsyncThunk usage

100%

rejectWithValue error handling

100%

extraReducers builder pattern

100%

Status lifecycle

100%

Pending/fulfilled/rejected cases

100%

serializableCheck config

100%

PayloadAction types

100%

createSlice pattern

100%

TypeScript interfaces

100%

Without context: $0.5060 · 1m 49s · 26 turns · 33 in / 7,243 out tokens

With context: $0.5420 · 1m 48s · 24 turns · 283 in / 6,804 out tokens

100%

15%

Project Management Dashboard: Task Data Layer

React Query server state patterns

Criteria

Without context

With context

Query keys factory

100%

staleTime value

100%

gcTime not cacheTime

100%

gcTime value

100%

enabled conditional fetch

100%

cancelQueries in onMutate

100%

Snapshot in onMutate

100%

Optimistic cache update

100%

Rollback in onError

100%

invalidateQueries in onSettled

100%

Zustand for UI state

100%

No server state in Zustand

100%

Without context: $0.6561 · 2m 31s · 32 turns · 38 in / 9,585 out tokens

With context: $0.9819 · 3m 51s · 41 turns · 45 in / 13,726 out tokens

84%

-5%

SaaS Dashboard: Client-Side State Architecture

Zustand middleware and slice pattern

Criteria

Without context

With context

devtools middleware

100%

persist middleware

100%

Middleware nesting order

100%

persist name config

100%

StateCreator slices

100%

70%

Combined store type

37%

Slice merging

100%

Selective subscription hooks

100%

Selector syntax

100%

No derived data stored

25%

37%

TypeScript interfaces

100%

create() with double call

100%

No cross-category mixing

100%

Without context: $0.2923 · 1m 20s · 16 turns · 18 in / 5,002 out tokens

With context: $1.1871 · 3m 54s · 49 turns · 53 in / 14,380 out tokens

Repository: freekmurze/dotfiles
Commit: 355d067

Evaluated: 13 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

E-Commerce Platform: Redux Store Setup Project Management Dashboard: Task Data Layer SaaS Dashboard: Client-Side State Architecture

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.