@harness-engineering/cli 1.23.2 → 1.24.0

package/dist/agents/skills/cursor/tanstack-devtools/SKILL.md

@@ -0,0 +1,100 @@
+# TanStack Query DevTools
+
+> Inspect cache state, query status, and network activity using the React Query DevTools panel
+
+## When to Use
+
+- Debugging why a query is refetching unexpectedly
+- Inspecting cache entries to verify data shape and freshness
+- Verifying that mutations correctly invalidate the expected queries
+- Checking query key structures and deduplication behavior
+- Understanding `staleTime`, `gcTime`, and observer counts for performance tuning
+
+## Instructions
+
+1. Install `@tanstack/react-query-devtools` as a dev dependency — never ship it to production accidentally.
+2. Import and render `<ReactQueryDevtools>` inside your `QueryClientProvider` — it mounts a floating panel in the browser.
+3. Use `initialIsOpen={false}` (default) to keep the panel collapsed at startup — it opens on demand via the TanStack logo button.
+4. Use `buttonPosition` to move the toggle button away from UI elements: `'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'`.
+5. Guard with a process.env check or use dynamic import to ensure DevTools code is never bundled in production builds.
+6. Use the query panel's "Refetch" button to manually trigger a refetch — useful for testing refetch behavior without network changes.
+7. Click a query entry to see its key, status (`fresh`, `stale`, `fetching`, `paused`), `staleTime`, `gcTime`, observer count, and cached data.
+
+```typescript
+// app/providers.tsx — QueryClientProvider with DevTools
+'use client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { useState } from 'react';
+
+export function QueryProvider({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(() => new QueryClient({
+    defaultOptions: {
+      queries: { staleTime: 60 * 1000 },
+    },
+  }));
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      {/* DevTools only loads in development — tree-shaken in production */}
+      <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-right" />
+    </QueryClientProvider>
+  );
+}
+
+// Alternative: dynamic import to guarantee no production bundle impact
+import dynamic from 'next/dynamic';
+
+const ReactQueryDevtools =
+  process.env.NODE_ENV === 'development'
+    ? dynamic(() =>
+        import('@tanstack/react-query-devtools').then(mod => ({
+          default: mod.ReactQueryDevtools,
+        }))
+      )
+    : () => null;
+```
+
+## Details
+
+The React Query DevTools panel has three main areas:
+
+**Query panel (left sidebar):** Lists all cached queries with color-coded status indicators. Green = fresh, yellow = stale, gray = inactive, blue = fetching, red = error. The number in parentheses is the observer count — how many components are currently subscribed to that query.
+
+**Query details (right panel):** Clicking a query shows its full key, current status, `staleTime`, `gcTime`, last updated timestamp, observer count, and the raw cached data in an expandable JSON tree. This is the primary tool for debugging key mismatches and stale data issues.
+
+**Actions:** Each query entry has actions: `Refetch` (triggers an immediate background refetch), `Invalidate` (marks stale and refetches active), `Reset` (removes cached data), and `Remove` (evicts from cache). These allow debugging cache behavior without modifying code.
+
+**Status meanings:**
+
+- `fresh`: data is within `staleTime` — will not refetch on mount
+- `stale`: `staleTime` expired — will refetch on next mount or window focus
+- `fetching`: active network request in progress
+- `paused`: query is paused (offline or network issue)
+- `inactive`: no components are subscribed — GC timer is running
+- `error`: last fetch failed
+
+**Observer count:** An observer count of `0` means no component is mounted that uses this query — the GC timer is running. Once it hits `0` and `gcTime` expires, the entry is removed. Multiple observers on the same query means multiple components share one cache entry.
+
+**Production safety:** `@tanstack/react-query-devtools` is automatically excluded from production builds when using Next.js or Vite's tree-shaking if imported conditionally. The `process.env.NODE_ENV === 'development'` guard ensures zero bundle impact.
+
+## Source
+
+https://tanstack.com/query/latest/docs/framework/react/devtools
+
+## Process
+
+1. Read the instructions and examples in this document.
+2. Apply the patterns to your implementation, adapting to your specific context.
+3. Verify your implementation against the details and edge cases listed above.
+
+## Harness Integration
+
+- **Type:** knowledge — this skill is a reference document, not a procedural workflow.
+- **No tools or state** — consumed as context by other skills and agents.
+
+## Success Criteria
+
+- The patterns described in this document are applied correctly in the implementation.
+- Edge cases and anti-patterns listed in this document are avoided.

package/dist/agents/skills/cursor/tanstack-devtools/skill.yaml

