state-management-guidelines

Standardize state management with React Query, Zustand, and useState.

Updated Mar 28, 2025

Search Tags:#architecture #offline #zustand #state-management #react-query #optimistic-ui #store-factory

Ready to run

npx skills add https://github.com/gileck/app-template-ai --skill state-management-guidelines

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: state-management-guidelines
Source: https://github.com/gileck/app-template-ai/tree/main/.ai/skills/template/state-management-guidelines
Command: npx skills add https://github.com/gileck/app-template-ai --skill state-management-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured approach to standardizing and optimizing state management across client, server, and offline contexts to prevent UI inconsistencies and data staleness.

Core Features & Use Cases

Clarifies state-type decisions: API data uses React Query, persisted UI state uses Zustand, and ephemeral UI uses useState.
Enforces a standardized Zustand Store Factory pattern (createStore) with persisted and inMemoryOnly options for cross-project consistency.
Provides guidelines for imports, React Query usage, and optimistic mutation patterns to reduce race conditions and improve UX.
Includes recommended architecture and workflow for route stores, feature stores, TTL validation, and maintenance utilities.

Quick Start

Review the Zustand guidelines and migrate stores to follow the createStore pattern with proper persistOptions or inMemoryOnly.
Apply the React Query hooks convention and Zustand imports across features like auth, settings, and router.
Implement optimistic UI patterns as described to avoid updating UI from server responses on success.

Frequently Asked Questions about state-management-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

When should I use React Query, Zustand, or useState for state management in React?▼

Use React Query for API data, Zustand for persisted UI state and routing, and useState for ephemeral UI to prevent data staleness and UI inconsistencies across contexts.

How do I create a standardized Zustand store factory for persisted and in-memory states?▼

Implement a Zustand store factory using a createStore pattern with configurable persistOptions for offline persistence or inMemoryOnly flags to ensure cross-project consistency and standardize state management.

What is the best way to implement optimistic UI updates with React Query mutations?▼

The best way to implement optimistic UI is updating the interface immediately during mutations while avoiding direct UI updates from server success responses, reducing race conditions and improving UX stability.

Can I use Zustand for routing and offline state without React Query?▼

Yes, Zustand manages persisted UI state and route stores independently, but React Query is specifically recommended for handling API data, TTL validation, and server state synchronization across features.

Why does updating UI directly from server response data cause inconsistencies?▼

Updating UI from server success responses causes inconsistencies and race conditions because it bypasses optimistic mutation patterns, leading to potential data staleness and unsafe UI updates during network delays.