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

0•

生产力与工作流

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

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.

主要功能

01Persistent state configuration for localStorage and session storage

02Type-safe store creation with curried TypeScript inference

03Next.js SSR hydration mismatch prevention patterns

04Performance-optimized state selection using shallow hooks

05Modular store organization using the Zustand slices pattern

060 GitHub stars

使用场景

01Debugging and fixing infinite re-renders or hydration errors in existing Zustand stores

02Migrating complex state logic from Redux or Context API to a lightweight alternative

03Building a scalable, type-safe global state for a React or Next.js application

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add deadronos/gpu-conway-life zustand-state-management

For use in Claude.ai and ChatGPT

主要功能

01Persistent state configuration for localStorage and session storage

02Type-safe store creation with curried TypeScript inference

03Next.js SSR hydration mismatch prevention patterns

04Performance-optimized state selection using shallow hooks

05Modular store organization using the Zustand slices pattern

060 GitHub stars

使用场景

01Debugging and fixing infinite re-renders or hydration errors in existing Zustand stores

02Migrating complex state logic from Redux or Context API to a lightweight alternative

03Building a scalable, type-safe global state for a React or Next.js application

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add deadronos/gpu-conway-life zustand-state-management

For use in Claude.ai and ChatGPT