fe-zustand-store

What problem does it solve?

This Skill reduces friction when adding client-side state management by scaffolding well-typed Zustand v5 stores for Next.js TypeScript applications, ensuring consistent patterns for persistence, serialization, and reconstruction of non-serializable values.

Core Features & Use Cases

• Non-persisted UI stores for modal flags, selections, loading states, and temporary UI data with separate State and Actions types and a reset function.
• Persisted list and pagination stores using the persist middleware and partialize to persist only pagination meta and query parameters across refreshes.
• Persisted stores with non-serializable values that use onRehydrateStorage to reconstruct class instances like CASL PureAbility while only persisting serializable parts.
• Conventions & anti-patterns: enforce create API with explicit TypeScript types, define initialState constants, avoid storing server data in Zustand, and place files under features/<feature>/logic/store with -store.ts suffix.
• Example: scaffold a projects list-store that persists current page and search query and reconstructs permissions on hydration.

Quick Start

Generate a TypeScript Zustand v5 persisted list store for the projects feature that persists paginationMeta and query using partialize and reconstructs non-serializable values with onRehydrateStorage.