zustand-store-ts
Creates structured Zustand stores in TypeScript for React applications.
Install
mkdir -p .claude/skills/zustand-store-ts && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/8658" && unzip -o skill.zip -d .claude/skills/zustand-store-ts && rm skill.zipInstalls to .claude/skills/zustand-store-ts
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Generate Zustand stores with TypeScript
- →Implement subscribeWithSelector middleware
- →Separate state and actions into interfaces
- →Create individual state selectors
- →Set up store subscriptions outside React
How it works
The agent uses a predefined template to generate stores that enforce type safety, middleware usage, and clean separation of state and actions.
Inputs & outputs
When to use zustand-store-ts
- →Creating global state stores
- →Implementing reactive state patterns
- →Setting up typed React stores
About this skill
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 not to use it
- →Managing local component state
- →Over-engineering simple state needs
Limitations
- →Requires adherence to specific file structure
- →Limited to Zustand state management
How it compares
It automates the boilerplate and enforces architectural patterns that prevent unnecessary re-renders compared to manual store creation.
Compared to similar skills
zustand-store-ts side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| zustand-store-ts (this skill) | 4 | 3mo | No flags | Beginner |
| nextjs-developer | 328 | 2mo | No flags | Advanced |
| zustand | 113 | 2mo | No flags | Intermediate |
| ui-ux-expert-skill | 91 | 9mo | Review | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by microsoft
View all by microsoft →You might also like
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
zustand
lobehub
Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.
ui-ux-expert-skill
fercracix33
Technical workflow for implementing accessible React user interfaces with shadcn/ui, Tailwind CSS, and TanStack Query. Includes 6-phase process with mandatory Style Guide compliance, Context7 best practices consultation, Chrome DevTools validation, and WCAG 2.1 AA accessibility standards. Use after Test Agent, Implementer, and Supabase agents complete their work.
web-artifacts-builder
anthropics
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
accessibility-compliance
wshobson
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.
radix-ui-design-system
sickn33
Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.