skills.rest
ogghst
ogghstCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-state-dev

Create versioned and simple CRUD hooks with TanStack Query and Zustand.

Updated Dec 27, 2025
Search Tags:#state management#Zustand#frontend#TanStack Query#time-travel#Immer
One-click install
npx skills add https://github.com/ogghst/backcast --skill frontend-state-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-state-dev
Source: https://github.com/ogghst/backcast/tree/main/.claude/skills/frontend-state-dev
Command: npx skills add https://github.com/ogghst/backcast --skill frontend-state-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines frontend state management for versioned and simple entities by combining TanStack Query for server state with Zustand and Immer for client state, all under strict context isolation.

Core Features & Use Cases

  • Centralizes query keys, CRUD hooks, and time-machine aware patterns to ensure branch/time travel data consistency.
  • Supports versioned data with asOf and merged/isolated modes to prevent cross-branch data leakage.
  • Provides a factory-based approach to create versioned or simple resource hooks and to configure dependent invalidations for EVM metrics.

Quick Start

  • Decide whether the entity is versioned (needs time travel) or simple.
  • Add query keys in the project's queryKeys module.
  • Create CRUD hooks using the appropriate factory function.
  • Configure dependent invalidations to keep metrics in sync.
  • Implement a component that consumes the hooks with proper time-machine context.

Frequently Asked Questions about frontend-state-dev

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

FAQPage Schema
How do I manage frontend state for versioned entities with time-travel support?▼

Versioned frontend state management combines TanStack Query for server state with Zustand and Immer for client state, enforcing context-isolated query keys to support time-travel across branches and asOf timestamps without cross-branch data leakage.

How does context isolation prevent cross-branch data leakage in TanStack Query?▼

Context isolation prevents cross-branch data leakage by enforcing strict, context-isolated query keys in TanStack Query, separating versioned data into merged or isolated modes to keep branch-specific time-travel data distinct.

What is the best way to keep EVM metrics in sync when invalidating frontend queries?▼

Keeping EVM metrics in sync during query invalidation requires configuring dependent invalidation through a factory-based approach when creating CRUD hooks, automatically cascading updates to related metrics when underlying versioned entity data changes.

Can I use Zustand and Immer with TanStack Query for client and server state?▼

Yes, combining Zustand and Immer with TanStack Query separates client state from server state, centralizing CRUD hooks and query keys while maintaining strict context isolation for reliable versioned data fetching and caching.

How do I create CRUD hooks for simple versus versioned entities?▼

Creating CRUD hooks for simple versus versioned entities involves deciding if the entity needs time travel, then applying the appropriate factory function to generate resource hooks configured with proper time-machine context and dependent invalidation.

Related Skills

Explore More Software Engineering Skills→
belokonmbelokonm
8

react-specialist

Provide expert React 18+ patterns, hooks, and state management guidance.

Community
Advanced
4tie4tie

react-vite

Build React and Vite apps with routing, API hooks, and SEO-aware pages.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

zustand-middleware

Compose Zustand middleware for persistence, DevTools, and Immer updates.

Official
Advanced
nekorush14nekorush14
4

react-state-management

Manage React client state with Context API and server state with TanStack Query.

Community
Advanced