npx skills add ...
npx skills add microsoft/skills --skill zustand-store-ts
npx skills add microsoft/skills --skill zustand-store-ts
Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation. Use when building React state management, creating global stores, or implementing reactive state patterns with Zustand.
Create Zustand stores following established patterns with proper TypeScript types and middleware.
Copy the template from assets/template.ts and replace placeholders:
{{StoreName}} → PascalCase store name (e.g., Project){{description}} → Brief description for JSDocsrc/frontend/src/store/src/frontend/src/store/index.tssrc/frontend/src/store/*.test.tsexport interface MyState {
items: Item[];
isLoading: boolean;
}
export interface MyActions {
addItem: (item: Item) => void;
loadItems: () => Promise<void>;
}
export type MyStore = MyState & MyActions;// Good - only re-renders when `items` changes
const items = useMyStore((state) => state.items);
// Avoid - re-renders on any state change
const { items, isLoading } = useMyStore();useMyStore.subscribe(
(state) => state.selectedId,
(selectedId) => console.log('Selected:', selectedId)
);