From azure-sdk-typescript
Creates TypeScript Zustand stores using subscribeWithSelector middleware, state/action separation, selectors, and non-React subscriptions for React state management.
npx claudepluginhub microsoft/skills --plugin azure-sdk-typescriptThis skill uses the workspace's default tool permissions.
Create Zustand stores following established patterns with proper TypeScript types and middleware.
Creates Zustand stores with TypeScript types, subscribeWithSelector middleware, separated state/actions, individual selectors, and non-React subscriptions. For React state management.
Guides type-safe Zustand stores in TypeScript: interfaces, typed selectors, getters, async actions, type inference, and best practices.
Creates lightweight global stores with Zustand's create function for minimal-boilerplate React state management. Use for auth, UI flags, preferences without prop drilling or Redux complexity.
Share bugs, ideas, or general feedback.
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 JSDocimport { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';
export const useMyStore = create<MyStore>()(
subscribeWithSelector((set, get) => ({
// 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;
// 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)
);
src/frontend/src/store/src/frontend/src/store/index.tssrc/frontend/src/store/*.test.ts