| name | optimizer |
| description | This skill should be used when the user asks to "optimize", "improve performance", "add state management", "add URL state", or mentions Zustand, TanStack Form, client-side fetching with Convex, optimistic updates, or custom async mutation/query hooks. Provides best practices for state management, URL state via TanStack Router, data fetching with Convex queries, and forms. |
Guide optimal patterns for NowStack application development. Covers Zustand for global UI state, direct Convex React hooks for live server data, TanStack Form for form handling, TanStack Router search params for URL state, TanStack Query mutations for imperative async lifecycle state, and local `useAsyncQuery` helpers for non-Convex async reads. This stack is **TanStack Start + Convex** — there are no Next.js Server Components, no `"use cache"` directive, and no `cacheTag`/`revalidateTag` semantics here.
If the optimization target is Convex database bandwidth, documents read vs
returned, .filter() scans, index design, or expensive Convex query syntax,
use convex-cost-optimizer first.
<quick_start>
<decision_tree>
Choose the right tool:
| Need | Solution | Reference |
|---|
| Shared UI state between components | Zustand store | references/state-management.md |
| LocalStorage-persisted state | Zustand with persist middleware | references/state-management.md |
| URL state (filters, pagination) | TanStack Router search params (useSearch) | references/client-side-fetch.md |
| Server data on a route | Server guard/loader + Convex useQuery | |
```tsx
// GOOD - single source of truth
const isOpen = useDialogStore((s) => s.isOpen);
```
Fetching in `useEffect`:
```tsx
// BAD - no caching, no loading state, no live updates
useEffect(() => {
fetch("/api/data").then(setData);
}, []);
```
```ts
// GOOD - Convex query through convex/react
const feedback = useQuery(api.feedbacks.queries.listAdmin, {});
```
Calling Convex directly with raw `fetch` to the Convex HTTP endpoint:
```ts
// BAD - bypasses auth wiring
const res = await fetch(`${convexUrl}/api/run/...`);
```
```ts
// GOOD - authenticated server-to-Convex calls
import { fetchAuthQuery, fetchAuthMutation } from "@/lib/auth-server";
const data = await fetchAuthQuery(api.feedbacks.queries.list, {});
```
