---
name: "zustand-slices-persistent-store"
description: "Manage scalable global client state with modular slice patterns, selectors, and persistence."
metadata:
  author: "Poimandres"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "create zustand slice pattern"
  - "persist zustand store localstorage"
  - "optimize zustand selectors"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Zustand Modular Store Slices & LocalStorage Persistence

Architects state with Zustand: organizing complex stores into distinct slices, configuring persist middleware with local/session storage, devtools middleware integration, and atomic render-optimized selectors.

## When to Invoke
Invoke this skill whenever you need to:
- create zustand slice pattern
- persist zustand store localstorage
- optimize zustand selectors

## Execution SOP & Rules
1. Create slice creator functions: const createUserSlice = (set, get) => ({ user: null, setUser: ... }).
2. Combine slices into root store: create((...a) => ({ ...createUserSlice(...a), ...createCartSlice(...a) })).
3. Wrap with persist middleware configuring name and partialize: (state) => ({ token: state.token }).
4. Consume in components with atomic selector: const user = useStore(state => state.user) (never use destructuring without selectors).

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.