skills.rest
mralexsaavedra
mralexsaavedraCOMMUNITY
Explore all skills by this author →
Website𝕏@mralexsaavedraGitHub

spotiarr-zustand

Enforce Zustand two-store separation and TanStack Query delegation for SpotiArr client state.

41|6|Updated Nov 27, 2025
Search Tags:#performance#state management#react#zustand#tanstack query#selectors#client preferences
One-click install
npx skills add https://github.com/mralexsaavedra/spotiarr --skill spotiarr-zustand
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spotiarr-zustand
Source: https://github.com/mralexsaavedra/spotiarr/tree/main/skills/spotiarr-zustand
Command: npx skills add https://github.com/mralexsaavedra/spotiarr --skill spotiarr-zustand

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents inefficient or incorrect client-side state management in SpotiArr’s frontend by enforcing clear rules for when to use Zustand versus server-state caching.

Core Features & Use Cases

  • Enforces a two-store architecture: guarantees exactly two Zustand stores—one ephemeral and one persisted—for predictable behavior.
  • Separates UI state from server state: routes server events and cache invalidation through TanStack Query while keeping transient download progress in memory.
  • Improves rendering performance: mandates granular selectors and bulk selector hooks to avoid N-per-item subscriptions in list UIs.
  • Supports durable preferences: uses persisted middleware for sidebar and UI preferences so refreshes don’t reset the experience.

Quick Start

Use this skill as your checklist when adding client-side state in apps/frontend/src/store/, ensuring server-derived state goes to TanStack Query and UI-only state is added to exactly one of the two defined Zustand stores.

Frequently Asked Questions about spotiarr-zustand

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

FAQPage Schema
How do I separate client-side state from server state using Zustand and TanStack Query?▼

To separate state, use Zustand for UI-only state and TanStack Query for server-state. Route server events and cache invalidation through TanStack Query while keeping transient progress in Zustand memory.

Why does my React list UI re-render excessively when using Zustand selectors?▼

Excessive re-rendering happens without granular selectors. Improve rendering performance by mandating shallow, granular selectors and bulk selector hooks to avoid N-per-item subscriptions in list UIs.

Do I need persisted middleware in Zustand for UI sidebar preferences?▼

Yes, use persisted middleware for UI preferences to support durable preferences. This ensures sidebar and UI preferences survive refreshes so the user experience does not reset.

What's the best way to structure Zustand stores for a React application?▼

The best way is enforcing a two-store architecture with exactly two singleton Zustand stores—one ephemeral and one persisted—ensuring predictable behavior and strict separation rules.

Can I use TanStack Query cache invalidation callbacks with Zustand stores?▼

Yes, TanStack Query cache invalidation works with Zustand. Apply state design rules around TanStack Query callbacks to ensure server events update server-state while Zustand handles UI-only state.

When should I not use Zustand for download status state management?▼

You should not use Zustand for finalized download status. Keep only transient download progress in memory via Zustand, delegating finalized server-derived download status to TanStack Query.

Related Skills

Explore More Software Engineering Skills→
marcioaltoemarcioaltoe
14

frontend-engineer

Set up feature-based React architecture with Zustand and TanStack tooling.

Community
Advanced
rodrigobranasrodrigobranas
1

zustand

Standardize Zustand stores, slices, and selectors for React apps.

Community
Intermediate
BarisSozenBarisSozen
1

pitfalls-tanstack-query

Solves common TanStack Query v5 pitfalls in data fetching and cache management for React applications.

Community
Intermediate
AI-Foundry-CoreAI-Foundry-Core
4

react-state-management

Manage React state across local, global, and server contexts.

Official
Advanced