zustand-store-ts Skill

Source

• Creator: microsoft
• Repository: microsoft/skills
• Skill file: .github/plugins/azure-sdk-typescript/skills/zustand-store-ts/SKILL.md

What it does

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.

Skill instructions

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 typescript import { create } from 'zustand'; import { subscribeWithSelector } from 'zustand/middleware'; export const useMyStore = create<MyStore()( subscribeWithSelector((set, get) = ({ // state and actions })) ); Separate State and Actions typescript 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 typescript // Good - only re-renders when items changes const items = useMyStore((state) = state.items); // Avoid - re-renders on any state change const { items, isLoading } = useMyStore(); Subsc