zustand

# Zustand Skill Expert assistance for implementing Zustand state management with modern patterns and TypeScript. ## Capabilities - Create type-safe Zustand stores - Implement middleware (persist, devtools, immer) - Design store slices for modular state - Optimize selectors for performance - Handle async actions and subscriptions - Integrate with React components efficiently ## Usage Invoke this skill when you need to: - Set up lightweight global state - Create stores with persistence - Implement complex state with slices - Optimize component re-renders with selectors - Migrate from Redux or Context ## Inputs | Parameter | Type | Required | Description | |-----------|------|----------|-------------| | storeName | string | Yes | Name of the store | | stateShape | object | Yes | Initial state structure | | actions | array | Yes | Store actions to create | | middleware | array | No | Middleware to apply | | persist | boolean | No | Enable persistence | ### Configuration Example ```json { "storeName": "useCartStore", "stateShape": { "items": [], "total": 0 }, "actions": ["addItem", "removeItem", "clearCart"], "middleware": ["devtools", "persist"], "persist": true } ``` ## Generated Patterns ### Basic Store ```typescript import { create } from 'zustand'; interface CartItem { id: string; name: string; price: number; quantity: number; } interface CartStore { items: CartItem[]; total: number; addItem: (item: Omit<CartItem, 'quantity'>) =...