# Zustand Stores

Designs Zustand store state, selectors, optimistic writes and action composition.

- Repository: https://github.com/lobehub/lobehub (83676 stars)
- Category: Engineering
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add lobehub/lobehub --skill zustand -g -a claude-code -y`
Codex: `npx skills add lobehub/lobehub --skill zustand -g -a codex -y`
Cursor: `npx skills add lobehub/lobehub --skill zustand -g -a cursor -y`
Gemini CLI: `npx skills add lobehub/lobehub --skill zustand -g -a gemini-cli -y`

## Description

Use for Zustand stores: state shapes and type sources, state-only stores with xActions classes, replica-backed list/detail data (local-replica), selectors, optimistic writes, and legacy slice/internal_* action composition.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# LobeHub Zustand State Management

## State Shapes and Types

- Import shared store types from `@lobechat/types`, not `@lobechat/database`.
- Keep lightweight list-item types separate from full detail types; list types must not extend heavy detail types.
- Key cached details by id (`xxxDetailMap: Record<string, Detail>`); never hold a single `currentDetail` object.
- Read through `xxxSelectors` aggregates (`selectors.ts`), not ad-hoc lambdas repeated across components.
- Before choosing list/detail shapes or type sources, read [Data structures](references/data-structures.md).

## State-Only Stores (default for new and migrated stores)

Actions stay out of the Zustand state. Reference: `src/store/page`.

| File               | Owns                                                                                                                     |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------ |
| `store.ts`         | `useXStore = createWithEqualityFn<XState>()(devtools(() => initialState), shallow)`: state only, no methods              |
| `privateAction.ts` | `XPrivateAction`: replica slices, entity links, and write helpers shared by public actions. Not exported from `index.ts` |
| `action.ts`        | `XActionImpl` (the public API) and the singleton `xActions = new XActionImpl(setState, getState, new XPrivateAction(…))` |

The rest: https://github.com/lobehub/lobehub/blob/HEAD/.agents/skills/zustand/SKILL.md