SKILL.md
Frontend State Management
Table of Contents
- [Overview](#overview)
- [When to Use](#when-to-use)
- [Quick Start](#quick-start)
- [Reference Guides](#reference-guides)
- [Best Practices](#best-practices)
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:
// store/userSlice.ts
import { 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)
Redux with Redux Toolkit (React)
Zustand (Lightweight State Management)
Zustand (Lightweight State Management)
Context API + useReducer
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