skills.rest
zuzu59
zuzu59COMMUNITY
Explore all skills by this author →
GitHub

optimizer

Prescribe Zustand, TanStack Form, Router URL state, and Convex data access patterns.

Updated Jun 1, 2026
Search Tags:#forms#zustand#state-management#convex#tanstack-router#tanstack-form
One-click install
npx skills add https://github.com/zuzu59/z-skills --skill optimizer-zuzu59
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimizer
Source: https://github.com/zuzu59/z-skills/tree/main/skills/optimizer
Command: npx skills add https://github.com/zuzu59/z-skills --skill optimizer-zuzu59

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides a structured approach to building resilient client-side architecture by prescribing best practices for UI state with Zustand, URL state with TanStack Router, and forms with TanStack Form, while coordinating live server data via Convex.

Core Features & Use Cases

  • Guidance for using Zustand for shared UI state (and persistence) and when not to use it for server data.
  • URL state patterns using TanStack Router search params; avoiding local component state for filters, navigation, and route params.
  • Form handling with TanStack Form (and Zod) integrated with Convex mutations, including validation and submission patterns.
  • Data fetching and mutations through Convex hooks; optimistic updates when instant feedback is needed, and proper use of non-convex reads via useAsyncQuery for non-critical reads.

Quick Start

Ask the assistant to apply these patterns to your NowStack app to set up UI state, URL state, and live Convex data integration.

Frequently Asked Questions about optimizer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I manage client-side state with Zustand and Convex without duplicating server data?▼

Use Zustand strictly for shared UI state and persistence, while relying on Convex useQuery and useMutation hooks for live server data to prevent state duplication and ensure data consistency.

What's the best way to handle URL state in a TanStack Router application?▼

Handle URL state in TanStack Router by using route search params for filters and navigation, avoiding local component state to ensure shareable URLs and proper navigation history.

How do I integrate TanStack Form with Convex mutations for data submission?▼

Integrate TanStack Form with Convex by using Zod for validation and connecting form submission events directly to Convex mutations, applying optimistic updates when instant UI feedback is needed.

When should I use non-Convex reads via useAsyncQuery instead of standard Convex hooks?▼

Use useAsyncQuery for non-critical reads where real-time live updates are not required, reserving standard Convex useQuery hooks for primary application data that demands immediate consistency.

Can I apply these state management patterns to applications outside of NowStack?▼

Yes, the prescribed patterns for Zustand, TanStack Form, TanStack Router, and Convex are applicable to any client-side architecture requiring structured UI, URL, and server data coordination.

Related Skills

Explore More Software Engineering Skills→
Yoriichi-DangYoriichi-Dang

nextjs-app-router-patterns

Architect Next.js apps with App Router patterns for server components and streaming.

Community
Advanced
JaveedIshaqJaveedIshaq
1

State Management Patterns

Provide state management patterns for server, client, atomic, and URL states.

Community
Intermediate
fyndxfyndx
1

zod

Validate data against Zod schemas with TypeScript type inference.

Official
Intermediate
salmanrranasalmanrrana
7

TanStack Forms

Integrate TanStack Forms with React for form construction, validation, and submission.

Community
Advanced