Does it include guidance on when to use Zustand vs. TanStack Query?

Yes, it explicitly recommends using Zustand for client-side UI state while delegating server-state management to TanStack Query for a clean separation of concerns.

How does this skill handle state persistence?

It provides implementation patterns for the persist middleware, including configuring storage engines like localStorage and handling version migrations for evolving state schemas.

Can I use these patterns for React Native projects?

Absolutely. Since Zustand is framework-agnostic, these state management patterns work perfectly for React Native, web, and even vanilla JS environments.

Does this skill support the latest Zustand 5.x features?

Yes, it is fully updated for Zustand 5.x, including the use of useShallow from the react/shallow entry point and the double-call creator pattern.

Zustand State Management Patterns

Name: Zustand State Management Patterns
Author: yonatangross

byyonatangross

•

開発者ツール

Implements production-ready Zustand 5.x state management patterns with TypeScript, middleware, and performance optimizations.

This skill provides a comprehensive blueprint for modern state management in React applications using Zustand 5.x. It enables Claude to architect scalable stores using the slices pattern, integrate essential middleware like Immer for immutable updates and Persist for local storage, and implement performance-critical selectors. By enforcing best practices—such as avoiding derived state storage and correctly utilizing useShallow—this skill ensures your application remains type-safe, maintainable, and highly performant while avoiding common pitfalls like unnecessary re-renders or server-state duplication.

主な機能

01Modular store architecture via the Slices pattern for large-scale apps

02Performance optimization using useShallow and granular selectors

03Seamless middleware integration for Immer, Persistence, and DevTools

04Strict anti-pattern prevention for cleaner, more reactive codebases

05TypeScript-first store creation with automated type inference

0669 GitHub stars

ユースケース

01Refactoring heavy Redux or Context API implementations into lightweight Zustand stores

02Architecting complex global state for large React or React Native applications

03Implementing persistent user preferences and shopping carts with schema migrations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit zustand-patterns

For use in Claude.ai and ChatGPT

Download Skill