Zustand Store Create Zustand stores following established patterns with proper TypeScript types and middleware. Quick Start Copy the template from assets/template.ts and replace placeholders: {{StoreName}} → PascalCase store name (e.g., Project ) {{description}} → Brief description for JSDoc Always Use subscribeWithSelector import { create } from 'zustand' ; import { subscribeWithSelector } from 'zustand/middleware' ; export const useMyStore = create < MyStore
( ) ( subscribeWithSelector ( ( set , get ) => ( { // state and actions } ) ) ) ; Separate State and Actions export interface MyState { items : Item [ ] ; isLoading : boolean ; } export interface MyActions { addItem : ( item : Item ) => void ; loadItems : ( ) => Promise < void
; } export type MyStore = MyState & MyActions ; Use Individual Selectors // Good - only re-renders when
itemschanges const items = useMyStore ( ( state ) => state . items ) ; // Avoid - re-renders on any state change const { items , isLoading } = useMyStore ( ) ; Subscribe Outside React useMyStore . subscribe ( ( state ) => state . selectedId , ( selectedId ) => console . log ( 'Selected:' , selectedId ) ) ; Integration Steps Create store in src/frontend/src/store/ Export from src/frontend/src/store/index.ts Add tests in src/frontend/src/store/*.test.ts When to Use This skill is applicable to execute the workflow or actions described in the overview.