developer coding skill risk: low

Zustand TypeScript Store Generator

Instructs the model to create Zustand stores following established patterns with proper TypeScript types and middleware such as subscribeWithSelector, including templates for separ…

SKILL 1 file

SKILL.md

Download

---
name: antigravity-awesome-skills-zustand-store-ts-02127a14
description: "Create Zustand stores following established patterns with proper TypeScript types and middleware."
---
# 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

```typescript
import { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';

export const useMyStore = create<MyStore>()(
  subscribeWithSelector((set, get) => ({
    // state and actions
  }))
);
```

## Separate State and Actions

```typescript
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

```typescript
// 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

```typescript
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.

INPUTS

StoreName REQUIRED

PascalCase store name

e.g. Project

description

Brief description for JSDoc

REQUIRED CONTEXT

store name
state shape
actions

OPTIONAL CONTEXT

description

ROLES & RULES

Copy the template from assets/template.ts and replace placeholders
Always Use subscribeWithSelector
Separate State and Actions
Use Individual Selectors
Subscribe Outside React
Create store in `src/frontend/src/store/`
Export from `src/frontend/src/store/index.ts`
Add tests in `src/frontend/src/store/*.test.ts`
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

EXPECTED OUTPUT

Format

code

Constraints

use subscribeWithSelector middleware
separate state and actions interfaces
use individual selectors
follow template placeholders for StoreName and description

SUCCESS CRITERIA

Create Zustand stores following established patterns
Use proper TypeScript types and middleware
Apply subscribeWithSelector, separate state/actions, and individual selectors

FAILURE MODES

May be applied outside the described scope
Output may skip required environment-specific validation or testing

EXAMPLES

Includes multiple code snippets demonstrating subscribeWithSelector usage, state/action interfaces, individual selectors, and external subscriptions.

CAVEATS

Dependencies

Requires template from assets/template.ts

Missing context

Full content or location of assets/template.ts
Exact project root or file paths context

Ambiguities

Refers to 'assets/template.ts' and 'the overview' without including their content.
'When to Use' section references an external overview that is not present.

QUALITY

OVERALL: 0.78
CLARITY: 0.80
SPECIFICITY: 0.85
REUSABILITY: 0.75
COMPLETENESS: 0.70

IMPROVEMENT SUGGESTIONS

Embed the template.ts file contents directly in the prompt instead of referencing an external asset.
Remove or replace the vague 'When to Use' paragraph that points to a missing overview.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.