Typed Zustand Store Patterns
Build predictable, reactive Zustand stores with typed state, actions, and selective subscriptions.
The skill only supplies Zustand/TypeScript code patterns and contains no network, credential, filesystem-write, or destructive default behavior; the repository also provides MIT licensing and Microsoft author metadata. Points are deducted because data flow, sensitive-data handling, user confirmation, rollback boundaries, and dependency-security guidance are not explicit; risk is low for a code template, but trust controls remain incomplete.
The SKILL.md and template are broadly consistent about Zustand, subscribeWithSelector, state/action separation, and selector usage, and the skill asks users to add tests. Points are deducted because the template contains unknown[] types, a placeholder fetch, and unfinished business logic, with no skill-specific tests, compatibility matrix, or abnormal-input behavior; static calibration caps this dimension at10.
The audience and scenarios are reasonably clear: React state management, global stores, and reactive patterns, with stated locations for the store, exports, and tests. Points are deducted because non-fit cases, required Zustand versions, non-React boundaries, and more precise trigger conditions are absent; there is no overseas-service dependency, so no additional mainland-China reachability deduction applies.
The documentation uses a readable progressive structure with Quick Start, examples, integration steps, and an assets/template.ts file; naming, MIT licensing, author, and version 1.0.0 are present. Points are deducted for missing installation/dependency notes, compatibility versions, FAQ, known limitations, changelog, and explicit maintenance responsibility or update path.
The skill provides a useful starter store containing types, state, actions, subscriptions, and reset behavior, so the core output is clear. Points are deducted because users must replace placeholders, add real types and fetching logic, and validate business semantics; no representative completed output or comparative-benefit evidence is supplied, and static calibration caps this dimension at7.
The SKILL.md and template contain inspectable examples, and the repository includes general harness, test, and CI files. Points are deducted because no skill-specific acceptance criteria, committed tests, or third-party reproduction evidence for zustand-store-ts are provided; generic repository tests do not establish the skill's key paths, and static calibration caps this dimension at5.
- loadItems only returns an empty array and should not be treated as a real data-loading implementation.
- unknown[] and the type assertion used to read item.id weaken TypeScript safety; concrete entity types should be supplied.
- The skill does not specify the Zustand version, installation method, or compatibility requirements for subscribeWithSelector.
- Repository-level CI and harness files do not substitute for skill-path-specific acceptance tests.
What does this skill do, and when should you use it?
This Microsoft-authored skill guides TypeScript developers in building Zustand stores for React applications. It standardizes store creation with the subscribeWithSelector middleware and separates state definitions from actions. It recommends individual selectors to limit unnecessary re-renders and documents subscriptions outside React. It is a good fit for teams that want a consistent store layout and integration checklist, but it does not provide a full application architecture.
Directs the agent to copy and customize assets/template.ts; create a Zustand store with subscribeWithSelector; define separate state and action interfaces plus a combined store type; read state through individual selectors; subscribe to selected state outside React; place stores under src/frontend/src/store/, export them from index.ts, and add tests under the same store directory.
- A React developer needs a typed global store with synchronous and asynchronous actions.
- A TypeScript team wants a repeatable separation between Zustand state and actions.
- An application must react to selectedId or similar changes outside React components.
- A frontend team wants selectors that avoid re-rendering on unrelated store updates.
- A project needs a documented location, export point, and test location for new stores.
What are this skill's strengths and limitations?
- Enforces subscribeWithSelector for selective subscriptions.
- Provides a clear TypeScript model for separating state from actions.
- Covers component selectors, subscriptions outside React, exports, and test placement.
- Includes a reusable assets/template.ts starting point.
- The source does not specify a Zustand version or a complete dependency installation procedure.
- No concrete test implementation or test framework configuration is included.
- Advanced concerns such as persistence, error handling, and complex store architecture are outside the documented scope.
How do you install this skill?
Run npx skills add microsoft/skills and select this skill in the installation wizard. The collection installs skills into the selected agent directory, such as .github/skills/ for GitHub Copilot, and can be symlinked for multiple agents. The repository is licensed under MIT.
How do you use this skill?
Trigger it when building React state management, creating a global Zustand store, or implementing a reactive TypeScript state pattern. Example prompt: "Create a TypeScript Zustand store for project items with subscribeWithSelector, separate state and actions, individual selectors, and tests." Customize assets/template.ts by replacing the StoreName and description placeholders.