Skip to content
cccskills
FreePublished on GitHub

zustand-store-ts

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

The English summary is being prepared. Showing the original description.

hybridlabor-api/aos
See how to install

Files included (1)

  • SKILL.md2.0 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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

  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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

agent-manager-skill

Free

Use when manage multiple local CLI agents via tmux sessions (start/stop/monitor/assign) with cron-friendly scheduling.

The English summary is being prepared. Showing the original description.

hybridlabor-api/aos6Updated Oct 16, 2026

agent-memory-mcp

Free

Use when a hybrid memory system that provides persistent, searchable knowledge management for AI agents (Architecture, Patterns, Decisions).

The English summary is being prepared. Showing the original description.

hybridlabor-api/aos6Updated Oct 16, 2026

agent-pipeline

Free

Reference for how BDB structures autonomous software engineering work — the seven-node dispatcher graph (Architect, TechLead, UI/UX, Engineering, Media/EventTech, Reviewer, Shipping) that /startcycle-graph actually runs. Use when you need the high-level lifecycle framing without inventing your own process.

The English summary is being prepared. Showing the original description.

hybridlabor-api/aos6Updated Oct 16, 2026

agent-tool-builder

Free

Tools are how AI agents interact with the world. A well-designed tool is the difference between an agent that works and one that hallucinates, fails silently, or costs 10x more tokens than necessary. This skill covers tool design from schema to error handling.

The English summary is being prepared. Showing the original description.

hybridlabor-api/aos6Updated Oct 16, 2026

agentic-harness-patterns

Free

Harness patterns for coding agents — memory, permissions, context engineering, delegation, skills, hooks, bootstrap.

The English summary is being prepared. Showing the original description.

hybridlabor-api/aos6Updated Oct 16, 2026

agenttrail

Free

agenttrail: live map of a multi-agent build in the browser: which plan component is being worked on, by which agent or harness, what is done and what is stuck. Use when a multi-agent pipeline starts (/startcycle, /startcycle-graph, /teamwork-preview) or after a plan-canvas approve, when the user asks to see what the agents are doing ("live map", "build board", "who is running now"), or by yourself whenever a multi-agent run is under way — no user prompt needed.

The English summary is being prepared. Showing the original description.

hybridlabor-api/aos6Updated Oct 16, 2026

See all skills by hybridlabor-api

Report a problem with this skill