superpower-zustandlisted

# Zustand StoreBuilder Pattern <CRITICAL> DO NOT create Zustand stores using standard patterns (create with inline actions). ALL Zustand stores in this project MUST use the StoreBuilder pattern defined below. This is a required architectural standard, not a suggestion. </CRITICAL> ## Purpose Enforce a standardized, type-safe approach to creating Zustand stores that: - Separates state definition from actions using the factory pattern - Integrates immer middleware for convenient immutable updates - Supports optional persistence with fine-grained control - Exposes both reactive (useStore hook) and non-reactive (get/set) access - Maintains consistent patterns across the codebase ## When to Use This Skill Use this skill when: - Creating new Zustand stores for state management - User requests state management solutions in a React application - Implementing stores for any feature requiring client-side state ## Required Pattern All Zustand stores MUST use the StoreBuilder utility located in `assets/storebuilder.ts`. ### Core Implementation Steps 1. **Copy the StoreBuilder utility** (if not already in the project) - Source: `skills/superpower-zustand/assets/storebuilder.ts` - Destination: `src/lib/storebuilder.ts` (or similar location in the project) 2. **Define state type separately from actions** - Create a type for the full store (state + actions) - Use `Omit` to exclude action methods when passing to StoreBuilder 3. **Initialize the store with StoreBuilder**