Frontend State Management

aj-geddes/useful-ai-prompts/skills/frontend-state-management

by aj-geddes3f5182cfd739No license355 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 7 months ago

Manage application state using Redux, MobX, Zustand, and Context API. Use when centralizing state for complex applications with multiple components.

Instructions onlySoftware Development

AI-generated overview

Guides frontend state management with Redux Toolkit, Zustand, Context API and MobX, with reference guides and a component template.

What it does: This skill provides guidance for implementing application state management in frontend projects. It covers Redux with Redux Toolkit, Zustand, Context API with useReducer, and MobX through separate reference guides, and includes a component template. It also lists best practices for clean, tested, maintainable code.
When to use it: Use it when centralizing state for complex applications where multiple components share state. It also fits cases needing predictable state mutations, time-travel debugging, or server state synchronization.
Requirements: No scripts; instructions and reference documents only. Working in the target stack assumes a JavaScript or TypeScript frontend project with the relevant state libraries installed.

Overview

Implement scalable state management solutions using modern patterns and libraries to handle application state, side effects, and data flow across components.

When to Use

Complex application state
Multiple components sharing state
Predictable state mutations
Time-travel debugging needs
Server state synchronization

Quick Start

Minimal working example:

typescript

// store/userSlice.tsimport { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
interface User {  id: number;  name: string;  email: string;}
interface UserState {  items: User[];  loading: boolean;  error: string | null;}
const initialState: UserState = {  items: [],  loading: false,  error: null};
export const fetchUsers = createAsyncThunk(  'users/fetchUsers',  async (_, { rejectWithValue }) => {    try {// ... (see reference guides for full implementation)

// store/userSlice.tsimport { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
interface User {  id: number;  name: string;  email: string;}
interface UserState {  items: User[];  loading: boolean;  error: string | null;}
const initialState: UserState = {  items: [],  loading: false,  error: null};
export const fetchUsers = createAsyncThunk(  'users/fetchUsers',  async (_, { rejectWithValue }) => {    try {// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
Redux with Redux Toolkit (React) [blocked]	Redux with Redux Toolkit (React)
Zustand (Lightweight State Management) [blocked]	Zustand (Lightweight State Management)
Context API + useReducer [blocked]	Context API + useReducer
MobX (Observable State) [blocked]	MobX (Observable State)

Best Practices

✅ DO

Follow established patterns and conventions
Write clean, maintainable code
Add appropriate documentation
Test thoroughly before deploying

❌ DON'T

Skip testing or validation
Ignore error handling
Hard-code configuration values

Source and attribution

Source:aj-geddes/useful-ai-promptsinskills/frontend-state-managementat commit3f5182c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Frontend State Management

Frontend State Management

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

Source and attribution

More from aj-geddes/useful-ai-prompts

Xss Prevention

Wireframe Prototyping

Web Performance Optimization

Vue Application Structure

Visual Regression Testing

User Persona Creation

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices