Zustand Store Scaffold

Generate type-safe class-based Zustand stores with flattenActions for prototype-safe slice composition.

Quick Start

Web Pattern (Component-level Store)

python3 ~/.claude/skills/zustand-store-scaffold/scripts/scaffold_zustand_store.py \
  --pattern web \
  --name ToolList \
  --path web/src/pages/_components/ToolList/store

Generates:

• types.ts — StoreSetter<T> type definition
• utils/flattenActions.ts — Prototype-safe action flattener
• index.ts — Class-based store with ActionImpl + flattenActions
• context.ts — React Context and typed useContext hook
• provider.tsx — Memo-wrapped Provider component

Core Pattern (Slice-based Store)

Single Slice:

python3 ~/.claude/skills/zustand-store-scaffold/scripts/scaffold_zustand_store.py \
  --pattern core \
  --name CoreAgent \
  --path packages/ag-ui-view/src/core/helpers/isomorphic/store

Multiple Slices (Interactive):

python3 ~/.claude/skills/zustand-store-scaffold/scripts/scaffold_zustand_store.py \
  --pattern core \
  --name AppStore \
  --path src/store
# Will prompt: Enter slice names (comma-separated, or press Enter for 'core'):
# Example input: auth,user,ui

Multiple Slices (Direct):

python3 ~/.claude/skills/zustand-store-scaffold/scripts/scaffold_zustand_store.py \
  --pattern core \
  --name AppStore \
  --path src/store \
  --slices auth,user,ui

Generates:

• types.ts — StoreSetter<T> type definition
• utils/flattenActions.ts — Prototype-safe action flattener
• index.ts — Store factory with flattenActions slice composition
• slices/[name].ts — Class-based slice with ActionImpl + #private fields

Options

Option	Required	Description	Example
--pattern	Yes	Store pattern (web or core)	--pattern web
--name	Yes	Store name in PascalCase	--name ToolList
--path	Yes	Target directory path	--path src/store
--slices	No	Comma-separated slice names (core only)	--slices auth,user,ui
--force	No	Overwrite existing files	--force

Note: For core pattern without --slices, the script interactively asks for slice names. Shared files (types.ts, utils/flattenActions.ts) are skipped if they already exist (unless --force).

Choose the Right Pattern

Pattern	Use When	Location Pattern	Slices
web	Component-level state with Provider	web/src/pages/_components/**/store	N/A
core	Isomorphic/shared state with slices	packages/**/store	Single or multiple

When to Use Multiple Slices (Core Pattern)

Use multiple slices to organize complex state by feature domains:

Scenario	Recommended Slices
Authentication app	auth, user, session
E-commerce store	cart, products, user, ui
Dashboard	data, filters, ui, settings
Chat application	messages, contacts, ui, notifications

Generated Files

File	Purpose
types.ts	StoreSetter<T> — type-safe overloaded setter matching Zustand internals
utils/flattenActions.ts	flattenActions<T> — walks prototype chain, binds methods, merges class instances
index.ts	Store factory combining initial state + flattenActions composition
slices/*.ts (core)	*ActionImpl class with #set/#get, exported via create*Slice
context.ts (web)	React Context + typed selector hook
provider.tsx (web)	Memo-wrapped Provider with ref-stable store creation

Post-Generation Steps

1. Define state in *SliceState interface (core) or *StoreState interface (web):

   export interface CoreSliceState {
     agents: Agent[]
     selectedId: string | null
   }
   

2. Add action methods as arrow functions in *ActionImpl class:

   export class CoreActionImpl {
     readonly #set: StoreSetter<CoreSlice>
     readonly #get: () => CoreSlice
     // ...constructor
   
     selectAgent = (id: string): void => {
       this.#set({ selectedId: id })
     }
   
     getSelectedAgent = (): Agent | undefined => {
       const { agents, selectedId } = this.#get()
       return agents.find((a) => a.id === selectedId)
     }
   }
   

3. Set initial state in the store factory or config:

   const store = createCoreAgentStore({
     initialState: { agents: [], selectedId: null }
   })
   

Usage Examples

Web Store Usage

import Provider from './store/provider'
import { useToolListContext } from './store/context'

function ToolListPage() {
  return (
    <Provider>
      <ToolListContent />
    </Provider>
  )
}

function ToolListContent() {
  const toolList = useToolListContext((s) => s.toolList)
  const setToolList = useToolListContext((s) => s.setToolList)
  // Go to Definition on setToolList → lands directly on ActionImpl method
}

Core Store Usage

import { createCoreAgentStore } from './store'

const store = createCoreAgentStore({
  initialState: { agents: [], selectedId: null }
})

// Vanilla JS
const state = store.getState()
state.selectAgent('agent-1')

// React (with useStore)
import { useStore } from 'zustand'

function AgentList() {
  const agents = useStore(store, (s) => s.agents)
  const selectAgent = useStore(store, (s) => s.selectAgent)
}

References

• See references/class-based-pattern.md for detailed pattern documentation
• See references/store-patterns.md for complete code examples
• Reference PR: lobehub#12081