Scaffold typed Zustand v5 stores for Next.js TypeScript applications.
npx skills add https://github.com/lety-ai/lety-skill-hub --skill fe-zustand-store
Please help me install this Agent Skill. Skill: fe-zustand-store Source: https://github.com/lety-ai/lety-skill-hub/tree/main/plugins/zustand/skills/zustand Command: npx skills add https://github.com/lety-ai/lety-skill-hub --skill fe-zustand-store
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.
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.
High-intent search queries and answers about installing and using this skill.
To persist Zustand store state in Next.js TypeScript applications, use the persist middleware with partialize to select specific state slices for storage and onRehydrateStorage to rebuild non-serializable values upon loading.
The onRehydrateStorage callback in Zustand persist middleware triggers after storage rehydration, allowing you to reconstruct non-serializable class instances like CASL PureAbility that were excluded from the persisted serialized state.
The best way to structure Zustand stores in a Next.js feature folder is to place files under features/<feature>/logic/store with a -store.ts suffix, enforcing separate State and Actions TypeScript types.
Yes, you can use Zustand for list pagination and query persistence in Next.js by applying the persist middleware with partialize to store only pagination metadata and query parameters across page refreshes.
You should not use Zustand for state management in Next.js when handling server data, as this Skill explicitly enforces avoiding server data storage in Zustand to maintain proper client-side state boundaries.
Yes, this Zustand scaffolding approach supports TypeScript explicitly by enforcing the create API with distinct TypeScript State and Actions types, alongside defining initialState constants for robust typing.
School-Agent-IncScaffold Next.js/React websites with App Router, TypeScript, and Tailwind CSS.
NoManPlayStructures typed Zustand stores for React and Next.js with selectors and middleware.
PhantomKnight287Configure Better Auth multi-tenant organizations and manage members, invitations, and roles.
javierhbrCreate Zustand stores with selectors, persistence, and Redux DevTools integration.
