mcpField
Z
zustand-store-ts

zustand-store-ts

github.com/sickn33Development48.7k297 installsUpdated today
Repository

About zustand-store-ts

zustand-store-ts is a skill for creating Zustand stores with TypeScript types and middleware. It provides patterns for selector subscriptions, state/action separation, React selectors, and tests.

Key features

  1. 01Typed state and actions
  2. 02Selector-based subscriptions
  3. 03Individual React selectors
  4. 04Subscriptions outside React
  5. 05Store integration and tests

Use cases

  1. 01Creating a typed Zustand store
  2. 02Reducing unnecessary React re-renders
  3. 03Reacting to selected state changes outside React
  4. 04Organizing store exports and tests

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill zustand-store-ts

After installing, type/zustand-store-tsin Claude Code to confirm it loaded.

Details

From the project README

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

Subscribe Outside React

useMyStore.subscribe(
  (state) => state.selectedId,
  (selectedId) => console.log('Selected:', selectedId)
);

Integration Steps

  1. Create store in src/frontend/src/store/
  2. Export from src/frontend/src/store/index.ts
  3. 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.

Limitations

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

Comments

Markdown supported