skills.rest
rylezhou
rylezhouCOMMUNITY
Explore all skills by this author →
GitHub

Client State & Data Orchestration

Define standards for managing server state with TanStack Query and local client state with Zustand.

Updated Aug 27, 2026
Search Tags:#state management#zustand#tanstack query#server state#data orchestration#client state
One-click install
npx skills add https://github.com/rylezhou/arlis --skill client-state-data-orchestration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Client State & Data Orchestration
Source: https://github.com/rylezhou/arlis/tree/main/.agent/skills/client-state-standards
Command: npx skills add https://github.com/rylezhou/arlis --skill client-state-data-orchestration

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the complexity of managing data flow between server-side data sources and the client-side user interface, ensuring a clear separation of concerns and efficient data handling.

Core Features & Use Cases

  • Server State Management: Utilizes TanStack Query for caching, background refetching, and managing loading/error states for data originating from databases or external APIs.
  • Local Client State Management: Employs Zustand for UI-specific state that doesn't require persistence, such as modal visibility, sidebar toggles, or ephemeral user inputs.
  • Interoperability: Implements a "Reference Pattern" where Zustand holds references (like IDs) that TanStack Query uses to fetch the corresponding resources.
  • Use Case: In a dashboard application, Zustand might track the activeApplicationId, and TanStack Query would use this ID to fetch and display the details of the selected application.

Quick Start

Use the client-state-standards skill to understand how to manage server state with TanStack Query and local client state with Zustand.

Frequently Asked Questions about Client State & Data Orchestration

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

FAQPage Schema
How do I manage server state and local client state together in a web application?▼

Managing server state and local client state involves using TanStack Query for server data and Zustand for UI state, facilitating data orchestration through a reference pattern where Zustand holds IDs that TanStack Query uses to fetch resources.

What is the best way to handle data caching and background refetching for client state?▼

The best way to handle data caching and background refetching for client state is using TanStack Query, which manages loading and error states for data originating from databases or external APIs efficiently.

When should I use Zustand instead of TanStack Query for state management?▼

You should use Zustand instead of TanStack Query for local client state that does not require persistence, such as managing modal visibility, sidebar toggles, or ephemeral user inputs in your web application.

How do I implement optimistic updates with TanStack Query and Zustand?▼

Implementing optimistic updates with TanStack Query and Zustand involves using a reference pattern where Zustand stores references like active IDs, allowing TanStack Query to fetch corresponding resources and efficiently orchestrate UI-specific state updates.

Can I use Zustand and TanStack Query together without creating state management conflicts?▼

Yes, you can use Zustand and TanStack Query together by implementing a reference pattern that ensures interoperability, maintaining a clear separation of concerns between local UI state and server data orchestration.

Related Skills

Explore More Software Engineering Skills→
mkreymanmkreyman
10

elixir-quality-gate

Run Mix-based quality checks for Elixir/Phoenix projects.

Community
Intermediate
jangtrinhjangtrinh

nextjs

Plan and implement Next.js 15 App Router patterns for scalable UI apps.

Community
Intermediate
mozilor-technologiesmozilor-technologies

project-architecture

Document the Webtoffee Marketing Suite's architecture, tech stack, and component hierarchy.

Official
Advanced
MinhAnh-CorpMinhAnh-Corp

react-state-management

Provide structured React state management patterns for local, global, and server state.

Official
Advanced