Zustand Store Ts
Create Zustand stores following established patterns with proper TypeScript types and middleware.
npx claude-code-templates@latest --skill web-development/zustand-store-ts Scanned by NVIDIA SkillSpector
Automated static analysis (no LLM) · v2.12.0 · 2026-10-24
Partial analysis: some checks could not run on this component.
SkillSpector looks for patterns such as shell commands, credential access, network calls or unpinned dependencies. An observation is something worth reading in the files before you install, not a confirmed vulnerability. Components that run code locally, like hooks, MCP servers and security tooling, naturally show more of them.
No observations.
Learn more about NVIDIA SkillSpector.
Content
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
import { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';
export const useMyStore = create<MyStore>()(
subscribeWithSelector((set, get) => ({
// state and actions
}))
);Separate 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;Use Individual Selectors
// Good - only re-renders when `items` changes
const items = useMyStore((state) => state.items);
// Avoid - re-renders on any state change
const { items, isLoading } = useMyStore();Subscribe Outside React
useMyStore.subscribe(
(state) => state.selectedId,
(selectedId) => console.log('Selected:', selectedId)
);Integration Steps
- Create store in
src/frontend/src/store/ - Export from
src/frontend/src/store/index.ts - Add tests in
src/frontend/src/store/*.test.ts
When to Use
This skill is applicable to execute the workflow or actions described in the overview.