How does this skill help with TypeScript and Zustand?

It enforces the double-parentheses pattern 'create ()()' to ensure that middleware types are correctly inferred and prevents common StateCreator type errors.

How does this skill prevent infinite render loops?

It detects unstable selector patterns that create new object references and replaces them with stable selectors or the useShallow hook to ensure performance.

Does it support complex store organization?

Absolutely. It provides standardized templates for the Slices Pattern, allowing you to split large stores into smaller, manageable files while maintaining a single unified hook.

Is this skill compatible with Zustand v5?

Yes, it includes specific updates for Zustand v5, including the middleware import changes and the persist middleware race condition fix introduced in v5.0.10.

Can it solve Next.js hydration mismatch errors?

Yes, it provides a specific flag pattern and rehydration storage hooks to ensure that persisted state on the client doesn't conflict with the server-rendered HTML.

Zustand State Management

Name: Zustand State Management
Author: deadronos

bydeadronos

Productividad y Flujo de Trabajo

Streamlines React global state management with type-safe patterns and automated troubleshooting for Zustand.

Acerca de

This skill empowers Claude to architect, implement, and debug global state in React applications using Zustand. It provides deep domain expertise in creating type-safe stores, configuring persistent middleware, and implementing the slices pattern for modular codebases. Beyond boilerplate generation, the skill identifies and prevents common architectural pitfalls such as Next.js hydration mismatches, TypeScript inference failures, and infinite render loops caused by unstable selectors. It is specifically optimized for Zustand v5 and provides clear migration paths for developers moving from Redux or React Context.

Características Principales

Persistent state configuration for localStorage and session storage
Type-safe store creation with curried TypeScript inference
Next.js SSR hydration mismatch prevention patterns
Performance-optimized state selection using shallow hooks
Modular store organization using the Zustand slices pattern
0 GitHub stars

Casos de Uso

Debugging and fixing infinite re-renders or hydration errors in existing Zustand stores
Migrating complex state logic from Redux or Context API to a lightweight alternative
Building a scalable, type-safe global state for a React or Next.js application

Acerca de

Características Principales

Persistent state configuration for localStorage and session storage
Type-safe store creation with curried TypeScript inference
Next.js SSR hydration mismatch prevention patterns
Performance-optimized state selection using shallow hooks
Modular store organization using the Zustand slices pattern
0 GitHub stars

Casos de Uso

Debugging and fixing infinite re-renders or hydration errors in existing Zustand stores
Migrating complex state logic from Redux or Context API to a lightweight alternative
Building a scalable, type-safe global state for a React or Next.js application