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

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

When to Use Multiple Slices (Core Pattern)

Use multiple slices to organize complex state by feature domains:

Generated Files

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