zustand-store-generator skill

Overview

This skill generates ready-to-use Zustand stores in TypeScript, including common middleware like persistence and devtools. It produces complete *.store.ts files that follow Zustand 4.x and TypeScript typing standards. The goal is to speed up state management setup with minimal manual edits.

How this skill works

On trigger phrases such as "create zustand store" or "generate zustand state," the skill constructs a full Zustand store file with typed state, actions, and optional middleware wrappers. It can include persistence (localStorage), devtools integration, and modular slice patterns to keep stores maintainable. The output is a single complete .store.ts file ready to drop into a project.

When to use it

• Starting a new feature that needs local state with TypeScript typing
• Scaffolding stores for lists, forms, carts, or UI state quickly
• Migrating from plain context or Redux to Zustand slices
• Creating persistent client-side state with localStorage
• Generating consistent store patterns across a codebase

Best practices

• Define clear, minimal state shape and explicit action signatures for type safety
• Use slices for large apps to keep each feature's state and actions isolated
• Wrap persistence only for the parts of state that are safe to store client-side
• Add devtools middleware in development but conditionally disable it in production
• Keep side effects outside the store; call APIs in services and update the store from results

Example use cases

• Create cart.store.ts with items, totals, add/remove actions, and localStorage persistence
• Generate auth.store.ts with user, token, login/logout actions and session persistence
• Scaffold ui.store.ts for modal visibility, toasts, and temporary UI flags (no persistence)
• Produce form slice stores with typed fields, validation state, and reset actions
• Convert a Redux slice to a compact zustand slice file for a specific feature

FAQ