Generate TypeScript Zustand Stores

This skill creates Zustand stores in TypeScript following an established, opinionated pattern rather than ad hoc state setup. It starts from a template (assets/template.ts) with placeholders ({{StoreName}} for the PascalCase store name, {{description}} for a JSDoc summary) to fill in rather than writing a store from scratch. Its core conventions: always wrap the store creator with the subscribeWithSelector middleware from zustand/middleware (rather than plain create()) so selective subscriptions work correctly; separate state and actions into distinct TypeScript interfaces (MyState for data, MyActions for functions) combined into a single MyStore type, rather than one flat interface mixing both; and always read from the store with individual selectors (useMyStore((state) => state.items)) so a component only re-renders when that specific slice changes, rather than destructuring the whole store, which re-renders on any state change anywhere in it.

It also covers subscribing to store changes outside of React components entirely, using useMyStore.subscribe() with a selector function and a callback - useful for side effects, logging, or syncing state changes to something outside the component tree. Its integration steps are concrete: create the new store file under src/frontend/src/store/, export it from that directory's index.ts barrel file, and add corresponding tests as src/frontend/src/store/*.test.ts.

Use this skill when creating a new Zustand store, adding a store that needs proper TypeScript typing and middleware, or bringing an existing ad hoc store in line with the project's established store conventions (separated state/actions, subscribeWithSelector, individual selectors).

It is scoped to this specific Zustand store pattern and project structure (src/frontend/src/store/) - it's not general state-management architecture guidance disconnected from Zustand, nor a comparison of Zustand against other state libraries.

Input is a new piece of frontend state needing a store, or an existing store to bring into line with the established pattern. Output is a TypeScript Zustand store file built from the template, with subscribeWithSelector middleware, separated state/action interfaces, exported from the store barrel file, and accompanied by a test file.

export const useMyStore = create<MyStore>()(
  subscribeWithSelector((set, get) => ({ /* state and actions */ }))
);

Built on Zustand and its subscribeWithSelector middleware, targeting a specific project structure (src/frontend/src/store/ with an index.ts barrel export and colocated *.test.ts files).

Frontend developers on this project adding or standardizing Zustand stores who need to follow the established TypeScript, middleware, and selector conventions rather than inventing a new state pattern per store.