Zustand Store Ts

This generates Zustand stores with TypeScript following a specific pattern: state and actions separated into distinct interfaces, subscribeWithSelector middleware by default, and individual selectors to avoid unnecessary re-renders. You get a template with placeholders for store names and descriptions, plus guidance on subscribing outside React components. It's opinionated about structure, which is helpful if you want consistency across stores but might feel restrictive if your team already has different conventions. The integration steps assume a specific folder structure under src/frontend/src/store, so it's clearly built for a particular project setup rather than general use.

skills.sh installs: 254
GitHub stars: 39.4K
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add sickn33/antigravity-awesome-skills --skill zustand-store-ts --agent claude-code

Installs into .claude/skills of the current project.

Files

Zustand Store

Create Zustand stores following established patterns with proper TypeScript types and middleware.

Quick Start

No assets/template.ts is bundled. Adapt the inline examples to the installed Zustand version and actual project types; these are fragments, not a complete application.

Use subscribeWithSelector for selector subscriptions

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();