with one click
zustand-store-ts
Create Zustand stores following established patterns with proper TypeScript types and middleware.
Create Zustand stores following established patterns with proper TypeScript types and middleware.
Audit deployed Vercel apps for cost and performance issues using metrics, project config, code scans, and version-aware recommendations.
Find and fix WCAG 2.2 accessibility issues. Two modes — report (sweep a codebase or page, produce a prioritized written report, no edits) and fix (audit→edit→verify loop on a target). Prefers direct-CDP live-DOM auditing; falls back to a browser-MCP composition or HTML-string audits.
Diff a live page's accessibility violations against a baseline — by default compares uncommitted changes (stash-based), or pass --branch [<name>] to diff against a branch. Reports only new violations introduced, violations fixed, and pre-existing count. Use `scan` for a full audit with no diffing.
Audit a live page for accessibility issues, locate each WCAG violation precisely, and return a selector-grounded fix worklist without editing.
Use when working with composition-patterns tasks or workflows
Use when working with debugging toolkit smart debug (Alias for debugging-toolkit-smart-debug)
| name | zustand-store-ts |
| description | Create Zustand stores following established patterns with proper TypeScript types and middleware. |
| risk | unknown |
| source | community |
| date_added | 2026-02-27 |
Create Zustand stores following established patterns with proper TypeScript types and middleware.
Copy the template from assets/template.ts and replace placeholders:
{{StoreName}} → PascalCase store name (e.g., Project){{description}} → Brief description for JSDocimport { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';
export const useMyStore = create<MyStore>()(
subscribeWithSelector((set, get) => ({
// 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;
// Good - only re-renders when `items` changes
const items = useMyStore((state) => state.items);
// Avoid - re-renders on any state change
const { items, isLoading } = useMyStore();
useMyStore.subscribe(
(state) => state.selectedId,
(selectedId) => console.log('Selected:', selectedId)
);
src/frontend/src/store/src/frontend/src/store/index.tssrc/frontend/src/store/*.test.tsThis skill is applicable to execute the workflow or actions described in the overview.