@@ -0,0 +1,43 @@
+name: tanstack-devtools
+version: "1.0.0"
+description: "@tanstack/react-query-devtools, cache panel, network inspector, and debugging"
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - "**/queries/**"
+  - "**/queryClient.ts"
+  - "**/query-client.ts"
+  - "**/*query*.ts"
+  - "**/providers.*"
+related_skills:
+  - tanstack-query-keys
+  - tanstack-cache-management
+  - tanstack-query-invalidation
+  - react-hooks-pattern
+stack_signals:
+  - tanstack-query
+  - react
+  - typescript
+keywords:
+  - devtools
+  - react-query-devtools
+  - debugging
+  - cache-inspector
+  - query-panel
+  - stale
+metadata:
+  author: community
+  upstream: https://tanstack.com/query/latest/docs/framework/react/devtools
+state:
+  persistent: false
+  files: []
+depends_on: []

package/dist/agents/skills/cursor/tanstack-infinite-queries/SKILL.md

@@ -0,0 +1,106 @@
+# TanStack Query: Infinite Queries
+
+> Implement cursor-based pagination and "load more" UX with useInfiniteQuery
+
+## When to Use
+
+- Building infinite scroll feeds (social media, activity logs, search results)
+- Implementing "Load More" button pagination without traditional page numbers
+- Fetching cursor-based APIs that return a `nextCursor` or `nextPageToken`
+- Building virtualized lists that load additional data as the user scrolls
+
+## Instructions
+
+1. Use `useInfiniteQuery` instead of `useQuery` for paginated data that loads incrementally.
+2. Provide `initialPageParam` (the starting cursor or page number) and `getNextPageParam` (extracts the next cursor from the last page's response).
+3. Access all loaded pages via `data.pages` — an array of page responses. Flatten with `flatMap` to produce a single item list.
+4. Access `data.pageParams` to get the list of params used for each loaded page.
+5. Call `fetchNextPage()` to load the next page — trigger this on scroll, button click, or intersection observer.
+6. Check `hasNextPage` before showing a "load more" button — it returns `false` when `getNextPageParam` returns `undefined`.
+7. Use `isFetchingNextPage` to show a loading indicator during incremental loads without hiding existing data.
+8. Pair with `IntersectionObserver` or `react-intersection-observer` for true infinite scroll.
+
+```typescript
+// queries/posts.ts — infinite query setup
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+interface PostsPage {
+  posts: Post[];
+  nextCursor: string | null;
+}
+
+export function useInfinitePosts(filters: PostFilters) {
+  return useInfiniteQuery({
+    queryKey: ['posts', 'infinite', filters],
+    queryFn: ({ pageParam }) =>
+      fetch(`/api/posts?cursor=${pageParam}&limit=20&${new URLSearchParams(filters)}`)
+        .then<PostsPage>(r => r.json()),
+    initialPageParam: '',
+    getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
+    // undefined signals no more pages → hasNextPage = false
+  });
+}
+
+// components/post-feed.tsx — infinite scroll with intersection observer
+import { useRef, useEffect } from 'react';
+import { useInfinitePosts } from '@/queries/posts';
+
+export function PostFeed({ filters }: { filters: PostFilters }) {
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfinitePosts(filters);
+  const sentinelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(entries => {
+      if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {
+        fetchNextPage();
+      }
+    });
+    if (sentinelRef.current) observer.observe(sentinelRef.current);
+    return () => observer.disconnect();
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
+
+  const posts = data?.pages.flatMap(page => page.posts) ?? [];
+
+  return (
+    <div>
+      {posts.map(post => <PostCard key={post.id} post={post} />)}
+      <div ref={sentinelRef} />
+      {isFetchingNextPage && <LoadingSpinner />}
+    </div>
+  );
+}
+```
+
+## Details
+
+`useInfiniteQuery` stores each page response in `data.pages` as a separate array element. This structure allows TanStack Query to append new pages without mutating existing ones, enabling React to optimize re-renders — only the new page's components re-render when a page loads.
+
+**`getNextPageParam` contract:** Return the next page's param value (cursor, page number, offset) to signal more pages exist. Return `undefined` (or `null`) to signal the end of data — TanStack Query sets `hasNextPage` to `false`.
+
+**Cursor vs offset pagination:** Cursor-based pagination (returning an opaque `nextCursor`) is more reliable than offset (`page=2`) for feeds with real-time inserts. Offset pagination can miss items or show duplicates if new items are inserted at the top between page loads.
+
+**Flattening pages:** `data.pages` is `PostsPage[][]` logically — an array of page objects each containing an `items` array. Use `data.pages.flatMap(page => page.posts)` to get a flat `Post[]` for rendering. Memoize this with `useMemo` if the list is large and re-renders are frequent.
+
+**Prefetching the next page:** Call `queryClient.prefetchInfiniteQuery()` with `{ pages: 1 }` to warm the cache for the first page on hover. Prefetching subsequent pages is complex and usually not worth the complexity.
+
+**Refetch behavior:** `refetchPage` controls which pages refetch on invalidation. By default, all pages refetch. Pass `refetchPage: (lastPage, index) => index === 0` to only refetch the first page — useful for feeds where older pages are effectively immutable.
+
+## Source
+
+https://tanstack.com/query/latest/docs/framework/react/guides/infinite-queries
+
+## Process
+
+1. Read the instructions and examples in this document.
+2. Apply the patterns to your implementation, adapting to your specific context.
+3. Verify your implementation against the details and edge cases listed above.
+
+## Harness Integration
+
+- **Type:** knowledge — this skill is a reference document, not a procedural workflow.
+- **No tools or state** — consumed as context by other skills and agents.
+
+## Success Criteria
+
+- The patterns described in this document are applied correctly in the implementation.
+- Edge cases and anti-patterns listed in this document are avoided.

package/dist/agents/skills/cursor/tanstack-infinite-queries/skill.yaml

@@ -0,0 +1,43 @@
+name: tanstack-infinite-queries
+version: "1.0.0"
+description: useInfiniteQuery, getNextPageParam, cursor pagination, and flattening pages
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - "**/queries/**"
+  - "**/queryClient.ts"
+  - "**/*query*.ts"
+  - "**/*infinite*.ts"
+related_skills:
+  - tanstack-query-keys
+  - tanstack-prefetching
+  - tanstack-cache-management
+  - react-hooks-pattern
+stack_signals:
+  - tanstack-query
+  - react
+  - typescript
+keywords:
+  - infinite-query
+  - useInfiniteQuery
+  - pagination
+  - cursor
+  - load-more
+  - getNextPageParam
+  - flatMap
+metadata:
+  author: community
+  upstream: https://tanstack.com/query/latest/docs/framework/react/guides/infinite-queries
+state:
+  persistent: false
+  files: []
+depends_on: []

package/dist/agents/skills/cursor/tanstack-mutation-patterns/SKILL.md

@@ -0,0 +1,122 @@
+# TanStack Query: Mutation Patterns
+
+> Execute server-side mutations with useMutation, lifecycle callbacks, and retry configuration
+
+## When to Use
+
+- Creating, updating, or deleting data on the server from a Client Component
+- Coordinating side effects (cache updates, navigation, toasts) after a mutation succeeds or fails
+- Implementing retry logic for transient network failures
+- Sharing mutation logic across multiple components via custom hooks
+
+## Instructions
+
+1. Use `useMutation` for all data mutations — do not use `useQuery` for operations that modify server state.
+2. Wrap `useMutation` in a custom hook per mutation type — expose `mutate` and `isPending` to consumers.
+3. Use `onSuccess` to trigger side effects after a confirmed server success: cache invalidation, navigation, success toasts.
+4. Use `onError` to handle failures: error toasts, logging, form error display. Do not roll back cache here unless you implemented optimistic updates.
+5. Use `onSettled` for cleanup that must happen regardless of outcome (re-enabling buttons, hiding progress).
+6. Pass `variables` as the argument to `mutate()` — they are typed by the `mutationFn`'s parameter type.
+7. Use `mutateAsync` instead of `mutate` when you need to `await` the result and handle errors with try/catch.
+8. Set `retry: false` on mutations that should not retry (form submissions, payments) — unlike queries, mutation retry is `0` by default.
+
+```typescript
+// hooks/use-create-post.ts — mutation custom hook
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { postKeys } from '@/queries/posts';
+
+interface CreatePostInput {
+  title: string;
+  content: string;
+  published: boolean;
+}
+
+export function useCreatePost() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (input: CreatePostInput) =>
+      fetch('/api/posts', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(input),
+      }).then(async r => {
+        if (!r.ok) throw new Error(await r.text());
+        return r.json() as Promise<Post>;
+      }),
+
+    onSuccess: (newPost) => {
+      // Seed the detail cache — no extra fetch needed
+      queryClient.setQueryData(postKeys.detail(newPost.id), newPost);
+      // Invalidate lists — server determines sort order and filtering
+      queryClient.invalidateQueries({ queryKey: postKeys.lists() });
+      toast.success('Post created');
+    },
+
+    onError: (error) => {
+      toast.error(`Failed to create post: ${error.message}`);
+    },
+  });
+}
+
+// components/create-post-form.tsx — consuming the mutation
+export function CreatePostForm() {
+  const { mutate, isPending, isError, error } = useCreatePost();
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const data = new FormData(e.currentTarget);
+    mutate({
+      title: data.get('title') as string,
+      content: data.get('content') as string,
+      published: data.get('published') === 'on',
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input name="title" required />
+      <textarea name="content" required />
+      <button type="submit" disabled={isPending}>
+        {isPending ? 'Creating...' : 'Create Post'}
+      </button>
+      {isError && <p className="text-red-500">{error.message}</p>}
+    </form>
+  );
+}
+```
+
+## Details
+
+`useMutation` is TanStack Query's API for server-side mutations. Unlike `useQuery`, it does not run automatically on mount — it runs when `mutate()` or `mutateAsync()` is called.
+
+**`mutate` vs `mutateAsync`:** `mutate` is fire-and-forget — errors are handled in `onError`, not thrown. `mutateAsync` returns a Promise that rejects on error, enabling `async/await` with try/catch. Use `mutateAsync` when you need sequential async operations after the mutation (e.g., navigate then show toast in a specific order).
+
+**Lifecycle callback order:** For a successful mutation: `onMutate` → (request) → `onSuccess` → `onSettled`. For a failed mutation: `onMutate` → (request) → `onError` → `onSettled`. Callbacks at the `useMutation` definition level fire first; callbacks at the `mutate()` call site fire after.
+
+**Variables type inference:** TypeScript infers the type of `variables` from the `mutationFn` parameter. The `variables` object is available in all lifecycle callbacks — use it to know which item was mutated in `onSuccess` when invalidating specific keys.
+
+**Global mutation callbacks:** Register `onSuccess`, `onError`, and `onSettled` on the `MutationCache` in `QueryClient` options for cross-cutting concerns (global error logging, analytics).
+
+**`isPending` vs `isLoading`:** In TanStack Query v5, `isLoading` was renamed to `isPending` for mutations (and means the mutation is currently executing). Use `isPending` to disable submit buttons.
+
+## Source
+
+https://tanstack.com/query/latest/docs/framework/react/guides/mutations
+
+## Process
+
+1. Read the instructions and examples in this document.
+2. Apply the patterns to your implementation, adapting to your specific context.
+3. Verify your implementation against the details and edge cases listed above.
+
+## Harness Integration
+
+- **Type:** knowledge — this skill is a reference document, not a procedural workflow.
+- **No tools or state** — consumed as context by other skills and agents.
+
+## Success Criteria
+
+- The patterns described in this document are applied correctly in the implementation.
+- Edge cases and anti-patterns listed in this document are avoided.

package/dist/agents/skills/cursor/tanstack-mutation-patterns/skill.yaml

@@ -0,0 +1,43 @@
+name: tanstack-mutation-patterns
+version: "1.0.0"
+description: useMutation, variables, onSuccess/onError/onSettled, and retry configuration
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - "**/queries/**"
+  - "**/queryClient.ts"
+  - "**/*mutation*.ts"
+  - "**/*query*.ts"
+related_skills:
+  - tanstack-query-keys
+  - tanstack-optimistic-updates
+  - tanstack-query-invalidation
+  - next-server-actions
+stack_signals:
+  - tanstack-query
+  - react
+  - typescript
+keywords:
+  - useMutation
+  - mutation
+  - onSuccess
+  - onError
+  - onSettled
+  - variables
+  - retry
+metadata:
+  author: community
+  upstream: https://tanstack.com/query/latest/docs/framework/react/guides/mutations
+state:
+  persistent: false
+  files: []
+depends_on: []

package/dist/agents/skills/cursor/tanstack-optimistic-updates/SKILL.md

@@ -0,0 +1,106 @@
+# TanStack Query: Optimistic Updates
+
+> Update the UI immediately on mutation and roll back automatically if the server request fails
+
+## When to Use
+
+- Building UIs where server latency would make interactions feel sluggish (toggle, like, reorder)
+- Implementing instant feedback for mutations like checkbox toggles, list reordering, or quantity adjustments
+- Ensuring UI consistency when a mutation must succeed (e.g., adding to a local-only list)
+- Rolling back UI changes when a network request fails rather than leaving the UI in an inconsistent state
+
+## Instructions
+
+1. Use the `onMutate` callback to snapshot the current cache value and apply the optimistic update before the request fires.
+2. Cancel any in-flight queries for the affected key in `onMutate` with `queryClient.cancelQueries()` to prevent race conditions.
+3. Return the snapshot from `onMutate` — TanStack Query passes it to `onError` as `context`.
+4. In `onError`, use the `context` (the snapshot) to restore the cache to its pre-mutation state with `queryClient.setQueryData()`.
+5. In `onSettled`, call `queryClient.invalidateQueries()` to sync the cache with the actual server state regardless of success or failure.
+6. Use `queryClient.setQueryData()` with an updater function (not a value) to apply the optimistic change atomically.
+
+```typescript
+// mutations/toggle-todo.ts
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { todoKeys } from '@/queries/todos';
+
+interface Todo {
+  id: string;
+  completed: boolean;
+  title: string;
+}
+
+export function useToggleTodo() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, completed }: { id: string; completed: boolean }) =>
+      fetch(`/api/todos/${id}`, {
+        method: 'PATCH',
+        body: JSON.stringify({ completed }),
+      }).then((r) => r.json()),
+
+    onMutate: async ({ id, completed }) => {
+      // 1. Cancel in-flight refetches to avoid overwriting optimistic update
+      await queryClient.cancelQueries({ queryKey: todoKeys.lists() });
+
+      // 2. Snapshot the current value
+      const previousTodos = queryClient.getQueryData<Todo[]>(todoKeys.list({}));
+
+      // 3. Apply optimistic update
+      queryClient.setQueryData<Todo[]>(
+        todoKeys.list({}),
+        (old) => old?.map((todo) => (todo.id === id ? { ...todo, completed } : todo)) ?? []
+      );
+
+      // 4. Return snapshot as context for rollback
+      return { previousTodos };
+    },
+
+    onError: (_error, _variables, context) => {
+      // Roll back to snapshot
+      if (context?.previousTodos) {
+        queryClient.setQueryData(todoKeys.list({}), context.previousTodos);
+      }
+    },
+
+    onSettled: () => {
+      // Sync with server regardless of success/failure
+      queryClient.invalidateQueries({ queryKey: todoKeys.lists() });
+    },
+  });
+}
+```
+
+## Details
+
+Optimistic updates are a UX pattern where the UI assumes a mutation will succeed and updates immediately, then corrects itself if the server disagrees. The key implementation detail is maintaining the ability to roll back.
+
+**Race condition prevention:** Without `cancelQueries`, an in-flight background refetch could overwrite your optimistic update with stale server data while the mutation is in-flight. Cancelling in-flight queries for the affected key prevents this.
+
+**`onMutate` return value:** Whatever `onMutate` returns becomes the `context` parameter in `onError` and `onSettled`. This is the standard channel for passing the snapshot to the rollback handler.
+
+**`onSettled` for final sync:** Always call `invalidateQueries` in `onSettled` (not just `onSuccess`). Even on success, the server may have applied additional business logic that the optimistic update did not account for. `onSettled` fires on both success and error, ensuring the cache always reflects reality after the operation completes.
+
+**Updater functions:** `queryClient.setQueryData(key, updater)` where `updater` is a function receives the current cached value and returns the new value. This is atomic — use it instead of reading and writing separately to avoid stale closure issues.
+
+**When NOT to use:** For mutations where the user should wait for server confirmation before seeing UI changes (payments, irreversible actions), use pessimistic updates instead — update the cache only in `onSuccess` after the server confirms.
+
+## Source
+
+https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates
+
+## Process
+
+1. Read the instructions and examples in this document.
+2. Apply the patterns to your implementation, adapting to your specific context.
+3. Verify your implementation against the details and edge cases listed above.
+
+## Harness Integration
+
+- **Type:** knowledge — this skill is a reference document, not a procedural workflow.
+- **No tools or state** — consumed as context by other skills and agents.
+
+## Success Criteria
+
+- The patterns described in this document are applied correctly in the implementation.
+- Edge cases and anti-patterns listed in this document are avoided.

package/dist/agents/skills/cursor/tanstack-optimistic-updates/skill.yaml

@@ -0,0 +1,43 @@
+name: tanstack-optimistic-updates
+version: "1.0.0"
+description: Optimistic mutations, onMutate, rollback on error, and cache snapshot patterns
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - "**/queries/**"
+  - "**/queryClient.ts"
+  - "**/query-client.ts"
+  - "**/*query*.ts"
+  - "**/*mutation*.ts"
+related_skills:
+  - tanstack-mutation-patterns
+  - tanstack-cache-management
+  - tanstack-query-keys
+  - react-hooks-pattern
+stack_signals:
+  - tanstack-query
+  - react
+  - typescript
+keywords:
+  - optimistic-updates
+  - onMutate
+  - rollback
+  - cache-snapshot
+  - cancel-queries
+  - pessimistic-update
+metadata:
+  author: community
+  upstream: https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates
+state:
+  persistent: false
+  files: []
+depends_on: []