state-management-design

Design frontend state ownership and synchronization strategies for React-like applications.

4|Updated May 16, 2026
One-click install
npx skills add https://github.com/machenjie/rd-skills --skill state-management-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: state-management-design
Source: https://github.com/machenjie/rd-skills/tree/main/src/foundation/capabilities/state-management-design
Command: npx skills add https://github.com/machenjie/rd-skills --skill state-management-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Prevents stale, mismatched, and unsafe client state by forcing every UI, form, authentication, and cached server value to have a single authoritative source, explicit lifecycle, and clear invalidation and reset rules.

Core Features & Use Cases

  • State classification and ownership rules: Classifies server state, UI state, form state, authentication state, and persisted preferences, then assigns the correct storage and lifecycle without defaulting to a global store.
  • Server-state freshness and cache policy: Defines staleTime, gcTime/cacheTime, invalidation triggers, and stale-data behavior for TanStack Query, SWR, or Apollo-like caching.
  • Secure auth and permission synchronization: Ensures auth state is sourced from trusted server validation, revalidated on defined events, and completely cleared on logout (including user-specific caches and client storage).
  • Optimistic updates with deterministic rollback: Requires optimistic state application plus rollback-on-failure semantics so rejected server writes never leave the UI permanently inconsistent.
  • Privacy-aware persistence decisions: Documents when and how persisted client preferences may be stored, including expiry and clear-on-logout handling for user-identifying or sensitive items.

Quick Start

Ask for a state-management ownership plan that classifies your current frontend state into server, UI, form, auth, and persisted preference categories and outputs exact invalidation, rollback, and logout-clearing rules.

Frequently Asked Questions about state-management-design

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

FAQPage Schema
How do I design frontend state ownership to eliminate stale server data?

Frontend state ownership design classifies state into server, UI, form, and auth categories with single authoritative sources. This eliminates stale server data by enforcing explicit lifecycles and strict invalidation rules for cached values.

What is the best way to handle optimistic updates with deterministic rollback in React?

The best way to handle optimistic updates is applying the state change immediately while enforcing rollback-on-failure semantics. This ensures rejected server writes trigger a deterministic rollback, preventing permanent UI inconsistency in React-like applications.

How do I ensure authentication state is completely cleared on logout?

Ensuring authentication state is completely cleared on logout requires sourcing auth from trusted server validation and defining explicit reset rules. This clears user-specific caches and client storage, preventing unsafe permission drift.

How do I configure server-state cache freshness and invalidation triggers for TanStack Query?

Configuring server-state cache freshness involves defining staleTime, gcTime, and explicit invalidation triggers. This ensures cached data in TanStack Query or SWR is marked stale and refetched appropriately based on defined events.

When do I need to classify persisted client preferences for privacy-aware storage?

You need to classify persisted client preferences when storing user-identifying or sensitive items. This requires documenting expiry and clear-on-logout handling to ensure privacy-aware persistence decisions are safely managed.

Does this state management approach work with Apollo Client caching?

Yes, this state management approach works with Apollo Client caching. It applies server-state freshness policies, invalidation triggers, and optimistic rollback rules to Apollo-like caching environments seamlessly.