From cdfa74fe9155618e2d2d3129c7ff8e7899b06644 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 3 Oct 2026 23:43:33 +0000
Subject: [PATCH 01/15] docs(skills): Add data-client-vue agent skill

Vue readers were pointed at the React hooks skill. Adds a Vue skill
covering DataClientPlugin, composables, reactive arguments, Suspense and
onErrorCaptured boundaries, and lists it in the agent skills and
debugging docs.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WEpX2AVQj3Xmn2Q51om3J4
---
 .../references/devtools-debugging.md          |   8 +-
 .agents/skills/data-client-vue/SKILL.md       | 242 ++++++++++++++++++
 .../skills/data-client-vue/evals/evals.json   |  33 +++
 .../data-client-vue/references/Actions.md     |   1 +
 .../data-client-vue/references/Controller.md  |   1 +
 .../references/_AsyncBoundary.md              |   1 +
 .../data-client-vue/references/_VoteDemo.md   |   1 +
 .../data-client-vue/references/_pagination.md |   1 +
 .../data-client-vue/references/_useLive.md    |   1 +
 .../data-client-vue/references/_useLoading.md |   1 +
 .../references/data-dependency.md             |   1 +
 .../references/devtools-debugging.md          |   1 +
 .../references/getDefaultManagers.md          |   1 +
 .../data-client-vue/references/mutations.md   |   1 +
 .../data-client-vue/references/useCache.md    |   1 +
 .../references/useController.md               |   1 +
 .../data-client-vue/references/useDLE.md      |   1 +
 .../data-client-vue/references/useDebounce.md |   1 +
 .../data-client-vue/references/useFetch.md    |   1 +
 .../data-client-vue/references/useLive.md     |   1 +
 .../data-client-vue/references/useLoading.md  |   1 +
 .../data-client-vue/references/useQuery.md    |   1 +
 .../references/useSubscription.md             |   1 +
 .../data-client-vue/references/useSuspense.md |   1 +
 docs/core/getting-started/agent-skills.md     |   2 +
 docs/core/getting-started/debugging.md        |   4 +-
 26 files changed, 304 insertions(+), 6 deletions(-)
 create mode 100644 .agents/skills/data-client-vue/SKILL.md
 create mode 100644 .agents/skills/data-client-vue/evals/evals.json
 create mode 120000 .agents/skills/data-client-vue/references/Actions.md
 create mode 120000 .agents/skills/data-client-vue/references/Controller.md
 create mode 120000 .agents/skills/data-client-vue/references/_AsyncBoundary.md
 create mode 120000 .agents/skills/data-client-vue/references/_VoteDemo.md
 create mode 120000 .agents/skills/data-client-vue/references/_pagination.md
 create mode 120000 .agents/skills/data-client-vue/references/_useLive.md
 create mode 120000 .agents/skills/data-client-vue/references/_useLoading.md
 create mode 120000 .agents/skills/data-client-vue/references/data-dependency.md
 create mode 120000 .agents/skills/data-client-vue/references/devtools-debugging.md
 create mode 120000 .agents/skills/data-client-vue/references/getDefaultManagers.md
 create mode 120000 .agents/skills/data-client-vue/references/mutations.md
 create mode 120000 .agents/skills/data-client-vue/references/useCache.md
 create mode 120000 .agents/skills/data-client-vue/references/useController.md
 create mode 120000 .agents/skills/data-client-vue/references/useDLE.md
 create mode 120000 .agents/skills/data-client-vue/references/useDebounce.md
 create mode 120000 .agents/skills/data-client-vue/references/useFetch.md
 create mode 120000 .agents/skills/data-client-vue/references/useLive.md
 create mode 120000 .agents/skills/data-client-vue/references/useLoading.md
 create mode 120000 .agents/skills/data-client-vue/references/useQuery.md
 create mode 120000 .agents/skills/data-client-vue/references/useSubscription.md
 create mode 120000 .agents/skills/data-client-vue/references/useSuspense.md

diff --git a/.agents/skills/data-client-react/references/devtools-debugging.md b/.agents/skills/data-client-react/references/devtools-debugging.md
index 616c48c87fba..a6551fccbb53 100644
--- a/.agents/skills/data-client-react/references/devtools-debugging.md
+++ b/.agents/skills/data-client-react/references/devtools-debugging.md
@@ -1,12 +1,12 @@
-# Debugging @data-client/react with Chrome DevTools MCP
+# Debugging Data Client with Chrome DevTools MCP
 
-Debug `@data-client/react` state and actions programmatically via Chrome DevTools MCP `evaluate_script`. The app's `DevToolsManager` exposes the Controller on `globalThis.__DC_CONTROLLERS__` (a `Map` keyed by `devtoolsName`) in dev mode.
+Debug `@data-client/react` or `@data-client/vue` state and actions programmatically via Chrome DevTools MCP `evaluate_script`. The app's `DevToolsManager` exposes the Controller on `globalThis.__DC_CONTROLLERS__` (a `Map` keyed by `devtoolsName`) in dev mode.
 
 ## Prerequisites
 
 1. Dev server running with `NODE_ENV !== 'production'`
 2. Chrome DevTools MCP connected and page loaded
-3. `DevToolsManager` included in `DataProvider` managers (default in dev mode)
+3. `DevToolsManager` included in `DataProvider` (React) or `DataClientPlugin` (Vue) managers (default in dev mode)
 
 ## Step 1: Access the Controller
 
@@ -26,7 +26,7 @@ Debug `@data-client/react` state and actions programmatically via Chrome DevTool
 
 ### Get a controller by key
 
-Use the key from discovery. Always use `.get(devtoolsName)` with the actual key — not `.values().next().value` — so you target the correct store when multiple `DataProvider`s exist.
+Use the key from discovery. Always use `.get(devtoolsName)` with the actual key — not `.values().next().value` — so you target the correct store when multiple `DataProvider`s or Vue apps exist.
 
 ```js
 // evaluate_script
diff --git a/.agents/skills/data-client-vue/SKILL.md b/.agents/skills/data-client-vue/SKILL.md
new file mode 100644
index 000000000000..f9582ac9a442
--- /dev/null
+++ b/.agents/skills/data-client-vue/SKILL.md
@@ -0,0 +1,242 @@
+---
+name: data-client-vue
+description: Use @data-client/vue composables for data fetching, mutations, and rendering - useSuspense, useFetch, useQuery, useCache, useLive, useDLE, useSubscription, useController, useLoading, useDebounce, DataClientPlugin, Suspense, onErrorCaptured. Use when reading/rendering remote data, triggering mutations, doing optimistic updates, real-time subscriptions, or wiring Suspense and error handling in Vue 3.
+license: Apache 2.0
+---
+## Setup
+
+Install `DataClientPlugin` once on the app. Composables only work inside `<script setup>` (or `setup()`)
+of components below it.
+
+```ts title="main.ts"
+import { DataClientPlugin } from '@data-client/vue';
+import { createApp } from 'vue';
+import App from './App.vue';
+
+const app = createApp(App);
+app.use(DataClientPlugin);
+// with options: app.use(DataClientPlugin, { managers: getDefaultManagers({ ... }) });
+app.mount('#app');
+```
+
+For installation and framework detection, apply the skill "data-client-setup".
+
+## Rendering
+
+```ts
+// GET https://jsonplaceholder.typicode.com/todos/5
+const todo = await useSuspense(TodoResource.get, { id: 5 });
+// GET https://jsonplaceholder.typicode.com/todos
+const todoList = await useSuspense(TodoResource.getList);
+// GET https://jsonplaceholder.typicode.com/todos?userId=1
+const todoListByUser = await useSuspense(TodoResource.getList, { userId: 1 });
+// subscriptions with polling, websockets or SSE
+const todo = await useLive(TodoResource.get, { id: 5 });
+// without fetch (not awaited)
+const todo = useCache(TodoResource.get, { id: 5 });
+const todo = useQuery(Todo, { id: 5 });
+// fetch without Suspense - returns { data, loading, error } refs
+const { data, loading, error } = useDLE(TodoResource.get, { id: 5 });
+// subscribe without Suspense (use with useSuspense or useDLE)
+useSubscription(TodoResource.get, { id: 5 });
+// parallel fetches: start both, then await
+useFetch(PostResource.get, { id });
+useFetch(CommentResource.getList, { postId: id });
+const post = await useSuspense(PostResource.get, { id });
+const comments = await useSuspense(CommentResource.getList, { postId: id });
+// conditional: null skips fetching and binding
+const user = useCache(UserResource.get, computed(() => (userId.value ? { id: userId.value } : null)));
+```
+
+For API definitions (like TodoResource), apply the skill "data-client-rest".
+
+### Return values are refs
+
+- `useSuspense()` and `useLive()` return a `Promise` of a readonly `ComputedRef`: `await` them at the top
+  level of `<script setup>`. `useCache()`, `useQuery()`, and each of `useDLE()`'s `data`/`loading`/`error`
+  are `ComputedRef`s.
+- Templates unwrap them (`{{ todo.title }}`); in script read `.value` (`todo.value.title`).
+- Results stay live: mutations, subscriptions, and other components' fetches update them without refetching.
+
+### Reactive arguments
+
+Arguments can be plain values, `ref`s, or `computed`s. A plain object is read once, so it will not
+refetch when a prop or route param changes. Pass a `computed` whenever an argument depends on reactive state.
+
+```vue
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useSuspense } from '@data-client/vue';
+import { TodoResource } from '../resources/TodoResource';
+
+const props = defineProps<{ id: number }>();
+// refetches when props.id changes
+const todo = await useSuspense(TodoResource.get, computed(() => ({ id: props.id })));
+</script>
+
+<template>
+  <h3>{{ todo.title }}</h3>
+</template>
+```
+
+Use `computed()` or `ref()` rather than a bare getter function (`() => ({ id })`).
+
+## Mutations
+
+```ts
+const ctrl = useController();
+// PUT https://jsonplaceholder.typicode.com/todos/5
+const updateTodo = todo => ctrl.fetch(TodoResource.update, { id }, todo);
+// PATCH https://jsonplaceholder.typicode.com/todos/5
+const partialUpdateTodo = todo =>
+  ctrl.fetch(TodoResource.partialUpdate, { id }, todo);
+// POST https://jsonplaceholder.typicode.com/todos
+const addTodoToBeginning = todo =>
+  ctrl.fetch(TodoResource.getList.unshift, todo);
+// POST https://jsonplaceholder.typicode.com/todos?userId=1
+const addTodoToEnd = todo => ctrl.fetch(TodoResource.getList.push, { userId: 1 }, todo);
+// DELETE https://jsonplaceholder.typicode.com/todos/5
+const deleteTodo = id => ctrl.fetch(TodoResource.delete, { id });
+// GET https://jsonplaceholder.typicode.com/todos?userId=1&page=2
+const getNextPage = (page) => ctrl.fetch(TodoResource.getList.getPage, { userId: 1, page })
+```
+
+Read reactive values (`props.todo.id`, `title.value`) inside the handler so each call uses current state.
+In Options API templates the Controller is also available as `$dataClient`.
+
+## Helpful composables
+
+```ts
+const ctrl = useController();
+const [handleSubmit, loading, error] = useLoading(async (data: FormData) => {
+  const post = await ctrl.fetch(PostResource.getList.push, data);
+  router.push(`/posts/${post.id}`);
+});
+// loading and error are refs
+```
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useDebounce } from '@data-client/vue';
+
+const query = ref('');
+const [debouncedQuery, isPending] = useDebounce(query, 200);
+</script>
+
+<template>
+  <input v-model="query" />
+  <Suspense>
+    <IssueList :query="debouncedQuery" owner="vuejs" repo="core" />
+    <template #fallback><Loading /></template>
+  </Suspense>
+</template>
+```
+
+## Loading and error boundaries
+
+There is no `AsyncBoundary` component in Vue. A component that `await`s `useSuspense()` or `useLive()`
+must render inside Vue's [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense.html); its
+`#fallback` slot is the loading state. Catch fetch errors in an ancestor with
+[`onErrorCaptured()`](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured).
+Reuse the codebase's existing boundary component if it has one.
+
+```vue title="AsyncBoundary.vue"
+<script setup lang="ts">
+import { onErrorCaptured, ref } from 'vue';
+
+const error = ref<Error | null>(null);
+onErrorCaptured(err => {
+  error.value = err;
+  return false;
+});
+</script>
+
+<template>
+  <div v-if="error">Error: {{ error.message }}</div>
+  <Suspense v-else>
+    <template #default><slot /></template>
+    <template #fallback><Loading /></template>
+  </Suspense>
+</template>
+```
+
+Place boundaries around route views or sections, not around each data-bound component.
+
+## Type-safe imperative actions
+
+[Controller](references/Controller.md) is returned from `useController()`. It has:
+ctrl.fetch(), ctrl.fetchIfStale(), ctrl.expireAll(), ctrl.invalidate(), ctrl.invalidateAll(), ctrl.setResponse(), ctrl.set(),
+ctrl.setError(), ctrl.resetEntireStore(), ctrl.subscribe(), ctrl.unsubscribe().
+
+Write many entities without a fetch with one `ctrl.set([Entity], rows)`. Never loop `ctrl.set(Entity, args, row)` per row, and never add an endpoint or `setResponse()` just to batch.
+
+## Programmatic queries
+
+```ts
+const queryRemainingTodos = new Query(
+  TodoResource.getList.schema,
+  entries => entries.filter(todo => !todo.completed).length,
+);
+
+const allRemainingTodos = useQuery(queryRemainingTodos);
+const firstUserRemainingTodos = useQuery(queryRemainingTodos, { userId: 1 });
+```
+
+```ts
+const groupTodoByUser = new Query(
+  TodoResource.getList.schema,
+  todos => Object.groupBy(todos, todo => todo.userId),
+);
+const todosByUser = useQuery(groupTodoByUser);
+```
+
+---
+
+## Browser Debugging (Chrome DevTools MCP)
+
+To inspect store state, track dispatched [actions](references/Actions.md), or invoke
+[Controller](references/Controller.md) methods from a browser MCP (`user-chrome-devtools`),
+see [devtools-debugging](references/devtools-debugging.md). Uses `globalThis.__DC_CONTROLLERS__`
+available in dev mode.
+
+## Managers
+
+Custom [Managers](https://dataclient.io/docs/api/Manager) allow for global side effect handling.
+This is useful for websockets, SSE, logging, etc. Pass them to `DataClientPlugin` with
+[getDefaultManagers](references/getDefaultManagers.md). Always use the skill "data-client-manager" when writing managers.
+
+## Best Practices & Notes
+
+- [useDebounce(query, timeout)](references/useDebounce.md) when rendering async data based on user field inputs
+- [[handleSubmit, loading, error] = useLoading()](references/useLoading.md) when tracking async mutations
+- Prefer smaller Vue components that do one thing
+- **Co-locate data bindings**: call useSuspense/useDLE/useCache/useQuery in the component that renders the data — don't prop drill
+- **Don't hide data bindings inside custom composables**: wrapping them obfuscates a component's data dependencies and couples data logic to view code, causing drift. Put tightly coupled data transformations in a `Query` schema (with the data model, e.g. `src/resources/`) so they stay reusable and evolve independently of views
+- Don't copy results into `ref()`/`reactive()` state; render the returned refs directly so updates flow through
+- For tests, apply the skill "data-client-vue-testing"
+
+# References
+
+For detailed API documentation, see the [references](references/) directory. They cover React and Vue;
+read the `:::vue` sections.
+
+- [useSuspense](references/useSuspense.md);[_pagination.md](references/_pagination.md) - Fetch with Suspense
+- [useFetch](references/useFetch.md) - Start fetches early for parallel loading
+- [useQuery](references/useQuery.md) - Read from cache without fetch
+- [useCache](references/useCache.md) - Read from cache (nullable)
+- [useLive](references/useLive.md);[_useLive.md](references/_useLive.md) - Fetch + subscribe to updates
+- [useDLE](references/useDLE.md) - Fetch without Suspense (returns data/loading/error)
+- [useSubscription](references/useSubscription.md) - Subscribe to updates (polling/websocket/SSE)
+- [useController](references/useController.md) - Access Controller
+- [Controller](references/Controller.md) - Imperative actions
+- [_AsyncBoundary.md](references/_AsyncBoundary.md) - Suspense and onErrorCaptured boundaries
+- [useLoading](references/useLoading.md);[_useLoading.md](references/_useLoading.md) - Track async mutation state
+- [useDebounce](references/useDebounce.md) - Debounce values
+- [getDefaultManagers](references/getDefaultManagers.md) - Configure `DataClientPlugin` managers
+- [data-dependency](references/data-dependency.md) - Rendering guide
+- [mutations](references/mutations.md);[_VoteDemo.md](references/_VoteDemo.md) - Mutations guide
+- [Actions](references/Actions.md) - Store action types (FETCH, SET, etc.)
+- [devtools-debugging](references/devtools-debugging.md) - Debug with Chrome DevTools MCP
+
+**ALWAYS follow these patterns and refer to the official docs for edge cases. Prioritize code generation that is idiomatic, type-safe, and leverages automatic normalization/caching via skill "data-client-schema" definitions.**
diff --git a/.agents/skills/data-client-vue/evals/evals.json b/.agents/skills/data-client-vue/evals/evals.json
new file mode 100644
index 000000000000..9c3f60603c15
--- /dev/null
+++ b/.agents/skills/data-client-vue/evals/evals.json
@@ -0,0 +1,33 @@
+{
+  "skill_name": "data-client-vue",
+  "evals": [
+    {
+      "id": 1,
+      "name": "csv-import",
+      "prompt": "Add an `ImportProducts.vue` component (src/components/ImportProducts.vue) with a file input. When the user picks a CSV, parse it with `parseProductsCsv(file): Promise<{ id: string; name: string; price: number }[]>` from src/lib/csv.ts and put every row into the Data Client store, so `ProductRow.vue` (which calls `useQuery(Product, { id })`) shows them. There is no server call for this. Product is in src/resources/Product.ts and extends Entity with `id`, `name`, `price`.",
+      "expected_output": "A <script setup> component that uses useController() and, after parsing, writes all rows with one ctrl.set([Product], rows) call, with no fetch, endpoint, or setResponse.",
+      "files": [],
+      "assertions": [
+        "All parsed rows are written with a single `ctrl.set([Product], rows)` or `ctrl.set(new schema.Array(Product), rows)` call that passes the rows and no args.",
+        "The rows are not written by calling `ctrl.set(Product, …)` once per row (no loop, forEach, or map over rows that calls set).",
+        "No endpoint is defined and `setResponse()` is not called to write the rows.",
+        "No `as any` or other cast is used to make the `ctrl.set` call typecheck.",
+        "The controller comes from `useController()` imported from `@data-client/vue`, called in `<script setup>`."
+      ]
+    },
+    {
+      "id": 2,
+      "name": "reactive-prop-args",
+      "prompt": "Write src/components/UserTodos.vue. It takes a `userId: number` prop and renders the user's name (UserResource.get) and their todo titles (TodoResource.getList with `{ userId }`). The parent swaps `userId` without remounting, so the data must follow the prop. Loading should use Suspense. UserResource and TodoResource are in src/resources/.",
+      "expected_output": "A <script setup> component that awaits useSuspense for both endpoints with computed() arguments derived from props.userId, starts both fetches in parallel with useFetch (or otherwise avoids a waterfall), and renders through the template.",
+      "files": [],
+      "assertions": [
+        "Both `useSuspense` calls are awaited at the top level of `<script setup>`.",
+        "Arguments are passed as `computed(() => ...)` (or a ref) derived from `props.userId`, not a plain object like `{ id: props.userId }` that is read once.",
+        "No bare getter function (e.g. `() => ({ id: props.userId })`) is passed as an argument.",
+        "Results are not copied into separate `ref()` or `reactive()` state; the template reads the returned values directly.",
+        "The two fetches are not a waterfall: `useFetch` starts both before the first `await`, or the code otherwise starts them in parallel."
+      ]
+    }
+  ]
+}
diff --git a/.agents/skills/data-client-vue/references/Actions.md b/.agents/skills/data-client-vue/references/Actions.md
new file mode 120000
index 000000000000..921a154aab5d
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/Actions.md
@@ -0,0 +1 @@
+../../data-client-manager/references/Actions.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/Controller.md b/.agents/skills/data-client-vue/references/Controller.md
new file mode 120000
index 000000000000..359c06beecd7
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/Controller.md
@@ -0,0 +1 @@
+../../../../docs/core/api/Controller.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/_AsyncBoundary.md b/.agents/skills/data-client-vue/references/_AsyncBoundary.md
new file mode 120000
index 000000000000..57d2b9fdece5
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/_AsyncBoundary.md
@@ -0,0 +1 @@
+../../../../docs/core/shared/_AsyncBoundary.mdx
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/_VoteDemo.md b/.agents/skills/data-client-vue/references/_VoteDemo.md
new file mode 120000
index 000000000000..f3bd45e85171
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/_VoteDemo.md
@@ -0,0 +1 @@
+../../../../docs/core/shared/_VoteDemo.mdx
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/_pagination.md b/.agents/skills/data-client-vue/references/_pagination.md
new file mode 120000
index 000000000000..44c3e22eb030
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/_pagination.md
@@ -0,0 +1 @@
+../../../../docs/core/shared/_pagination.mdx
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/_useLive.md b/.agents/skills/data-client-vue/references/_useLive.md
new file mode 120000
index 000000000000..eb946942cad6
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/_useLive.md
@@ -0,0 +1 @@
+../../../../docs/core/shared/_useLive.mdx
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/_useLoading.md b/.agents/skills/data-client-vue/references/_useLoading.md
new file mode 120000
index 000000000000..9ed6b996c6bc
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/_useLoading.md
@@ -0,0 +1 @@
+../../../../docs/core/shared/_useLoading.mdx
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/data-dependency.md b/.agents/skills/data-client-vue/references/data-dependency.md
new file mode 120000
index 000000000000..1613833f6d57
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/data-dependency.md
@@ -0,0 +1 @@
+../../../../docs/core/getting-started/data-dependency.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/devtools-debugging.md b/.agents/skills/data-client-vue/references/devtools-debugging.md
new file mode 120000
index 000000000000..d75fb0dae66f
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/devtools-debugging.md
@@ -0,0 +1 @@
+../../data-client-react/references/devtools-debugging.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/getDefaultManagers.md b/.agents/skills/data-client-vue/references/getDefaultManagers.md
new file mode 120000
index 000000000000..8cb0cf50caab
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/getDefaultManagers.md
@@ -0,0 +1 @@
+../../../../docs/core/api/getDefaultManagers.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/mutations.md b/.agents/skills/data-client-vue/references/mutations.md
new file mode 120000
index 000000000000..aaa624e6eb92
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/mutations.md
@@ -0,0 +1 @@
+../../../../docs/core/getting-started/mutations.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/useCache.md b/.agents/skills/data-client-vue/references/useCache.md
new file mode 120000
index 000000000000..3659e1fe1516
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/useCache.md
@@ -0,0 +1 @@
+../../../../docs/core/api/useCache.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/useController.md b/.agents/skills/data-client-vue/references/useController.md
new file mode 120000
index 000000000000..68fa2a5921fb
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/useController.md
@@ -0,0 +1 @@
+../../../../docs/core/api/useController.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/useDLE.md b/.agents/skills/data-client-vue/references/useDLE.md
new file mode 120000
index 000000000000..fa87e066feb2
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/useDLE.md
@@ -0,0 +1 @@
+../../../../docs/core/api/useDLE.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/useDebounce.md b/.agents/skills/data-client-vue/references/useDebounce.md
new file mode 120000
index 000000000000..f4d37592acfe
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/useDebounce.md
@@ -0,0 +1 @@
+../../../../docs/core/api/useDebounce.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/useFetch.md b/.agents/skills/data-client-vue/references/useFetch.md
new file mode 120000
index 000000000000..b3c249d05780
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/useFetch.md
@@ -0,0 +1 @@
+../../../../docs/core/api/useFetch.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/useLive.md b/.agents/skills/data-client-vue/references/useLive.md
new file mode 120000
index 000000000000..fa4e4d082b41
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/useLive.md
@@ -0,0 +1 @@
+../../../../docs/core/api/useLive.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/useLoading.md b/.agents/skills/data-client-vue/references/useLoading.md
new file mode 120000
index 000000000000..fdce9d784bd7
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/useLoading.md
@@ -0,0 +1 @@
+../../../../docs/core/api/useLoading.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/useQuery.md b/.agents/skills/data-client-vue/references/useQuery.md
new file mode 120000
index 000000000000..8cbb935c7781
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/useQuery.md
@@ -0,0 +1 @@
+../../../../docs/core/api/useQuery.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/useSubscription.md b/.agents/skills/data-client-vue/references/useSubscription.md
new file mode 120000
index 000000000000..9035c9f29606
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/useSubscription.md
@@ -0,0 +1 @@
+../../../../docs/core/api/useSubscription.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/useSuspense.md b/.agents/skills/data-client-vue/references/useSuspense.md
new file mode 120000
index 000000000000..4542002302e8
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/useSuspense.md
@@ -0,0 +1 @@
+../../../../docs/core/api/useSuspense.md
\ No newline at end of file
diff --git a/docs/core/getting-started/agent-skills.md b/docs/core/getting-started/agent-skills.md
index 9898241ef5b1..1004a6348b09 100644
--- a/docs/core/getting-started/agent-skills.md
+++ b/docs/core/getting-started/agent-skills.md
@@ -33,6 +33,8 @@ endpoints are found.
   CRUD methods, and response parsing.
 - [**`/data-client-react`**](https://skills.sh/reactive/data-client/data-client-react) — uses `useSuspense`, `useFetch`, `useQuery`, `useLive`,
   and mutation hooks.
+- [**`/data-client-vue`**](https://skills.sh/reactive/data-client/data-client-vue) — uses `useSuspense`, `useFetch`, `useQuery`, `useLive`,
+  and mutation composables with `DataClientPlugin`.
 - [**`/data-client-react-testing`**](https://skills.sh/reactive/data-client/data-client-react-testing) — writes React tests with `renderDataHook`,
   fixtures, interceptors, and `nock`.
 - [**`/data-client-vue-testing`**](https://skills.sh/reactive/data-client/data-client-vue-testing) — writes Vue tests with `renderDataCompose`,
diff --git a/docs/core/getting-started/debugging.md b/docs/core/getting-started/debugging.md
index e5ae839800fe..f4b728031951 100644
--- a/docs/core/getting-started/debugging.md
+++ b/docs/core/getting-started/debugging.md
@@ -11,9 +11,9 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 ## Debugging with agents
 
 For many debugging tasks, the fastest path is to use an agent that already knows the
-`@data-client/react` debugging workflow.
+:react[`@data-client/react`]:vue[`@data-client/vue`] debugging workflow.
 
-Install the [`data-client-react` skill](https://skills.sh/reactive/data-client/data-client-react)
+Install the :react[[`data-client-react` skill](https://skills.sh/reactive/data-client/data-client-react)]:vue[[`data-client-vue` skill](https://skills.sh/reactive/data-client/data-client-vue)]
 in your coding agent, then ask it to inspect the current page or app state.
 
 ### How agent debugging works

From 269f5e276d250fc415d52e5f2527461bac2745fb Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 3 Oct 2026 23:49:17 +0000
Subject: [PATCH 02/15] docs(skills): Address review of data-client-vue skill

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WEpX2AVQj3Xmn2Q51om3J4
---
 .agents/skills/data-client-vue/SKILL.md         | 13 +++++++++----
 .agents/skills/data-client-vue/evals/evals.json |  3 ++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/.agents/skills/data-client-vue/SKILL.md b/.agents/skills/data-client-vue/SKILL.md
index f9582ac9a442..619553cf8058 100644
--- a/.agents/skills/data-client-vue/SKILL.md
+++ b/.agents/skills/data-client-vue/SKILL.md
@@ -5,8 +5,9 @@ license: Apache 2.0
 ---
 ## Setup
 
-Install `DataClientPlugin` once on the app. Composables only work inside `<script setup>` (or `setup()`)
-of components below it.
+Install `DataClientPlugin` once on the app. Composables only work inside `<script setup>` of components
+below it. Awaiting composables (`await useSuspense()`) requires `<script setup>`: in a hand-written
+`async setup()`, composables called after the first `await` lose the component instance.
 
 ```ts title="main.ts"
 import { DataClientPlugin } from '@data-client/vue';
@@ -45,7 +46,7 @@ useFetch(CommentResource.getList, { postId: id });
 const post = await useSuspense(PostResource.get, { id });
 const comments = await useSuspense(CommentResource.getList, { postId: id });
 // conditional: null skips fetching and binding
-const user = useCache(UserResource.get, computed(() => (userId.value ? { id: userId.value } : null)));
+const user = await useSuspense(UserResource.get, computed(() => (userId.value ? { id: userId.value } : null)));
 ```
 
 For API definitions (like TodoResource), apply the skill "data-client-rest".
@@ -81,6 +82,10 @@ const todo = await useSuspense(TodoResource.get, computed(() => ({ id: props.id
 
 Use `computed()` or `ref()` rather than a bare getter function (`() => ({ id })`).
 
+When arguments change, `useSuspense()` does not suspend again: the result is `undefined` until the new
+fetch resolves (unless that data is already cached). Guard the template (`v-if="todo"`), or have the
+parent remount the component with `:key="id"` so it suspends inside `<Suspense>` again.
+
 ## Mutations
 
 ```ts
@@ -102,7 +107,7 @@ const getNextPage = (page) => ctrl.fetch(TodoResource.getList.getPage, { userId:
 ```
 
 Read reactive values (`props.todo.id`, `title.value`) inside the handler so each call uses current state.
-In Options API templates the Controller is also available as `$dataClient`.
+The Controller is also available as `$dataClient` in any template (and `this.$dataClient` in the Options API).
 
 ## Helpful composables
 
diff --git a/.agents/skills/data-client-vue/evals/evals.json b/.agents/skills/data-client-vue/evals/evals.json
index 9c3f60603c15..257d8b10fa09 100644
--- a/.agents/skills/data-client-vue/evals/evals.json
+++ b/.agents/skills/data-client-vue/evals/evals.json
@@ -23,9 +23,10 @@
       "files": [],
       "assertions": [
         "Both `useSuspense` calls are awaited at the top level of `<script setup>`.",
-        "Arguments are passed as `computed(() => ...)` (or a ref) derived from `props.userId`, not a plain object like `{ id: props.userId }` that is read once.",
+        "The `useSuspense` arguments are passed as `computed(() => ...)` (or a ref) derived from `props.userId`, not a plain object like `{ id: props.userId }` that is read once.",
         "No bare getter function (e.g. `() => ({ id: props.userId })`) is passed as an argument.",
         "Results are not copied into separate `ref()` or `reactive()` state; the template reads the returned values directly.",
+        "The template does not throw while a new `userId` is loading: it guards the results (e.g. `v-if`) or the component is remounted with `:key` so it suspends again.",
         "The two fetches are not a waterfall: `useFetch` starts both before the first `await`, or the code otherwise starts them in parallel."
       ]
     }

From e45e126f2f49aabdcb88ac5acab733d47bf91520 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 4 Oct 2026 09:12:12 +0000
Subject: [PATCH 03/15] docs(skills): Simplify data-client-vue skill

Link shared docs for setup and boundaries instead of inlining them, trim
duplicated examples, and merge overlapping eval assertions.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WEpX2AVQj3Xmn2Q51om3J4
---
 .agents/skills/data-client-vue/SKILL.md       | 80 +++----------------
 .../skills/data-client-vue/evals/evals.json   |  5 +-
 .../references/installation.md                |  1 +
 3 files changed, 16 insertions(+), 70 deletions(-)
 create mode 120000 .agents/skills/data-client-vue/references/installation.md

diff --git a/.agents/skills/data-client-vue/SKILL.md b/.agents/skills/data-client-vue/SKILL.md
index 619553cf8058..a598cce8fe6a 100644
--- a/.agents/skills/data-client-vue/SKILL.md
+++ b/.agents/skills/data-client-vue/SKILL.md
@@ -5,23 +5,11 @@ license: Apache 2.0
 ---
 ## Setup
 
-Install `DataClientPlugin` once on the app. Composables only work inside `<script setup>` of components
+Install `DataClientPlugin` once with `app.use(DataClientPlugin)` ([installation](references/installation.md);
+apply the skill "data-client-setup" to set it up). Composables only work inside `<script setup>` of components
 below it. Awaiting composables (`await useSuspense()`) requires `<script setup>`: in a hand-written
 `async setup()`, composables called after the first `await` lose the component instance.
 
-```ts title="main.ts"
-import { DataClientPlugin } from '@data-client/vue';
-import { createApp } from 'vue';
-import App from './App.vue';
-
-const app = createApp(App);
-app.use(DataClientPlugin);
-// with options: app.use(DataClientPlugin, { managers: getDefaultManagers({ ... }) });
-app.mount('#app');
-```
-
-For installation and framework detection, apply the skill "data-client-setup".
-
 ## Rendering
 
 ```ts
@@ -57,31 +45,19 @@ For API definitions (like TodoResource), apply the skill "data-client-rest".
   level of `<script setup>`. `useCache()`, `useQuery()`, and each of `useDLE()`'s `data`/`loading`/`error`
   are `ComputedRef`s.
 - Templates unwrap them (`{{ todo.title }}`); in script read `.value` (`todo.value.title`).
-- Results stay live: mutations, subscriptions, and other components' fetches update them without refetching.
 
 ### Reactive arguments
 
 Arguments can be plain values, `ref`s, or `computed`s. A plain object is read once, so it will not
-refetch when a prop or route param changes. Pass a `computed` whenever an argument depends on reactive state.
-
-```vue
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useSuspense } from '@data-client/vue';
-import { TodoResource } from '../resources/TodoResource';
+refetch when a prop or route param changes. Whenever an argument depends on reactive state, pass a
+`computed()` or `ref()` (not a bare getter function like `() => ({ id })`):
 
+```ts
 const props = defineProps<{ id: number }>();
 // refetches when props.id changes
 const todo = await useSuspense(TodoResource.get, computed(() => ({ id: props.id })));
-</script>
-
-<template>
-  <h3>{{ todo.title }}</h3>
-</template>
 ```
 
-Use `computed()` or `ref()` rather than a bare getter function (`() => ({ id })`).
-
 When arguments change, `useSuspense()` does not suspend again: the result is `undefined` until the new
 fetch resolves (unless that data is already cached). Guard the template (`v-if="todo"`), or have the
 parent remount the component with `:key="id"` so it suspends inside `<Suspense>` again.
@@ -120,22 +96,10 @@ const [handleSubmit, loading, error] = useLoading(async (data: FormData) => {
 // loading and error are refs
 ```
 
-```vue
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useDebounce } from '@data-client/vue';
-
-const query = ref('');
+```ts
+const query = ref(''); // bound with v-model
 const [debouncedQuery, isPending] = useDebounce(query, 200);
-</script>
-
-<template>
-  <input v-model="query" />
-  <Suspense>
-    <IssueList :query="debouncedQuery" owner="vuejs" repo="core" />
-    <template #fallback><Loading /></template>
-  </Suspense>
-</template>
+// pass debouncedQuery to the component that fetches, inside <Suspense>
 ```
 
 ## Loading and error boundaries
@@ -144,29 +108,10 @@ There is no `AsyncBoundary` component in Vue. A component that `await`s `useSusp
 must render inside Vue's [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense.html); its
 `#fallback` slot is the loading state. Catch fetch errors in an ancestor with
 [`onErrorCaptured()`](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured).
-Reuse the codebase's existing boundary component if it has one.
-
-```vue title="AsyncBoundary.vue"
-<script setup lang="ts">
-import { onErrorCaptured, ref } from 'vue';
-
-const error = ref<Error | null>(null);
-onErrorCaptured(err => {
-  error.value = err;
-  return false;
-});
-</script>
-
-<template>
-  <div v-if="error">Error: {{ error.message }}</div>
-  <Suspense v-else>
-    <template #default><slot /></template>
-    <template #fallback><Loading /></template>
-  </Suspense>
-</template>
-```
-
-Place boundaries around route views or sections, not around each data-bound component.
+Reuse the codebase's existing boundary component if it has one; otherwise follow the
+[boundary example](references/_AsyncBoundary.md) (`onErrorCaptured` stores the error and returns `false`;
+the template shows it or renders `<Suspense>`). Place boundaries around route views or sections, not around
+each data-bound component ([boundaries](references/data-dependency.md#boundaries)).
 
 ## Type-safe imperative actions
 
@@ -238,6 +183,7 @@ read the `:::vue` sections.
 - [_AsyncBoundary.md](references/_AsyncBoundary.md) - Suspense and onErrorCaptured boundaries
 - [useLoading](references/useLoading.md);[_useLoading.md](references/_useLoading.md) - Track async mutation state
 - [useDebounce](references/useDebounce.md) - Debounce values
+- [installation](references/installation.md) - Install `DataClientPlugin`
 - [getDefaultManagers](references/getDefaultManagers.md) - Configure `DataClientPlugin` managers
 - [data-dependency](references/data-dependency.md) - Rendering guide
 - [mutations](references/mutations.md);[_VoteDemo.md](references/_VoteDemo.md) - Mutations guide
diff --git a/.agents/skills/data-client-vue/evals/evals.json b/.agents/skills/data-client-vue/evals/evals.json
index 257d8b10fa09..55d5034a2369 100644
--- a/.agents/skills/data-client-vue/evals/evals.json
+++ b/.agents/skills/data-client-vue/evals/evals.json
@@ -23,10 +23,9 @@
       "files": [],
       "assertions": [
         "Both `useSuspense` calls are awaited at the top level of `<script setup>`.",
-        "The `useSuspense` arguments are passed as `computed(() => ...)` (or a ref) derived from `props.userId`, not a plain object like `{ id: props.userId }` that is read once.",
-        "No bare getter function (e.g. `() => ({ id: props.userId })`) is passed as an argument.",
+        "The `useSuspense` arguments are `computed(() => ...)` (or a ref) derived from `props.userId`: not a plain object like `{ id: props.userId }` that is read once, and not a bare getter function.",
         "Results are not copied into separate `ref()` or `reactive()` state; the template reads the returned values directly.",
-        "The template does not throw while a new `userId` is loading: it guards the results (e.g. `v-if`) or the component is remounted with `:key` so it suspends again.",
+        "The template guards the results (e.g. `v-if`) so it does not throw while a new `userId` is loading.",
         "The two fetches are not a waterfall: `useFetch` starts both before the first `await`, or the code otherwise starts them in parallel."
       ]
     }
diff --git a/.agents/skills/data-client-vue/references/installation.md b/.agents/skills/data-client-vue/references/installation.md
new file mode 120000
index 000000000000..7fca195ef422
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/installation.md
@@ -0,0 +1 @@
+../../../../docs/core/getting-started/installation.md
\ No newline at end of file

From 5e42bec7ee732e9be04f215c3b7656b78ecef4a7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 4 Oct 2026 16:06:13 +0000
Subject: [PATCH 04/15] docs(skills): Drop arg-change guard from
 data-client-vue skill

useSuspense() now keeps previous data while args change (#4131).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WEpX2AVQj3Xmn2Q51om3J4
---
 .agents/skills/data-client-vue/SKILL.md         | 5 ++---
 .agents/skills/data-client-vue/evals/evals.json | 1 -
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/.agents/skills/data-client-vue/SKILL.md b/.agents/skills/data-client-vue/SKILL.md
index a598cce8fe6a..7bb5038cb7e3 100644
--- a/.agents/skills/data-client-vue/SKILL.md
+++ b/.agents/skills/data-client-vue/SKILL.md
@@ -58,9 +58,8 @@ const props = defineProps<{ id: number }>();
 const todo = await useSuspense(TodoResource.get, computed(() => ({ id: props.id })));
 ```
 
-When arguments change, `useSuspense()` does not suspend again: the result is `undefined` until the new
-fetch resolves (unless that data is already cached). Guard the template (`v-if="todo"`), or have the
-parent remount the component with `:key="id"` so it suspends inside `<Suspense>` again.
+When arguments change, `useSuspense()` and `useLive()` keep the previous data until the new fetch resolves
+(no `v-if` guard needed); a failed fetch for the new arguments reaches `onErrorCaptured()`.
 
 ## Mutations
 
diff --git a/.agents/skills/data-client-vue/evals/evals.json b/.agents/skills/data-client-vue/evals/evals.json
index 55d5034a2369..b14d45ae0113 100644
--- a/.agents/skills/data-client-vue/evals/evals.json
+++ b/.agents/skills/data-client-vue/evals/evals.json
@@ -25,7 +25,6 @@
         "Both `useSuspense` calls are awaited at the top level of `<script setup>`.",
         "The `useSuspense` arguments are `computed(() => ...)` (or a ref) derived from `props.userId`: not a plain object like `{ id: props.userId }` that is read once, and not a bare getter function.",
         "Results are not copied into separate `ref()` or `reactive()` state; the template reads the returned values directly.",
-        "The template guards the results (e.g. `v-if`) so it does not throw while a new `userId` is loading.",
         "The two fetches are not a waterfall: `useFetch` starts both before the first `await`, or the code otherwise starts them in parallel."
       ]
     }

From 7cc86d45e375022a4e0e88618071011f0fb1f979 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 4 Oct 2026 17:16:05 +0000
Subject: [PATCH 05/15] docs: Show only the current framework's skills on Agent
 Skills page

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WEpX2AVQj3Xmn2Q51om3J4
---
 docs/core/getting-started/agent-skills.md | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/docs/core/getting-started/agent-skills.md b/docs/core/getting-started/agent-skills.md
index 1004a6348b09..37009f133e24 100644
--- a/docs/core/getting-started/agent-skills.md
+++ b/docs/core/getting-started/agent-skills.md
@@ -31,15 +31,25 @@ endpoints are found.
   and related schemas.
 - [**`/data-client-rest`**](https://skills.sh/reactive/data-client/data-client-rest) — defines REST APIs with `resource()`, `RestEndpoint`,
   CRUD methods, and response parsing.
+- [**`/data-client-manager`**](https://skills.sh/reactive/data-client/data-client-manager) — implements custom `Manager`s for websockets, SSE,
+  polling, subscriptions, logging, and middleware.
+
+:::react
+
 - [**`/data-client-react`**](https://skills.sh/reactive/data-client/data-client-react) — uses `useSuspense`, `useFetch`, `useQuery`, `useLive`,
   and mutation hooks.
-- [**`/data-client-vue`**](https://skills.sh/reactive/data-client/data-client-vue) — uses `useSuspense`, `useFetch`, `useQuery`, `useLive`,
-  and mutation composables with `DataClientPlugin`.
 - [**`/data-client-react-testing`**](https://skills.sh/reactive/data-client/data-client-react-testing) — writes React tests with `renderDataHook`,
   fixtures, interceptors, and `nock`.
+
+:::
+
+:::vue
+
+- [**`/data-client-vue`**](https://skills.sh/reactive/data-client/data-client-vue) — uses `useSuspense`, `useFetch`, `useQuery`, `useLive`,
+  and mutation composables with `DataClientPlugin`.
 - [**`/data-client-vue-testing`**](https://skills.sh/reactive/data-client/data-client-vue-testing) — writes Vue tests with `renderDataCompose`,
   `mountDataClient`, fixtures, and `nock`.
-- [**`/data-client-manager`**](https://skills.sh/reactive/data-client/data-client-manager) — implements custom `Manager`s for websockets, SSE,
-  polling, subscriptions, logging, and middleware.
+
+:::
 
 Browse the full catalog at [skills.sh/reactive/data-client](https://skills.sh/reactive/data-client).

From d4c4958c98cd71ac7d950b19106afcd6d3713eb4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 4 Oct 2026 17:18:48 +0000
Subject: [PATCH 06/15] docs: Fix openskills install command for specific
 skills

openskills has no --skill option (it errors 'unknown option'); install
each skill by its repo path instead.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WEpX2AVQj3Xmn2Q51om3J4
---
 website/src/components/SkillTabs.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/website/src/components/SkillTabs.tsx b/website/src/components/SkillTabs.tsx
index 8c875822737d..ae2def5c50fb 100644
--- a/website/src/components/SkillTabs.tsx
+++ b/website/src/components/SkillTabs.tsx
@@ -5,17 +5,27 @@ import React from 'react';
 
 interface Props {
   repo?: string;
+  /** Directory of the skills within repo; openskills installs one skill per path */
+  skillsDir?: string;
   skill?: string;
   skills?: string[];
 }
 
 export default function SkillTabs({
   repo = 'reactive/data-client',
+  skillsDir = '.agents/skills',
   skill,
   skills,
 }: Props) {
   const allSkills = skills ?? (skill ? [skill] : []);
   const skillFlag = allSkills.map(s => ` --skill ${s}`).join('');
+  // openskills has no --skill flag; it installs a single skill from its path
+  const openSkillsCommand =
+    allSkills.length ?
+      allSkills
+        .map(s => `npx openskills install ${repo}/${skillsDir}/${s}`)
+        .join('\n')
+    : `npx openskills install ${repo}`;
   return (
     <Tabs
       defaultValue="skills"
@@ -32,10 +42,7 @@ export default function SkillTabs({
         </CodeBlock>
       </TabItem>
       <TabItem value="openskills">
-        <CodeBlock className="language-bash">
-          npx openskills install {repo}
-          {skillFlag}
-        </CodeBlock>
+        <CodeBlock className="language-bash">{openSkillsCommand}</CodeBlock>
       </TabItem>
     </Tabs>
   );

From 8889b16a1d1e56fd3c81aec94a00cd77062a4d7f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 4 Oct 2026 17:19:28 +0000
Subject: [PATCH 07/15] docs: Install recommended per-framework skills on Agent
 Skills page

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WEpX2AVQj3Xmn2Q51om3J4
---
 docs/core/getting-started/agent-skills.md | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/docs/core/getting-started/agent-skills.md b/docs/core/getting-started/agent-skills.md
index 37009f133e24..761a4e0a5e91 100644
--- a/docs/core/getting-started/agent-skills.md
+++ b/docs/core/getting-started/agent-skills.md
@@ -11,7 +11,21 @@ The quickest way to get started is to let an [AI Agent](https://agentskills.io)
 
 ## Install
 
-<SkillTabs repo="reactive/data-client" />
+Install the recommended skills for :react[React]:vue[Vue]:
+
+:::react
+
+<SkillTabs repo="reactive/data-client" skills={['data-client-setup', 'data-client-rest-setup', 'data-client-endpoint-setup', 'data-client-graphql-setup', 'data-client-schema', 'data-client-rest', 'data-client-manager', 'data-client-react', 'data-client-react-testing']} />
+
+:::
+
+:::vue
+
+<SkillTabs repo="reactive/data-client" skills={['data-client-setup', 'data-client-rest-setup', 'data-client-endpoint-setup', 'data-client-graphql-setup', 'data-client-schema', 'data-client-rest', 'data-client-manager', 'data-client-vue', 'data-client-vue-testing']} />
+
+:::
+
+To pick from every skill instead, run `npx skills add reactive/data-client`.
 
 Then run skill `/data-client-setup` to install and wire up the provider for your
 project. It will automatically detect your framework (NextJS, Expo, React Native, Vue,

From f1e01356a02bb24985ef467902a2b5989810e65e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 4 Oct 2026 17:52:08 +0000
Subject: [PATCH 08/15] docs: Restore single install command on Agent Skills
 page

Per-framework selection moves to picker groups in a separate PR.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WEpX2AVQj3Xmn2Q51om3J4
---
 docs/core/getting-started/agent-skills.md | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/docs/core/getting-started/agent-skills.md b/docs/core/getting-started/agent-skills.md
index 761a4e0a5e91..37009f133e24 100644
--- a/docs/core/getting-started/agent-skills.md
+++ b/docs/core/getting-started/agent-skills.md
@@ -11,21 +11,7 @@ The quickest way to get started is to let an [AI Agent](https://agentskills.io)
 
 ## Install
 
-Install the recommended skills for :react[React]:vue[Vue]:
-
-:::react
-
-<SkillTabs repo="reactive/data-client" skills={['data-client-setup', 'data-client-rest-setup', 'data-client-endpoint-setup', 'data-client-graphql-setup', 'data-client-schema', 'data-client-rest', 'data-client-manager', 'data-client-react', 'data-client-react-testing']} />
-
-:::
-
-:::vue
-
-<SkillTabs repo="reactive/data-client" skills={['data-client-setup', 'data-client-rest-setup', 'data-client-endpoint-setup', 'data-client-graphql-setup', 'data-client-schema', 'data-client-rest', 'data-client-manager', 'data-client-vue', 'data-client-vue-testing']} />
-
-:::
-
-To pick from every skill instead, run `npx skills add reactive/data-client`.
+<SkillTabs repo="reactive/data-client" />
 
 Then run skill `/data-client-setup` to install and wire up the provider for your
 project. It will automatically detect your framework (NextJS, Expo, React Native, Vue,

From 2fb94bf2c0879339fb02bdb09f291ad47e53c17b Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 4 Oct 2026 17:52:58 +0000
Subject: [PATCH 09/15] docs: OpenSkills tab installs recommended per-framework
 skills

openskills has no grouping, so install each framework's recommended
skills by path; the skills CLI keeps its picker.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WEpX2AVQj3Xmn2Q51om3J4
---
 docs/core/getting-started/agent-skills.md | 12 +++++++++++-
 website/src/components/SkillTabs.tsx      |  8 ++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/docs/core/getting-started/agent-skills.md b/docs/core/getting-started/agent-skills.md
index 37009f133e24..2b720b87f76e 100644
--- a/docs/core/getting-started/agent-skills.md
+++ b/docs/core/getting-started/agent-skills.md
@@ -11,7 +11,17 @@ The quickest way to get started is to let an [AI Agent](https://agentskills.io)
 
 ## Install
 
-<SkillTabs repo="reactive/data-client" />
+:::react
+
+<SkillTabs repo="reactive/data-client" openSkills={['data-client-setup', 'data-client-rest-setup', 'data-client-endpoint-setup', 'data-client-graphql-setup', 'data-client-schema', 'data-client-rest', 'data-client-manager', 'data-client-react', 'data-client-react-testing']} />
+
+:::
+
+:::vue
+
+<SkillTabs repo="reactive/data-client" openSkills={['data-client-setup', 'data-client-rest-setup', 'data-client-endpoint-setup', 'data-client-graphql-setup', 'data-client-schema', 'data-client-rest', 'data-client-manager', 'data-client-vue', 'data-client-vue-testing']} />
+
+:::
 
 Then run skill `/data-client-setup` to install and wire up the provider for your
 project. It will automatically detect your framework (NextJS, Expo, React Native, Vue,
diff --git a/website/src/components/SkillTabs.tsx b/website/src/components/SkillTabs.tsx
index ae2def5c50fb..85b406df7070 100644
--- a/website/src/components/SkillTabs.tsx
+++ b/website/src/components/SkillTabs.tsx
@@ -9,6 +9,8 @@ interface Props {
   skillsDir?: string;
   skill?: string;
   skills?: string[];
+  /** Skills for the OpenSkills tab when it should differ from `skills` (it has no picker groups) */
+  openSkills?: string[];
 }
 
 export default function SkillTabs({
@@ -16,13 +18,15 @@ export default function SkillTabs({
   skillsDir = '.agents/skills',
   skill,
   skills,
+  openSkills,
 }: Props) {
   const allSkills = skills ?? (skill ? [skill] : []);
   const skillFlag = allSkills.map(s => ` --skill ${s}`).join('');
   // openskills has no --skill flag; it installs a single skill from its path
+  const openSkillList = openSkills ?? allSkills;
   const openSkillsCommand =
-    allSkills.length ?
-      allSkills
+    openSkillList.length ?
+      openSkillList
         .map(s => `npx openskills install ${repo}/${skillsDir}/${s}`)
         .join('\n')
     : `npx openskills install ${repo}`;

From 687ca7c9663e2408154fcee170732d27e92403cc Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 4 Oct 2026 18:14:05 +0000
Subject: [PATCH 10/15] docs(skills): Use getter args in data-client-vue skill

Link the shared Vue argument docs (#4144) now that getters resolve
(#4115), and drop the stale React-skill note from the debugging page
(#4116).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WEpX2AVQj3Xmn2Q51om3J4
---
 .agents/skills/data-client-vue/SKILL.md               | 10 +++++-----
 .agents/skills/data-client-vue/evals/evals.json       |  4 ++--
 .agents/skills/data-client-vue/references/_vueArgs.md |  1 +
 docs/core/getting-started/debugging.md                |  8 --------
 4 files changed, 8 insertions(+), 15 deletions(-)
 create mode 120000 .agents/skills/data-client-vue/references/_vueArgs.md

diff --git a/.agents/skills/data-client-vue/SKILL.md b/.agents/skills/data-client-vue/SKILL.md
index 7bb5038cb7e3..98663a149d03 100644
--- a/.agents/skills/data-client-vue/SKILL.md
+++ b/.agents/skills/data-client-vue/SKILL.md
@@ -34,7 +34,7 @@ useFetch(CommentResource.getList, { postId: id });
 const post = await useSuspense(PostResource.get, { id });
 const comments = await useSuspense(CommentResource.getList, { postId: id });
 // conditional: null skips fetching and binding
-const user = await useSuspense(UserResource.get, computed(() => (userId.value ? { id: userId.value } : null)));
+const user = await useSuspense(UserResource.get, () => (userId.value ? { id: userId.value } : null));
 ```
 
 For API definitions (like TodoResource), apply the skill "data-client-rest".
@@ -48,14 +48,13 @@ For API definitions (like TodoResource), apply the skill "data-client-rest".
 
 ### Reactive arguments
 
-Arguments can be plain values, `ref`s, or `computed`s. A plain object is read once, so it will not
-refetch when a prop or route param changes. Whenever an argument depends on reactive state, pass a
-`computed()` or `ref()` (not a bare getter function like `() => ({ id })`):
+A plain object like `{ id: props.id }` is read once and won't follow prop or route changes. When an
+argument can change, pass a getter (or a `ref`/`computed`) ([arguments](references/_vueArgs.md)):
 
 ```ts
 const props = defineProps<{ id: number }>();
 // refetches when props.id changes
-const todo = await useSuspense(TodoResource.get, computed(() => ({ id: props.id })));
+const todo = await useSuspense(TodoResource.get, () => ({ id: props.id }));
 ```
 
 When arguments change, `useSuspense()` and `useLive()` keep the previous data until the new fetch resolves
@@ -171,6 +170,7 @@ For detailed API documentation, see the [references](references/) directory. The
 read the `:::vue` sections.
 
 - [useSuspense](references/useSuspense.md);[_pagination.md](references/_pagination.md) - Fetch with Suspense
+- [_vueArgs](references/_vueArgs.md) - Plain, ref, computed, and getter arguments
 - [useFetch](references/useFetch.md) - Start fetches early for parallel loading
 - [useQuery](references/useQuery.md) - Read from cache without fetch
 - [useCache](references/useCache.md) - Read from cache (nullable)
diff --git a/.agents/skills/data-client-vue/evals/evals.json b/.agents/skills/data-client-vue/evals/evals.json
index b14d45ae0113..6ed08b36a626 100644
--- a/.agents/skills/data-client-vue/evals/evals.json
+++ b/.agents/skills/data-client-vue/evals/evals.json
@@ -19,11 +19,11 @@
       "id": 2,
       "name": "reactive-prop-args",
       "prompt": "Write src/components/UserTodos.vue. It takes a `userId: number` prop and renders the user's name (UserResource.get) and their todo titles (TodoResource.getList with `{ userId }`). The parent swaps `userId` without remounting, so the data must follow the prop. Loading should use Suspense. UserResource and TodoResource are in src/resources/.",
-      "expected_output": "A <script setup> component that awaits useSuspense for both endpoints with computed() arguments derived from props.userId, starts both fetches in parallel with useFetch (or otherwise avoids a waterfall), and renders through the template.",
+      "expected_output": "A <script setup> component that awaits useSuspense for both endpoints with getter (or computed) arguments derived from props.userId, starts both fetches in parallel with useFetch (or otherwise avoids a waterfall), and renders through the template.",
       "files": [],
       "assertions": [
         "Both `useSuspense` calls are awaited at the top level of `<script setup>`.",
-        "The `useSuspense` arguments are `computed(() => ...)` (or a ref) derived from `props.userId`: not a plain object like `{ id: props.userId }` that is read once, and not a bare getter function.",
+        "The `useSuspense` arguments follow `props.userId`: a getter like `() => ({ id: props.userId })`, a `computed`, or a ref, not a plain object like `{ id: props.userId }` that is read once.",
         "Results are not copied into separate `ref()` or `reactive()` state; the template reads the returned values directly.",
         "The two fetches are not a waterfall: `useFetch` starts both before the first `await`, or the code otherwise starts them in parallel."
       ]
diff --git a/.agents/skills/data-client-vue/references/_vueArgs.md b/.agents/skills/data-client-vue/references/_vueArgs.md
new file mode 120000
index 000000000000..00a326155d94
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/_vueArgs.md
@@ -0,0 +1 @@
+../../../../docs/core/shared/_vueArgs.mdx
\ No newline at end of file
diff --git a/docs/core/getting-started/debugging.md b/docs/core/getting-started/debugging.md
index 874631445f3e..2f2ab4996cbd 100644
--- a/docs/core/getting-started/debugging.md
+++ b/docs/core/getting-started/debugging.md
@@ -16,14 +16,6 @@ For many debugging tasks, the fastest path is to use an agent that already knows
 Install the :react[[`data-client-react` skill](https://skills.sh/reactive/data-client/data-client-react)]:vue[[`data-client-vue` skill](https://skills.sh/reactive/data-client/data-client-vue)]
 in your coding agent, then ask it to inspect the current page or app state.
 
-:::vue
-
-The skill is named for React, but its `devtools-debugging` workflow only uses the
-[Controller](../api/Controller.md), so it works the same with `@data-client/vue`. Ask your agent
-to follow that reference.
-
-:::
-
 ### How agent debugging works
 
 In dev mode, [DevToolsManager](../api/DevToolsManager.md) exposes live `Controller` instances so an agent can inspect

From 81ad561998a1817011f4718e4c5cdb4ec9992981 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 4 Oct 2026 21:25:51 +0000
Subject: [PATCH 11/15] docs(skills): Use public test import in
 data-client-vue-testing

Import renderDataCompose/mountDataClient from @data-client/vue/test, and
point the composable testing reference at the Vue test utilities guide
instead of the React-only unit-testing-hooks guide.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WEpX2AVQj3Xmn2Q51om3J4
---
 .agents/skills/data-client-vue-testing/SKILL.md             | 6 +++---
 .../references/polling-subscriptions.md                     | 2 +-
 .../references/unit-testing-hooks.md                        | 1 -
 .../references/vue-test-utilities.md                        | 1 +
 4 files changed, 5 insertions(+), 5 deletions(-)
 delete mode 120000 .agents/skills/data-client-vue-testing/references/unit-testing-hooks.md
 create mode 120000 .agents/skills/data-client-vue-testing/references/vue-test-utilities.md

diff --git a/.agents/skills/data-client-vue-testing/SKILL.md b/.agents/skills/data-client-vue-testing/SKILL.md
index 0f6e5bbd42e1..f210298cff86 100644
--- a/.agents/skills/data-client-vue-testing/SKILL.md
+++ b/.agents/skills/data-client-vue-testing/SKILL.md
@@ -9,7 +9,7 @@ license: Apache 2.0
 ## Composable Testing with renderDataCompose()
 
 ```typescript
-import { renderDataCompose } from '../test';
+import { renderDataCompose } from '@data-client/vue/test';
 import { reactive, computed } from 'vue';
 
 it('useQuery() should return cached data', () => {
@@ -46,7 +46,7 @@ it('useQuery() should return cached data', () => {
 ## Component Testing with mountDataClient()
 
 ```typescript
-import { mountDataClient } from '../test';
+import { mountDataClient } from '@data-client/vue/test';
 import { defineComponent, h, reactive } from 'vue';
 
 it('should render article component', async () => {
@@ -369,7 +369,7 @@ expect(result.current?.value?.title).toBe('hi ho');
 For detailed API documentation, see the [references](references/) directory:
 
 - [Fixtures](references/Fixtures.md) - Fixture format reference
-- [unit-testing-hooks](references/unit-testing-hooks.md) - Hook/composable testing guide
+- [vue-test-utilities](references/vue-test-utilities.md) - `renderDataCompose()` and `mountDataClient()` guide
 - [nock-http-mocking](references/nock-http-mocking.md) - Full nock setup, dynamic server state, request spying, errors, pitfalls
 - [polling-subscriptions](references/polling-subscriptions.md) - Fake-timer patterns for `useLive`/`useSubscription`/`pollFrequency`, unsubscribe verification, polling via nock
 
diff --git a/.agents/skills/data-client-vue-testing/references/polling-subscriptions.md b/.agents/skills/data-client-vue-testing/references/polling-subscriptions.md
index d916a2e7f2e7..f4609d6b3acc 100644
--- a/.agents/skills/data-client-vue-testing/references/polling-subscriptions.md
+++ b/.agents/skills/data-client-vue-testing/references/polling-subscriptions.md
@@ -23,7 +23,7 @@ Best for testing data-flow without involving the network layer.
 
 ```typescript
 import { computed, reactive, nextTick } from 'vue';
-import { renderDataCompose } from '../test';
+import { renderDataCompose } from '@data-client/vue/test';
 
 it('subscribes and re-renders on poll', async () => {
   jest.useFakeTimers();
diff --git a/.agents/skills/data-client-vue-testing/references/unit-testing-hooks.md b/.agents/skills/data-client-vue-testing/references/unit-testing-hooks.md
deleted file mode 120000
index d3d67757a231..000000000000
--- a/.agents/skills/data-client-vue-testing/references/unit-testing-hooks.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../../docs/core/guides/unit-testing-hooks.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue-testing/references/vue-test-utilities.md b/.agents/skills/data-client-vue-testing/references/vue-test-utilities.md
new file mode 120000
index 000000000000..c9f6d4f86988
--- /dev/null
+++ b/.agents/skills/data-client-vue-testing/references/vue-test-utilities.md
@@ -0,0 +1 @@
+../../../../packages/vue/src/test/README.md
\ No newline at end of file

From 6989fc2dc14bfe229e6eae70e893d1be70fdfdd0 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 4 Oct 2026 21:26:22 +0000
Subject: [PATCH 12/15] docs(vue): Use getter args for prop changes in test
 docs

The test utilities guide and testing skill said async setup can't follow
prop changes; getter args (#4115) do, so show those instead.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WEpX2AVQj3Xmn2Q51om3J4
---
 .agents/skills/data-client-vue-testing/SKILL.md | 2 +-
 packages/vue/src/test/README.md                 | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.agents/skills/data-client-vue-testing/SKILL.md b/.agents/skills/data-client-vue-testing/SKILL.md
index f210298cff86..2fb77d8ce34c 100644
--- a/.agents/skills/data-client-vue-testing/SKILL.md
+++ b/.agents/skills/data-client-vue-testing/SKILL.md
@@ -362,7 +362,7 @@ expect(result.current?.value?.title).toBe('hi ho');
 - **useSuspense returns Promise → ComputedRef** - Await once, then access `.value`
 - **Test both empty and populated states** - Verify undefined behavior
 - **Test reactive prop changes** - Use `reactive()` and verify updates
-- **Don't test with async setup + prop changes** - Async setup only runs once; use non-async patterns or useFetch + watchEffect instead
+- **Pass prop-derived args as getters** - Async setup runs once, so `useSuspense(Resource.get, () => ({ id: props.id }))` follows prop changes; a plain `{ id: props.id }` is read once
 
 ## References
 
diff --git a/packages/vue/src/test/README.md b/packages/vue/src/test/README.md
index ad7975965d1a..b9a9cd50af35 100644
--- a/packages/vue/src/test/README.md
+++ b/packages/vue/src/test/README.md
@@ -130,7 +130,8 @@ const ArticleComponent = defineComponent({
     },
   },
   async setup(props) {
-    const article = await useSuspense(MyResource.get, { id: props.id });
+    // a getter so the fetch follows props.id
+    const article = await useSuspense(MyResource.get, () => ({ id: props.id }));
     return () => h('div', article.value.title);
   },
 });
@@ -269,7 +270,7 @@ interface Interceptor {
 6. **Suspense is automatic** - no need to manually wrap components in Suspense
 7. **Use reactive props** - Pass a `reactive` in the `props` option and set its members to change component props
 8. **Vue Suspense behavior** - Vue's `useSuspense` returns a Promise that suspends when data is missing, then resolves to a ComputedRef
-9. **Reactive props with async setup** - Components using async setup with `useSuspense` that depend on props should use `useFetch` + `watchEffect` for reactive behavior, or rely on non-async setup patterns. Async setup only runs once per component instance.
+9. **Reactive props with async setup** - Async setup runs once per component instance, so pass prop-derived arguments as a getter (`() => ({ id: props.id })`); a plain object is read once and won't follow prop changes.
 
 ## Migration from Manual Setup
 

From 17657e92c7b6533b6b7d059ed384563c078607f8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 5 Oct 2026 03:24:37 +0000
Subject: [PATCH 13/15] docs(skills): Generate data-client-vue references from
 the docs

Master now generates skill references with `yarn build:skills` and rejects
symlinks, so list data-client-vue's docs in references.json.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FeVX5keFmnSsjrzRZnnMHj
---
 .../skills/data-client-vue/references.json    |  28 +
 .../data-client-vue/references/Actions.md     | 277 +++++++-
 .../data-client-vue/references/Controller.md  | 654 +++++++++++++++++-
 .../references/_AsyncBoundary.md              |  31 +-
 .../data-client-vue/references/_VoteDemo.md   | 125 +++-
 .../data-client-vue/references/_pagination.md | 109 ++-
 .../data-client-vue/references/_useLive.md    |  58 +-
 .../data-client-vue/references/_useLoading.md | 124 +++-
 .../references/data-dependency.md             | 365 +++++++++-
 .../references/devtools-debugging.md          | 367 +++++++++-
 .../references/getDefaultManagers.md          | 113 ++-
 .../references/installation.md                |  80 ++-
 .../data-client-vue/references/mutations.md   | 377 +++++++++-
 .../data-client-vue/references/useCache.md    | 131 +++-
 .../references/useController.md               | 171 ++++-
 .../data-client-vue/references/useDLE.md      | 271 +++++++-
 .../data-client-vue/references/useDebounce.md | 126 +++-
 .../data-client-vue/references/useFetch.md    | 166 ++++-
 .../data-client-vue/references/useLive.md     | 114 ++-
 .../data-client-vue/references/useLoading.md  | 161 ++++-
 .../data-client-vue/references/useQuery.md    | 304 +++++++-
 .../references/useSubscription.md             | 112 ++-
 .../data-client-vue/references/useSuspense.md | 419 ++++++++++-
 23 files changed, 4661 insertions(+), 22 deletions(-)
 create mode 100644 .agents/skills/data-client-vue/references.json
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/Actions.md
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/Controller.md
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/_AsyncBoundary.md
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/_VoteDemo.md
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/_pagination.md
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/_useLive.md
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/_useLoading.md
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/data-dependency.md
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/devtools-debugging.md
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/getDefaultManagers.md
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/installation.md
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/mutations.md
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/useCache.md
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/useController.md
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/useDLE.md
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/useDebounce.md
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/useFetch.md
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/useLive.md
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/useLoading.md
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/useQuery.md
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/useSubscription.md
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/useSuspense.md

diff --git a/.agents/skills/data-client-vue/references.json b/.agents/skills/data-client-vue/references.json
new file mode 100644
index 000000000000..9480208b976b
--- /dev/null
+++ b/.agents/skills/data-client-vue/references.json
@@ -0,0 +1,28 @@
+{
+  "frameworks": [
+    "vue"
+  ],
+  "docs": {
+    "Actions.md": "docs/core/api/Actions.md",
+    "Controller.md": "docs/core/api/Controller.md",
+    "_AsyncBoundary.md": "docs/core/shared/_AsyncBoundary.mdx",
+    "_VoteDemo.md": "docs/core/shared/_VoteDemo.mdx",
+    "_pagination.md": "docs/core/shared/_pagination.mdx",
+    "_useLive.md": "docs/core/shared/_useLive.mdx",
+    "_useLoading.md": "docs/core/shared/_useLoading.mdx",
+    "data-dependency.md": "docs/core/getting-started/data-dependency.md",
+    "getDefaultManagers.md": "docs/core/api/getDefaultManagers.md",
+    "installation.md": "docs/core/getting-started/installation.md",
+    "mutations.md": "docs/core/getting-started/mutations.md",
+    "useCache.md": "docs/core/api/useCache.md",
+    "useController.md": "docs/core/api/useController.md",
+    "useDLE.md": "docs/core/api/useDLE.md",
+    "useDebounce.md": "docs/core/api/useDebounce.md",
+    "useFetch.md": "docs/core/api/useFetch.md",
+    "useLive.md": "docs/core/api/useLive.md",
+    "useLoading.md": "docs/core/api/useLoading.md",
+    "useQuery.md": "docs/core/api/useQuery.md",
+    "useSubscription.md": "docs/core/api/useSubscription.md",
+    "useSuspense.md": "docs/core/api/useSuspense.md"
+  }
+}
diff --git a/.agents/skills/data-client-vue/references/Actions.md b/.agents/skills/data-client-vue/references/Actions.md
deleted file mode 120000
index 921a154aab5d..000000000000
--- a/.agents/skills/data-client-vue/references/Actions.md
+++ /dev/null
@@ -1 +0,0 @@
-../../data-client-manager/references/Actions.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/Actions.md b/.agents/skills/data-client-vue/references/Actions.md
new file mode 100644
index 000000000000..2cc47ea8b422
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/Actions.md
@@ -0,0 +1,276 @@
+<!-- Generated by `yarn build:skills` from docs/core/api/Actions.md (vue). Edit the source doc, not this file. -->
+
+# Actions
+
+Actions are minimal descriptions of store updates.
+
+They are [dispatched by Controller methods](./Controller.md#action-dispatchers) ->
+[read and consumed by Manager middleware](https://dataclient.io/vue/api/Manager#reading-and-consuming-actions) ->
+processed by [reducers](https://react.dev/reference/react/useReducer) registered with [DataClientPlugin](./installation.md)
+to update the store's state.
+
+Many actions use the same meta information:
+
+```ts
+interface ActionMeta {
+  readonly fetchedAt: number;
+  readonly date: number;
+  readonly expiresAt: number;
+}
+```
+
+## FETCH
+
+```ts
+interface FetchMeta {
+  fetchedAt: number;
+  resolve: (value?: any | PromiseLike<any>) => void;
+  reject: (reason?: any) => void;
+  promise: PromiseLike<any>;
+}
+
+interface FetchAction {
+  type: typeof actionTypes.FETCH;
+  endpoint: Endpoint;
+  args: readonly [...Parameters<Endpoint>];
+  key: string;
+  meta: FetchMeta;
+}
+```
+
+```js
+{
+  type: 'rdc/fetch',
+  key: 'GET https://jsonplaceholder.typicode.com/todos?userId=1',
+  args: [
+    {
+      userId: 1
+    }
+  ],
+  endpoint: Endpoint('User.getList'),
+  meta: {
+    fetchedAt: '5:09:41.975 PM',
+    resolve: function (){},
+    reject: function (){},
+    promise: {}
+  }
+}
+```
+
+Sent by [Controller.fetch()](./Controller.md#fetch), [Controller.fetchIfStale()](./Controller.md#fetchIfStale),
+[useSuspense()](./useSuspense.md), [useDLE()](./useDLE.md), [useLive()](./useLive.md), [useFetch()](./useFetch.md)
+
+Read by [NetworkManager](https://dataclient.io/vue/api/NetworkManager)
+
+## SET
+
+```ts
+interface SetAction {
+  type: typeof actionTypes.SET;
+  schema: Queryable;
+  args: readonly any[];
+  meta: ActionMeta;
+  value: {} | ((previousValue: Denormalize<Queryable>) => {});
+}
+```
+
+```js
+{
+  type: 'rdc/set',
+  value: {
+    userId: 1,
+    id: 1,
+    title: 'delectus aut autem',
+    completed: true
+  },
+  args: [
+    {
+      id: 1
+    }
+  ],
+  schema: Todo,
+  meta: {
+    fetchedAt: '5:18:26.394 PM',
+    date: '5:18:26.636 PM',
+    expiresAt: '6:18:26.636 PM'
+  }
+}
+```
+
+Sent by [Controller.set()](./Controller.md#set)
+
+## SET\_RESPONSE
+
+```ts
+interface SetResponseAction {
+  type: typeof actionTypes.SET_RESPONSE;
+  endpoint: Endpoint;
+  args: readonly any[];
+  key: string;
+  meta: ActionMeta;
+  response: ResolveType<Endpoint> | Error;
+  error: boolean;
+}
+```
+
+```js
+{
+  type: 'rdc/setresponse',
+  key: 'PATCH https://jsonplaceholder.typicode.com/todos/1',
+  response: {
+    userId: 1,
+    id: 1,
+    title: 'delectus aut autem',
+    completed: true
+  },
+  args: [
+    {
+      id: 1
+    },
+    {
+      completed: true
+    }
+  ],
+  endpoint: Endpont('Todo.partialUpdate'),
+  meta: {
+    fetchedAt: '5:18:26.394 PM',
+    date: '5:18:26.636 PM',
+    expiresAt: '6:18:26.636 PM'
+  },
+  error: false
+}
+```
+
+Sent by [Controller.setResponse()](./Controller.md#setResponse), [NetworkManager](https://dataclient.io/vue/api/NetworkManager)
+
+Read by [NetworkManager](https://dataclient.io/vue/api/NetworkManager), [LogoutManager](https://dataclient.io/vue/api/LogoutManager)
+
+## RESET
+
+```ts
+interface ResetAction {
+  type: typeof actionTypes.RESET;
+  date: number;
+}
+```
+
+```js
+{
+  type: 'rdc/reset',
+  date: '5:09:41.975 PM',
+}
+```
+
+Sent by [Controller.resetEntireStore()](./Controller.md#resetEntireStore)
+
+Read by [NetworkManager](https://dataclient.io/vue/api/NetworkManager)
+
+## SUBSCRIBE
+
+```ts
+interface SubscribeAction {
+  type: typeof actionTypes.SUBSCRIBE;
+  endpoint: Endpoint;
+  args: readonly any[];
+  key: string;
+}
+```
+
+```js
+{
+  type: 'rdc/subscribe',
+  key: 'GET https://api.exchange.coinbase.com/products/BTC-USD/ticker',
+  args: [
+    {
+      product_id: 'BTC-USD'
+    }
+  ],
+  endpoint: Endpoint('https://api.exchange.coinbase.com/products/:product_id/ticker'),
+}
+```
+
+Sent by [Controller.subscribe()](./Controller.md#subscribe), [useSubscription()](./useSubscription.md), [useLive()](./useLive.md)
+
+Read by [SubscriptionManager](https://dataclient.io/vue/api/SubscriptionManager)
+
+## UNSUBSCRIBE
+
+```ts
+interface UnsubscribeAction {
+  type: typeof actionTypes.UNSUBSCRIBE;
+  endpoint: Endpoint;
+  args: readonly any[];
+  key: string;
+}
+```
+
+```js
+{
+  type: 'rdc/unsubscribe',
+  key: 'GET https://api.exchange.coinbase.com/products/BTC-USD/ticker',
+  args: [
+    {
+      product_id: 'BTC-USD'
+    }
+  ],
+  endpoint: Endpoint('https://api.exchange.coinbase.com/products/:product_id/ticker'),
+}
+```
+
+Sent by [Controller.unsubscribe()](./Controller.md#unsubscribe), [useSubscription()](./useSubscription.md), [useLive()](./useLive.md)
+
+Read by [SubscriptionManager](https://dataclient.io/vue/api/SubscriptionManager)
+
+## INVALIDATE
+
+```ts
+interface InvalidateAction {
+  type: typeof actionTypes.INVALIDATE;
+  key: string;
+}
+```
+
+```js
+{
+  type: 'rdc/invalidate',
+  key: 'GET https://jsonplaceholder.typicode.com/todos?userId=1',
+}
+```
+
+Sent by [Controller.invalidate()](./Controller.md#invalidate)
+
+## INVALIDATEALL
+
+```ts
+interface InvalidateAllAction {
+  type: typeof actionTypes.INVALIDATEALL;
+  testKey: (key: string) => boolean;
+}
+```
+
+```js
+{
+  type: 'rdc/invalidateall',
+  testKey: Endpoint('User.getList'),
+}
+```
+
+Sent by [Controller.invalidateAll()](./Controller.md#invalidateAll)
+
+## EXPIREALL
+
+```ts
+interface ExpireAllAction {
+  type: typeof actionTypes.EXPIREALL;
+  testKey: (key: string) => boolean;
+}
+```
+
+```js
+{
+  type: 'rdc/expireall',
+  testKey: Endpoint('User.getList'),
+}
+```
+
+Sent by [Controller.expireAll()](./Controller.md#expireAll)
diff --git a/.agents/skills/data-client-vue/references/Controller.md b/.agents/skills/data-client-vue/references/Controller.md
deleted file mode 120000
index 359c06beecd7..000000000000
--- a/.agents/skills/data-client-vue/references/Controller.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../../docs/core/api/Controller.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/Controller.md b/.agents/skills/data-client-vue/references/Controller.md
new file mode 100644
index 000000000000..390f59f258ec
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/Controller.md
@@ -0,0 +1,653 @@
+<!-- Generated by `yarn build:skills` from docs/core/api/Controller.md (vue). Edit the source doc, not this file. -->
+
+# Controller
+
+`Controller` is a singleton providing safe access to the Reactive Data Client [flux store and lifecycle](https://dataclient.io/vue/api/Manager#control-flow).
+`Controller` memoizes all store access, allowing a global referential equality guarantee and the fastest rendering
+and retrieval performance.
+
+`Controller` is provided:
+
+- [Managers](https://dataclient.io/vue/api/Manager) as the first argument in [Manager.middleware](https://dataclient.io/vue/api/Manager#middleware)
+- Vue with [useController()](./useController.md)
+- Unit testing composables with `renderDataCompose()` from `@data-client/vue/test`
+
+```ts
+class Controller {
+  /*************** Action Dispatchers ***************/
+  fetch(endpoint, ...args): ReturnType<E>;
+  fetchIfStale(endpoint, ...args): ReturnType<E> | undefined;
+  expireAll({ testKey }): Promise<void>;
+  invalidate(endpoint, ...args): Promise<void>;
+  invalidateAll({ testKey }): Promise<void>;
+  resetEntireStore(): Promise<void>;
+  set(queryable, ...args, value): Promise<void>;
+  set([Entity], rows): Promise<void>;
+  setResponse(endpoint, ...args, response): Promise<void>;
+  setError(endpoint, ...args, error): Promise<void>;
+  resolve(endpoint, { args, response, fetchedAt, error }): Promise<void>;
+  subscribe(endpoint, ...args): Promise<void>;
+  unsubscribe(endpoint, ...args): Promise<void>;
+  /*************** Data Access ***************/
+  get(queryable, ...args, state): Denormalized<typeof queryable>;
+  getResponse(endpoint, ...args, state): { data; expiryStatus; expiresAt };
+  getError(endpoint, ...args, state): ErrorTypes | undefined;
+  snapshot(state: State<unknown>, fetchedAt?: number): SnapshotInterface;
+  getState(): State<unknown>;
+}
+```
+
+## Action Dispatchers
+
+### fetch(endpoint, ...args) {#fetch}
+
+Fetches the endpoint with given args, updating the Reactive Data Client cache with
+the response or error upon completion.
+
+**Create**
+
+```tsx
+function CreatePost() {
+  const ctrl = useController();
+
+  return (
+    <form
+      onSubmit={e =>
+        ctrl.fetch(PostResource.getList.push, new FormData(e.target))
+      }
+    >
+      {/* ... */}
+    </form>
+  );
+}
+```
+
+**Update**
+
+```tsx
+function UpdatePost({ id }: { id: string }) {
+  const ctrl = useController();
+
+  return (
+    <form
+      onSubmit={e =>
+        ctrl.fetch(PostResource.update, { id }, new FormData(e.target))
+      }
+    >
+      {/* ... */}
+    </form>
+  );
+}
+```
+
+**Delete**
+
+```tsx
+function PostListItem({ post }: { post: PostResource }) {
+  const ctrl = useController();
+
+  const handleDelete = useCallback(
+    async e => {
+      await ctrl.fetch(PostResource.delete, { id: post.id });
+      history.push('/');
+    },
+    [ctrl, id],
+  );
+
+  return (
+    <div>
+      <h3>{post.title}</h3>
+      <button onClick={handleDelete}>X</button>
+    </div>
+  );
+}
+```
+
+> **Tip**
+>
+> `fetch` has the same return value as the [Endpoint](https://dataclient.io/rest/api/Endpoint) passed to it.
+> When using schemas, the denormalized value is returned
+>
+> ```ts
+> import { useController } from '@data-client/react';
+>
+> const post = await controller.fetch(
+>   PostResource.getList.push,
+>   createPayload,
+> );
+> post.title;
+> post.pk();
+> ```
+
+#### Endpoint.sideEffect
+
+[sideEffect](https://dataclient.io/rest/api/Endpoint#sideeffect) changes the behavior
+
+##### true
+
+- Resolves _before_ [committing](https://react.dev/learn/render-and-commit#step-3-react-commits-changes-to-the-dom) Reactive Data Client cache updates. (React 16, 17)
+- Each call will always cause a new fetch.
+
+##### false | undefined
+
+- Resolves _after_ [committing](https://react.dev/learn/render-and-commit#step-3-react-commits-changes-to-the-dom) Reactive Data Client cache updates.
+- Identical requests are deduplicated globally; allowing only one inflight request at a time.
+  - To ensure a _new_ request is started, make sure to abort any existing inflight requests.
+
+### fetchIfStale(endpoint, ...args) {#fetchIfStale}
+
+Fetches only if endpoint is considered '[stale](https://dataclient.io/vue/concepts/expiry-policy#stale)'.
+
+This can be useful when prefetching data, as it avoids overfetching fresh data.
+
+An [example](https://stackblitz.com/github/reactive/data-client/tree/master/examples/github-app?file=src%2Frouting%2Froutes.tsx) with a fetch-as-you-render router:
+
+```ts
+{
+  name: 'IssueList',
+  component: lazyPage('IssuesPage'),
+  title: 'issue list',
+  resolveData: async (
+    controller: Controller,
+    { owner, repo }: { owner: string; repo: string },
+    searchParams: URLSearchParams,
+  ) => {
+    const q = searchParams?.get('q') || 'is:issue is:open';
+    await controller.fetchIfStale(IssueResource.search, {
+      owner,
+      repo,
+      q,
+    });
+  },
+},
+```
+
+Example app: [github-app](https://github.com/reactive/data-client/tree/master/examples/github-app) ([`src/routing/routes.tsx`](https://github.com/reactive/data-client/blob/master/examples/github-app/src/routing/routes.tsx))
+
+### expireAll({ testKey }) {#expireAll}
+
+Sets all responses' [expiry status](https://dataclient.io/vue/concepts/expiry-policy) matching `testKey` to [Stale](https://dataclient.io/vue/concepts/expiry-policy#stale).
+
+This is sometimes useful to trigger refresh of only data presently shown
+when there are many parameterizations in cache.
+
+```tsx
+import { type Controller, useController } from '@data-client/react';
+
+const createTradeHandler = (ctrl: Controller) => async trade => {
+  await ctrl.fetch(TradeResource.getList.push({ user: user.id }, trade));
+  ctrl.expireAll(AccountResource.get);
+  ctrl.expireAll(AccountResource.getList);
+};
+
+function CreateTrade({ id }: { id: string }) {
+  const handleTrade = createTradeHandler(useController());
+
+  return (
+    <Form onSubmit={handleTrade}>
+      <FormField name="ticker" />
+      <FormField name="amount" type="number" />
+      <FormField name="price" type="number" />
+    </Form>
+  );
+}
+```
+
+> **Tip**
+>
+> To reduce load, improve performance, and improve state consistency; it can often be
+> better to [include mutation sideeffects in the mutation response](https://dataclient.io/rest/guides/side-effects).
+
+### invalidate(endpoint, ...args) {#invalidate}
+
+Forces refetching and suspense on [useSuspense](./useSuspense.md) with the same Endpoint
+and parameters.
+
+```tsx
+function ArticleName({ id }: { id: string }) {
+  const article = useSuspense(ArticleResource.get, { id });
+  const ctrl = useController();
+
+  return (
+    <div>
+      <h1>{article.title}<h1>
+      <button onClick={() => ctrl.invalidate(ArticleResource.get, { id })}>Fetch &amp; suspend</button>
+    </div>
+  );
+}
+```
+
+> **Tip**
+>
+> To refresh while continuing to display stale data - [Controller.fetch](#fetch).
+
+> **Tip: Invalidate many endpoints at once**
+>
+> Use [schema.Invalidate](https://dataclient.io/rest/api/Invalidate) to invalidate every endpoint that contains a given entity.
+>
+> For REST try using [Resource.delete](https://dataclient.io/rest/api/resource#delete)
+>
+> ```ts
+> // deletes MyResource(5)
+> // this will resuspend MyResource.get({id: '5'})
+> // and remove it from MyResource.getList
+> controller.setResponse(MyResource.delete, { id: '5' }, { id: '5' });
+> ```
+
+### invalidateAll({ testKey }) {#invalidateAll}
+
+[Invalidates](https://dataclient.io/vue/concepts/expiry-policy#invalid) all [endpoint keys](https://dataclient.io/rest/api/RestEndpoint#key) matching `testKey`.
+
+```tsx
+function ArticleName({ id }: { id: string }) {
+  const article = useSuspense(ArticleResource.get, { id });
+  const ctrl = useController();
+
+  return (
+    <div>
+      <h1>{article.title}<h1>
+      <button onClick={() => ctrl.invalidateAll(ArticleResource.get)}>Fetch &amp; suspend</button>
+    </div>
+  );
+}
+```
+
+> **Tip**
+>
+> To refresh while continuing to display stale data - [Controller.expireAll](#expireAll) instead.
+
+Here we clear only GET endpoints using the test.com domain. This means other domains remain in cache.
+
+```tsx
+const myDomain = 'http://test.com';
+const testKey = (key: string) => key.startsWith(`GET ${myDomain}`);
+
+function useLogout() {
+  const ctrl = useController();
+  return () => ctrl.invalidateAll({ testKey });
+}
+```
+
+It's usually a good idea to also clear cache on 401 (unauthorized) with [LogoutManager](https://dataclient.io/vue/api/LogoutManager)
+as well.
+
+```ts
+import { DataProvider, LogoutManager, getDefaultManagers } from '@data-client/react';
+import { createRoot } from 'react-dom/client';
+import { unAuth } from '../authentication';
+
+const testKey = (key: string) => key.startsWith(`GET ${myDomain}`);
+
+const managers = [
+  new LogoutManager({
+    handleLogout(controller) {
+      // call custom unAuth function we defined
+      unAuth();
+      // still reset the store
+      controller.invalidateAll({ testKey });
+    },
+  }),
+  ...getDefaultManagers(),
+];
+
+createRoot(document.body).render(
+  <DataProvider managers={managers}>
+    <App />
+  </DataProvider>,
+);
+```
+
+### resetEntireStore() {#resetEntireStore}
+
+Resets/clears the entire Reactive Data Client cache. All inflight requests will not resolve.
+
+This is typically used when logging out or changing authenticated users.
+
+```tsx
+const USER_NUMBER_ONE: string = "1111";
+
+function UserName() {
+  const user = useSuspense(CurrentUserResource.get);
+  const ctrl = useController();
+
+  const becomeAdmin = useCallback(() => {
+    // Changes the current user
+    impersonateUser(USER_NUMBER_ONE);
+    ctrl.resetEntireStore();
+  }, [ctrl]);
+  return (
+    <div>
+      <h1>{user.name}<h1>
+      <button onClick={becomeAdmin}>Be Number One</button>
+    </div>
+  );
+}
+```
+
+### set(queryable, ...args, value) {#set}
+
+Updates any [Queryable](https://dataclient.io/rest/api/schema#queryable) [Schema](https://dataclient.io/rest/api/schema#schema-overview), or many entities at once with an [Array](https://dataclient.io/rest/api/Array) or [Values](https://dataclient.io/rest/api/Values) schema.
+
+```ts
+ctrl.set(
+  Todo,
+  // which Todo to update
+  { id: '5' },
+  // merge this data into the Todo in the store
+  { id: '5', title: 'tell me friends how great Data Client is' },
+);
+```
+
+The value is typed by the schema: an [Entity](https://dataclient.io/rest/api/Entity) takes its fields (numbers and strings may be either),
+while a [Collection](https://dataclient.io/rest/api/Collection) or [All](https://dataclient.io/rest/api/All) takes a list of rows. A [Query](https://dataclient.io/rest/api/Query)
+takes the input of the schema it wraps, since `set()` normalizes that schema rather than reversing `process()`.
+
+```ts
+ctrl.set(TodoResource.getList.schema, [{ id: '5', completed: true }]);
+```
+
+> **Note: Type checking limits**
+>
+> To keep type checking fast for large [Unions](https://dataclient.io/rest/api/Union), a Union row is checked against the
+> combined fields of all its members rather than against one member. Each field's type is still checked,
+> but a row that mixes fields from different members (like `{ type: 'first', secondField: 1 }`) is not
+> an error. Make sure the fields you set belong to the member the row's discriminator selects.
+
+Functions can be used in the value when derived data is used. This [prevents race conditions](https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state).
+
+```ts
+const id = '2';
+ctrl.set(Article, { id }, article => ({ id, votes: article.votes + 1 }));
+```
+
+#### set(\[Entity], rows) {#set-array}
+
+Pass an [Array](https://dataclient.io/rest/api/Array) schema (`[Todo]` or `new schema.Array(Todo)`) and a list of rows to update
+many entities in one store update. Each row merges with its stored entity; entities not in the list are untouched.
+
+```ts
+ctrl.set(
+  [Todo],
+  [
+    { id: '5', completed: true },
+    { id: '6', completed: false },
+  ],
+);
+```
+
+Rows are typed by the Entity's fields; numbers and strings may be either, and object, array and Date values are not
+checked since rows are raw input.
+
+For lists that mix Entity types, use a [Union](https://dataclient.io/rest/api/Union); each row is stored by its `type`:
+
+```ts
+const Feed = new schema.Union({ post: Post, comment: Comment }, 'type');
+
+ctrl.set(
+  [Feed],
+  [
+    { id: '1', type: 'post', title: 'Hello' },
+    { id: '7', type: 'comment', body: 'Nice!' },
+  ],
+);
+```
+
+To delete many entities at once, use [Invalidate](https://dataclient.io/rest/api/Invalidate#batch-invalidation); rows only need their pk
+fields:
+
+```ts
+ctrl.set([new schema.Invalidate(Todo)], [{ id: '5' }, { id: '6' }]);
+```
+
+[Values](https://dataclient.io/rest/api/Values) schemas take an object of rows instead:
+
+```ts
+ctrl.set(new schema.Values(Todo), {
+  '5': { id: '5', completed: true },
+  '6': { id: '6', completed: false },
+});
+```
+
+Array and Values schemas take no `args` (so [Entity.pk()](https://dataclient.io/rest/api/Entity#pk) and [Entity.process()](https://dataclient.io/rest/api/Entity#process)
+receive `[]`) and no updater function. Rows that share a pk merge in list order, without
+[Entity.shouldReorder()](https://dataclient.io/rest/api/Entity#shouldreorder). Use this instead of calling `set()` once per row, such as when
+[batching high-frequency stream updates](https://dataclient.io/vue/concepts/managers#batching).
+
+### setResponse(endpoint, ...args, response) {#setResponse}
+
+Stores `response` in cache for given [Endpoint](https://dataclient.io/rest/api/Endpoint) and args.
+
+Any components suspending for the given [Endpoint](https://dataclient.io/rest/api/Endpoint) and args will resolve.
+
+If data already exists for the given [Endpoint](https://dataclient.io/rest/api/Endpoint) and args, it will be updated.
+
+```tsx
+const ctrl = useController();
+
+useEffect(() => {
+  const websocket = new Websocket(url);
+
+  websocket.onmessage = event =>
+    ctrl.setResponse(
+      EndpointLookup[event.endpoint],
+      ...event.args,
+      event.data,
+    );
+
+  return () => websocket.close();
+});
+```
+
+This shows a proof of concept in React; however a [Manager websockets implementation](https://dataclient.io/vue/concepts/managers#data-stream)
+would be much more robust.
+
+### setError(endpoint, ...args, error) {#setError}
+
+Stores the result of [Endpoint](https://dataclient.io/rest/api/Endpoint) and args as the error provided.
+
+### resolve(endpoint, { args, response, fetchedAt, error }) {#resolve}
+
+Resolves a specific fetch, storing the `response` in cache.
+
+This is similar to setResponse, except it triggers resolution of an inflight fetch.
+This means the corresponding optimistic update will no longer be applies.
+
+This is used in [NetworkManager](https://dataclient.io/vue/api/NetworkManager), and should be used when
+processing fetch requests.
+
+### subscribe(endpoint, ...args) {#subscribe}
+
+Marks a new subscription to a given [Endpoint](https://dataclient.io/rest/api/Endpoint). This should increment the subscription.
+
+[useSubscription](./useSubscription.md) and [useLive](./useLive.md) call this on mount.
+
+This might be useful for custom hooks to sub/unsub based on other factors.
+
+```tsx
+const controller = useController();
+const key = endpoint.key(...args);
+
+useEffect(() => {
+  controller.subscribe(endpoint, ...args);
+  return () => controller.unsubscribe(endpoint, ...args);
+}, [controller, key]);
+```
+
+### unsubscribe(endpoint, ...args) {#unsubscribe}
+
+Marks completion of subscription to a given [Endpoint](https://dataclient.io/rest/api/Endpoint). This should
+decrement the subscription and if the count reaches 0, more updates won't be received automatically.
+
+[useSubscription](./useSubscription.md) and [useLive](./useLive.md) call this on unmount.
+
+## Data Access
+
+### get(schema, ...args, state) {#get}
+
+Looks up any [Queryable](https://dataclient.io/rest/api/schema#queryable) [Schema](https://dataclient.io/rest/api/schema#schema-overview) in `state`.
+
+#### Example
+
+This is used in [useQuery](./useQuery.md) and can be used in
+[Managers](https://dataclient.io/vue/api/Manager) to safely access the store.
+
+```tsx title="useQuery.ts"
+import {
+  useController,
+  useCacheState,
+  type Queryable,
+  type SchemaArgs,
+  type DenormalizeNullable,
+} from '@data-client/core';
+
+/** Oversimplified useQuery */
+function useQuery<S extends Queryable>(
+  schema: S,
+  ...args: SchemaArgs<S>
+): DenormalizeNullable<S> | undefined {
+  const state = useCacheState();
+  const controller = useController();
+
+  return controller.get(schema, ...args, state);
+}
+```
+
+### getResponse(endpoint, ...args, state) {#getResponse}
+
+```ts title="returns"
+{
+  data: DenormalizeNullable<E['schema']>;
+  expiryStatus: ExpiryStatus;
+  expiresAt: number;
+}
+```
+
+Gets the (globally referentially stable) response for a given endpoint/args pair from state given.
+
+#### data
+
+The denormalize response data. Guarantees global referential stability for all members.
+
+#### [expiryStatus](https://dataclient.io/vue/concepts/expiry-policy#expiry-status)
+
+```ts
+export enum ExpiryStatus {
+  Invalid = 1,
+  InvalidIfStale,
+  Valid,
+}
+```
+
+##### Valid
+
+- Will never suspend.
+- Might fetch if data is stale
+
+##### InvalidIfStale
+
+- Will suspend if data is stale.
+- Might fetch if data is stale
+
+##### Invalid
+
+- Will always suspend
+- Will always fetch
+
+#### expiresAt
+
+A number representing time when it expires. Compare to Date.now().
+
+#### Example
+
+This is used in [useCache](./useCache.md), [useSuspense](./useSuspense.md) and can be used in
+[Managers](https://dataclient.io/vue/api/Manager) to lookup a response with the state provided.
+
+```tsx title="useCache.ts"
+import {
+  useController,
+  StateContext,
+  EndpointInterface,
+} from '@data-client/core';
+
+/** Oversimplified useCache */
+function useCache<E extends EntityInterface>(
+  endpoint: E,
+  ...args: readonly [...Parameters<E>]
+) {
+  const state = useContext(StateContext);
+  const controller = useController();
+  return controller.getResponse(endpoint, ...args, state).data;
+}
+```
+
+```tsx title="MyManager.ts"
+import type { Manager, Middleware, actionTypes } from '@data-client/core';
+import type { EndpointInterface } from '@data-client/endpoint';
+
+export default class MyManager implements Manager {
+  middleware: Middleware = controller => {
+    return next => async action => {
+      if (action.type === actionTypes.FETCH) {
+        console.log('The existing response of the requested fetch');
+        console.log(
+          controller.getResponse(
+            action.endpoint,
+            ...(action.meta.args as Parameters<typeof action.endpoint>),
+            controller.getState(),
+          ).data,
+        );
+      }
+      next(action);
+    };
+  };
+
+  cleanup() {
+    this.websocket.close();
+  }
+}
+```
+
+### getError(endpoint, ...args, state) {#getError}
+
+Gets the error, if any, for a given endpoint. Returns undefined for no errors.
+
+### snapshot(state, fetchedAt) {#snapshot}
+
+Returns a [Snapshot](https://dataclient.io/vue/api/Snapshot).
+
+### getState() {#getState}
+
+Gets the internal state of Reactive Data Client that has _already been [committed](https://react.dev/learn/render-and-commit#step-3-react-commits-changes-to-the-dom)_.
+
+> **Warning**
+>
+> This should only be used in event handlers or [Managers](https://dataclient.io/vue/api/Manager).
+>
+> Using getState() in React's render lifecycle can result in data tearing.
+
+```tsx
+const controller = useController();
+
+const updateHandler = useCallback(
+  async updatePayload => {
+    const response = await controller.fetch(
+      MyResource.update,
+      { id },
+      updatePayload,
+    );
+    // the fetch has completed, but react has not yet re-rendered
+    // this lets use sequence after the next re-render
+    // we're working on a better solution to this specific case
+    setTimeout(() => {
+      const { data: denormalized } = controller.getResponse(
+        MyResource.update,
+        { id },
+        updatePayload,
+        controller.getState(),
+      );
+      redirect(denormalized.getterUrl);
+    }, 40);
+  },
+  [id],
+);
+```
diff --git a/.agents/skills/data-client-vue/references/_AsyncBoundary.md b/.agents/skills/data-client-vue/references/_AsyncBoundary.md
deleted file mode 120000
index 57d2b9fdece5..000000000000
--- a/.agents/skills/data-client-vue/references/_AsyncBoundary.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../../docs/core/shared/_AsyncBoundary.mdx
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/_AsyncBoundary.md b/.agents/skills/data-client-vue/references/_AsyncBoundary.md
new file mode 100644
index 000000000000..2238bdce177e
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/_AsyncBoundary.md
@@ -0,0 +1,30 @@
+<!-- Generated by `yarn build:skills` from docs/core/shared/_AsyncBoundary.mdx (vue). Edit the source doc, not this file. -->
+
+```html title="Dashboard.vue" {13-20}
+<script setup lang="ts">
+  import { onErrorCaptured, ref } from 'vue';
+
+  const error = ref<Error | null>(null);
+  onErrorCaptured(err => {
+    error.value = err;
+    return false;
+  });
+</script>
+
+<template>
+  <div>
+    <h1>Dashboard</h1>
+    <section>
+      <div v-if="error">Error: {{ error.message }}</div>
+      <Suspense v-else>
+        <template #default>
+          <RouterView />
+        </template>
+        <template #fallback>
+          <Loading />
+        </template>
+      </Suspense>
+    </section>
+  </div>
+</template>
+```
diff --git a/.agents/skills/data-client-vue/references/_VoteDemo.md b/.agents/skills/data-client-vue/references/_VoteDemo.md
deleted file mode 120000
index f3bd45e85171..000000000000
--- a/.agents/skills/data-client-vue/references/_VoteDemo.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../../docs/core/shared/_VoteDemo.mdx
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/_VoteDemo.md b/.agents/skills/data-client-vue/references/_VoteDemo.md
new file mode 100644
index 000000000000..cf888d755a76
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/_VoteDemo.md
@@ -0,0 +1,124 @@
+<!-- Generated by `yarn build:skills` from docs/core/shared/_VoteDemo.mdx (vue). Edit the source doc, not this file. -->
+
+```ts title="Post"
+import { Entity, schema } from '@data-client/rest';
+
+export class Post extends Entity {
+  id = 0;
+  author = { id: 0 };
+  title = '';
+  body = '';
+  votes = 0;
+
+  static key = 'Post';
+
+  static schema = {
+    author: EntityMixin(
+      class User {
+        id = 0;
+      },
+    ),
+  };
+
+  get img() {
+    return `//loremflickr.com/96/72/kitten,cat?lock=${this.id % 16}`;
+  }
+}
+```
+
+```ts title="PostResource" {15-22}
+import { resource } from '@data-client/rest';
+import { Post } from './Post';
+
+export { Post };
+
+export const PostResource = resource({
+  path: '/posts/:id',
+  searchParams: {} as { userId?: string | number } | undefined,
+  schema: Post,
+}).extend('vote', {
+  path: '/posts/:id/vote',
+  method: 'POST',
+  body: undefined,
+  schema: Post,
+  getOptimisticResponse(snapshot, { id }) {
+    const post = snapshot.get(Post, { id });
+    if (!post) throw snapshot.abort;
+    return {
+      id,
+      votes: post.votes + 1,
+    };
+  },
+});
+```
+
+```html title="PostItem.vue" {9}
+<script setup lang="ts">
+  import { useController } from '@data-client/vue';
+  import { PostResource, type Post } from './PostResource';
+
+  const props = defineProps<{ post: Post }>();
+  const ctrl = useController();
+
+  const handleVote = () => {
+    ctrl.fetch(PostResource.vote, { id: props.post.id });
+  };
+</script>
+
+<template>
+  <div>
+    <div class="voteBlock">
+      <small class="vote">
+        <button class="up" @click="handleVote">&nbsp;</button>
+        {{ post.votes }}
+      </small>
+      <img :src="post.img" width="70" height="52" />
+    </div>
+    <div>
+      <h4>{{ post.title }}</h4>
+      <p>{{ post.body }}</p>
+    </div>
+  </div>
+</template>
+```
+
+```html title="TotalVotes.vue" {13}
+<script setup lang="ts">
+  import { Query } from '@data-client/rest';
+  import { useQuery } from '@data-client/vue';
+  import { PostResource } from './PostResource';
+
+  const queryTotalVotes = new Query(
+    PostResource.getList.schema,
+    posts => posts.reduce((total, post) => total + post.votes, 0),
+  );
+
+  const props = defineProps<{ userId: number }>();
+  const totalVotes = useQuery(queryTotalVotes, () => ({ userId: props.userId }));
+</script>
+
+<template>
+  <center>
+    <small>{{ totalVotes }} votes total</small>
+  </center>
+</template>
+```
+
+```html title="PostList.vue"
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { PostResource } from './PostResource';
+  import PostItem from './PostItem.vue';
+  import TotalVotes from './TotalVotes.vue';
+
+  const userId = 2;
+  const posts = await useSuspense(PostResource.getList, { userId });
+</script>
+
+<template>
+  <div>
+    <PostItem v-for="post in posts" :key="post.pk()" :post="post" />
+    <TotalVotes :userId="userId" />
+  </div>
+</template>
+```
diff --git a/.agents/skills/data-client-vue/references/_pagination.md b/.agents/skills/data-client-vue/references/_pagination.md
deleted file mode 120000
index 44c3e22eb030..000000000000
--- a/.agents/skills/data-client-vue/references/_pagination.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../../docs/core/shared/_pagination.mdx
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/_pagination.md b/.agents/skills/data-client-vue/references/_pagination.md
new file mode 100644
index 000000000000..f258e6b2e6bc
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/_pagination.md
@@ -0,0 +1,108 @@
+<!-- Generated by `yarn build:skills` from docs/core/shared/_pagination.mdx (vue). Edit the source doc, not this file. -->
+
+```ts title="User"
+import { Entity } from '@data-client/rest';
+
+export class User extends Entity {
+  id = 0;
+  name = '';
+  username = '';
+  email = '';
+  phone = '';
+  website = '';
+
+  get profileImage() {
+    return `https://i.pravatar.cc/64?img=${this.id + 4}`;
+  }
+
+  pk() {
+    return this.id;
+  }
+  static key = 'User';
+}
+```
+
+```ts title="Post" {22,24}
+import { Entity, resource, Collection } from '@data-client/rest';
+import { User } from './User';
+
+export class Post extends Entity {
+  id = 0;
+  author = User.fromJS();
+  title = '';
+  body = '';
+
+  pk() {
+    return this.id;
+  }
+  static key = 'Post';
+
+  static schema = {
+    author: User,
+  };
+}
+export const PostResource = resource({
+  path: '/posts/:id',
+  schema: Post,
+  paginationField: 'cursor',
+}).extend('getList', {
+  schema: { posts: new Collection([Post]), cursor: '' },
+});
+```
+
+```html title="PostItem.vue"
+<script setup lang="ts">
+  import { type Post } from './Post';
+
+  defineProps<{ post: Post }>();
+</script>
+
+<template>
+  <div class="listItem spaced">
+    <Avatar :src="post.author.profileImage" />
+    <div>
+      <h4>{{ post.title }}</h4>
+      <small>by {{ post.author.name }}</small>
+    </div>
+  </div>
+</template>
+```
+
+```html title="LoadMore.vue"
+<script setup lang="ts">
+  import { useController, useLoading } from '@data-client/vue';
+  import { PostResource } from './Post';
+
+  const props = defineProps<{ cursor: string }>();
+  const ctrl = useController();
+  const [loadPage, isPending] = useLoading(() =>
+    ctrl.fetch(PostResource.getList.getPage, { cursor: props.cursor }),
+  );
+</script>
+
+<template>
+  <center>
+    <button @click="loadPage" :disabled="isPending">
+      {{ isPending ? '...' : 'Load more' }}
+    </button>
+  </center>
+</template>
+```
+
+```html title="PostList.vue"
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import PostItem from './PostItem.vue';
+  import LoadMore from './LoadMore.vue';
+  import { PostResource } from './Post';
+
+  const data = await useSuspense(PostResource.getList);
+</script>
+
+<template>
+  <div>
+    <PostItem v-for="post in data.posts" :key="post.pk()" :post="post" />
+    <LoadMore v-if="data.cursor" :cursor="data.cursor" />
+  </div>
+</template>
+```
diff --git a/.agents/skills/data-client-vue/references/_useLive.md b/.agents/skills/data-client-vue/references/_useLive.md
deleted file mode 120000
index eb946942cad6..000000000000
--- a/.agents/skills/data-client-vue/references/_useLive.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../../docs/core/shared/_useLive.mdx
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/_useLive.md b/.agents/skills/data-client-vue/references/_useLive.md
new file mode 100644
index 000000000000..74e89472eafc
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/_useLive.md
@@ -0,0 +1,57 @@
+<!-- Generated by `yarn build:skills` from docs/core/shared/_useLive.mdx (vue). Edit the source doc, not this file. -->
+
+```typescript title="Ticker" {32}
+import { Entity, RestEndpoint } from '@data-client/rest';
+
+export class Ticker extends Entity {
+  product_id = '';
+  trade_id = 0;
+  price = 0;
+  size = '0';
+  time = Temporal.Instant.fromEpochMilliseconds(0);
+  bid = '0';
+  ask = '0';
+  volume = '';
+
+  pk(): string {
+    return this.product_id;
+  }
+  static key = 'Ticker';
+
+  static schema = {
+    price: Number,
+    time: Temporal.Instant.from,
+  };
+}
+
+export const getTicker = new RestEndpoint({
+  urlPrefix: 'https://api.exchange.coinbase.com',
+  path: '/products/:productId/ticker',
+  schema: Ticker,
+  process(value, { productId }) {
+    value.product_id = productId;
+    return value;
+  },
+  pollFrequency: 2000,
+});
+```
+
+```html title="AssetPrice.vue" {6}
+<script setup lang="ts">
+  import { useLive } from '@data-client/vue';
+  import { getTicker } from './Ticker';
+
+  const props = defineProps<{ productId: string }>();
+  const ticker = await useLive(getTicker, () => ({ productId: props.productId }));
+</script>
+
+<template>
+  <center>
+    {{ productId }}
+    <NumberFlow
+      :value="ticker.price"
+      :format="{ style: 'currency', currency: 'USD' }"
+    />
+  </center>
+</template>
+```
diff --git a/.agents/skills/data-client-vue/references/_useLoading.md b/.agents/skills/data-client-vue/references/_useLoading.md
deleted file mode 120000
index 9ed6b996c6bc..000000000000
--- a/.agents/skills/data-client-vue/references/_useLoading.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../../docs/core/shared/_useLoading.mdx
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/_useLoading.md b/.agents/skills/data-client-vue/references/_useLoading.md
new file mode 100644
index 000000000000..aea12d095d10
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/_useLoading.md
@@ -0,0 +1,123 @@
+<!-- Generated by `yarn build:skills` from docs/core/shared/_useLoading.mdx (vue). Edit the source doc, not this file. -->
+
+```ts title="PostResource"
+import { Entity, resource } from '@data-client/rest';
+
+export class Post extends Entity {
+  id = 0;
+  author = 0;
+  title = '';
+  body = '';
+  votes = 0;
+
+  static key = 'Post';
+
+  get img() {
+    return `//loremflickr.com/96/72/kitten,cat?lock=${this.id % 16}`;
+  }
+}
+export const PostResource = resource({
+  path: '/posts/:id',
+  schema: Post,
+});
+```
+
+```html title="PostDetail.vue"
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { PostResource } from './PostResource';
+
+  const props = defineProps<{ id: number }>();
+  const post = await useSuspense(PostResource.get, () => ({ id: props.id }));
+</script>
+
+<template>
+  <div>
+    <div class="voteBlock">
+      <img :src="post.img" width="70" height="52" />
+    </div>
+    <div>
+      <h4>{{ post.title }}</h4>
+      <p>{{ post.body }}</p>
+    </div>
+  </div>
+</template>
+```
+
+```html title="PostForm.vue"
+<script setup lang="ts">
+  defineProps<{ loading: boolean; error: Error | undefined }>();
+  const emit = defineEmits<{ submit: [data: FormData] }>();
+
+  const handleSubmit = (e: Event) => {
+    e.preventDefault();
+    const data = new FormData(e.target as HTMLFormElement);
+    emit('submit', data);
+  };
+</script>
+
+<template>
+  <form @submit="handleSubmit">
+    <TextInput
+      label="Title"
+      name="title"
+      defaultValue="My New Post"
+      required
+    />
+    <TextArea name="body" :rows="12" label="Body" required>
+      After clicking 'save', the button will be disabled until the POST
+      is completed. Upon completion the newly created post is displayed
+      immediately as Reactive Data Client is able to use the fetch
+      response to populate the store.
+    </TextArea>
+    <div v-if="error" class="alert alert--danger">{{ error.message }}</div>
+    <div>
+      <button type="submit" :disabled="loading">
+        {{ loading ? 'saving...' : 'Save' }}
+      </button>
+    </div>
+  </form>
+</template>
+```
+
+```html title="PostCreate.vue" {9-14}
+<script setup lang="ts">
+  import { useLoading, useController } from '@data-client/vue';
+  import { PostResource } from './PostResource';
+  import PostForm from './PostForm.vue';
+
+  const emit = defineEmits<{ navigateToPost: [id: number] }>();
+  const ctrl = useController();
+
+  const [handleSubmit, loading, error] = useLoading(
+    async (data: FormData) => {
+      const post = await ctrl.fetch(PostResource.getList.push, data);
+      emit('navigateToPost', post.id);
+    },
+  );
+</script>
+
+<template>
+  <PostForm @submit="handleSubmit" :loading="loading" :error="error" />
+</template>
+```
+
+```html title="Navigation.vue"
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import PostCreate from './PostCreate.vue';
+  import PostDetail from './PostDetail.vue';
+
+  const id = ref<undefined | number>(undefined);
+</script>
+
+<template>
+  <div v-if="id">
+    <PostDetail :id="id" />
+    <center>
+      <button @click="id = undefined">New Post</button>
+    </center>
+  </div>
+  <PostCreate v-else @navigateToPost="id = $event" />
+</template>
+```
diff --git a/.agents/skills/data-client-vue/references/data-dependency.md b/.agents/skills/data-client-vue/references/data-dependency.md
deleted file mode 120000
index 1613833f6d57..000000000000
--- a/.agents/skills/data-client-vue/references/data-dependency.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../../docs/core/getting-started/data-dependency.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/data-dependency.md b/.agents/skills/data-client-vue/references/data-dependency.md
new file mode 100644
index 000000000000..bf42ed3c9ea1
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/data-dependency.md
@@ -0,0 +1,364 @@
+<!-- Generated by `yarn build:skills` from docs/core/getting-started/data-dependency.md (vue). Edit the source doc, not this file. -->
+
+# Rendering Asynchronous Data
+
+Make your components reusable by binding the data where you **use** it with the one-line [useSuspense()](./useSuspense.md),
+which guarantees data with [await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await).
+
+```ts title="Resources"
+import { Entity, resource } from '@data-client/rest';
+
+export class User extends Entity {
+  id = 0;
+  name = '';
+  username = '';
+  email = '';
+  phone = '';
+  website = '';
+
+  get profileImage() {
+    return `https://i.pravatar.cc/64?img=${this.id + 4}`;
+  }
+
+  static key = 'User';
+}
+export const UserResource = resource({
+  urlPrefix: 'https://jsonplaceholder.typicode.com',
+  path: '/users/:id',
+  schema: User,
+});
+
+export class Post extends Entity {
+  id = 0;
+  author = User.fromJS();
+  title = '';
+  body = '';
+
+  static key = 'Post';
+
+  static schema = {
+    author: User,
+  };
+}
+export const PostResource = resource({
+  path: '/posts/:id',
+  schema: Post,
+  paginationField: 'page',
+});
+```
+
+```html title="PostDetail.vue" {7}
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { PostResource } from './Resources';
+
+  const props = defineProps<{ id: string }>();
+  const emit = defineEmits<{ setRoute: [route: string] }>();
+  const post = await useSuspense(PostResource.get, () => ({ id: props.id }));
+</script>
+
+<template>
+  <div>
+    <header>
+      <div class="listItem spaced">
+        <div class="author">
+          <Avatar :src="post.author.profileImage" />
+          <small>{{ post.author.name }}</small>
+        </div>
+        <h4>{{ post.title }}</h4>
+      </div>
+    </header>
+    <p>{{ post.body }}</p>
+    <a href="#" @click.prevent="emit('setRoute', 'list')">« Back</a>
+  </div>
+</template>
+```
+
+```html title="PostItem.vue"
+<script setup lang="ts">
+  import { type Post } from './Resources';
+
+  defineProps<{ post: Post }>();
+  const emit = defineEmits<{ setRoute: [route: string] }>();
+</script>
+
+<template>
+  <div class="listItem spaced">
+    <Avatar :src="post.author.profileImage" />
+    <div>
+      <h4>
+        <a href="#" @click.prevent="emit('setRoute', `detail/${post.id}`)">
+          {{ post.title }}
+        </a>
+      </h4>
+      <small>by {{ post.author.name }}</small>
+    </div>
+  </div>
+</template>
+```
+
+```html title="PostList.vue" {7}
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import PostItem from './PostItem.vue';
+  import { PostResource } from './Resources';
+
+  const emit = defineEmits<{ setRoute: [route: string] }>();
+  const posts = await useSuspense(PostResource.getList);
+</script>
+
+<template>
+  <div>
+    <PostItem
+      v-for="post in posts"
+      :key="post.pk()"
+      :post="post"
+      @setRoute="emit('setRoute', $event)"
+    />
+  </div>
+</template>
+```
+
+```html title="LoadMore.vue"
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { useController, useLoading, useQuery } from '@data-client/vue';
+  import { PostResource } from './Resources';
+
+  const ctrl = useController();
+  const posts = useQuery(PostResource.getList.schema);
+  const [nextPage, isPending] = useLoading(() =>
+    ctrl.fetch(PostResource.getList.getPage, { page: 2 }),
+  );
+  const canLoadMore = computed(
+    () => !!posts.value && posts.value.length % 3 === 0,
+  );
+</script>
+
+<template>
+  <center v-if="canLoadMore">
+    <button @click="nextPage">
+      {{ isPending ? '...' : 'Load more' }}
+    </button>
+  </center>
+</template>
+```
+
+```html title="Navigation.vue"
+<script setup lang="ts">
+  import { ref, computed } from 'vue';
+  import PostList from './PostList.vue';
+  import PostDetail from './PostDetail.vue';
+  import LoadMore from './LoadMore.vue';
+
+  const route = ref('list');
+  const detailId = computed(() =>
+    route.value.startsWith('detail')
+      ? route.value.split('/')[1]
+      : undefined,
+  );
+</script>
+
+<template>
+  <PostDetail v-if="detailId" :id="detailId" @setRoute="route = $event" />
+  <template v-else>
+    <PostList @setRoute="route = $event" />
+    <LoadMore />
+  </template>
+</template>
+```
+
+[](https://react.dev/learn/passing-data-deeply-with-context)
+
+Do not [prop drill](https://react.dev/learn/passing-data-deeply-with-context#the-problem-with-passing-props). Instead, [useSuspense()](./useSuspense.md) in the components that render the data from it. This is
+known as _data co-location_.
+
+Do not hide data binding hooks inside custom hooks. Instead, put tightly coupled data transformations
+in [Query](https://dataclient.io/rest/api/Query) — data logic belongs with the data model, where it stays visible, reusable,
+and free to change independently of the view.
+
+Instead of writing complex update functions or invalidations cascades, Reactive Data Client automatically updates
+bound components immediately upon [data change](./mutations.md). This is known as _reactive programming_.
+
+## Loading and Error {#async-fallbacks}
+
+You might have noticed the return type shows the value is always there. [useSuspense()](./useSuspense.md) operates very much
+with [await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await). This enables
+us to make error/loading disjoint from data usage.
+
+### Async Boundaries {#boundaries}
+
+Instead we place Vue's built-in [\<Suspense />](https://vuejs.org/guide/built-ins/suspense.html) along with [onErrorCaptured()](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured) to handling loading and error conditions at or above navigational boundaries like **pages,
+routes, or [modals](https://www.appcues.com/blog/modal-dialog-windows)**.
+
+```html title="Dashboard.vue" {13-20}
+<script setup lang="ts">
+  import { onErrorCaptured, ref } from 'vue';
+
+  const error = ref<Error | null>(null);
+  onErrorCaptured(err => {
+    error.value = err;
+    return false;
+  });
+</script>
+
+<template>
+  <div>
+    <h1>Dashboard</h1>
+    <section>
+      <div v-if="error">Error: {{ error.message }}</div>
+      <Suspense v-else>
+        <template #default>
+          <RouterView />
+        </template>
+        <template #fallback>
+          <Loading />
+        </template>
+      </Suspense>
+    </section>
+  </div>
+</template>
+```
+
+Centralizing fallbacks this way eliminates redundant loading indicators while keeping components reusable.
+The loading fallback is customized with the `#fallback` slot of [\<Suspense />](https://vuejs.org/guide/built-ins/suspense.html#loading-state),
+and the error fallback by rendering what you choose from [onErrorCaptured()](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured).
+
+### Stateful
+
+You may find cases where it's still useful to use a stateful approach to fallbacks.
+For these cases, or compatibility with some component libraries, [useDLE()](./useDLE.md) - \[D]ata \[L]oading \[E]rror - is provided.
+
+```typescript title="ProfileResource"
+import { Entity, resource } from '@data-client/rest';
+
+export class Profile extends Entity {
+  id: number | undefined = undefined;
+  avatar = '';
+  fullName = '';
+  bio = '';
+
+  static key = 'Profile';
+}
+
+export const ProfileResource = resource({
+  path: '/profiles/:id',
+  schema: Profile,
+});
+```
+
+```html title="ProfileList.vue" {5}
+<script setup lang="ts">
+  import { useDLE } from '@data-client/vue';
+  import { ProfileResource } from './ProfileResource';
+
+  const { data, loading, error } = useDLE(ProfileResource.getList);
+</script>
+
+<template>
+  <div v-if="error">Error {{ error.status }}</div>
+  <Loading v-else-if="loading || !data" />
+  <div v-else>
+    <div class="listItem" v-for="profile in data" :key="profile.pk()">
+      <Avatar :src="profile.avatar" />
+      <div>
+        <h4>{{ profile.fullName }}</h4>
+        <p>{{ profile.bio }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+Since [useDLE](./useDLE.md) does not [useSuspense](./useSuspense.md), you won't be able to easily centrally
+orchestrate loading and error code.
+
+## Conditional
+
+> **Tip: Conditional Dependencies**
+>
+> Use `null` as the second argument to any Data Client hook means "do nothing."
+>
+> ```typescript
+> // todo could be undefined if id is undefined
+> const todo = await useSuspense(
+>   TodoResource.get,
+>   computed(() => (id.value ? { id: id.value } : null)),
+> );
+> ```
+
+## Subscriptions
+
+When data is likely to change due to external factor; [useSubscription()](./useSubscription.md)
+ensures continual updates while a component is mounted. [useLive()](./useLive.md) calls both
+[useSubscription()](./useSubscription.md) and [useSuspense()](./useSuspense.md), making it quite
+easy to use fresh data.
+
+```typescript title="Ticker" {32}
+import { Entity, RestEndpoint } from '@data-client/rest';
+
+export class Ticker extends Entity {
+  product_id = '';
+  trade_id = 0;
+  price = 0;
+  size = '0';
+  time = Temporal.Instant.fromEpochMilliseconds(0);
+  bid = '0';
+  ask = '0';
+  volume = '';
+
+  pk(): string {
+    return this.product_id;
+  }
+  static key = 'Ticker';
+
+  static schema = {
+    price: Number,
+    time: Temporal.Instant.from,
+  };
+}
+
+export const getTicker = new RestEndpoint({
+  urlPrefix: 'https://api.exchange.coinbase.com',
+  path: '/products/:productId/ticker',
+  schema: Ticker,
+  process(value, { productId }) {
+    value.product_id = productId;
+    return value;
+  },
+  pollFrequency: 2000,
+});
+```
+
+```html title="AssetPrice.vue" {6}
+<script setup lang="ts">
+  import { useLive } from '@data-client/vue';
+  import { getTicker } from './Ticker';
+
+  const props = defineProps<{ productId: string }>();
+  const ticker = await useLive(getTicker, () => ({ productId: props.productId }));
+</script>
+
+<template>
+  <center>
+    {{ productId }}
+    <NumberFlow
+      :value="ticker.price"
+      :format="{ style: 'currency', currency: 'USD' }"
+    />
+  </center>
+</template>
+```
+
+Subscriptions are orchestrated by [Managers](https://dataclient.io/vue/api/Manager). Out of the box,
+polling based subscriptions can be used by adding [pollFrequency](https://dataclient.io/rest/api/Endpoint#pollfrequency) to an Endpoint or Resource.
+For pushed based networking protocols like SSE and websockets, see the [example stream manager](https://dataclient.io/vue/concepts/managers#data-stream).
+
+```typescript
+export const getTicker = new RestEndpoint({
+  urlPrefix: 'https://api.exchange.coinbase.com',
+  path: '/products/:productId/ticker',
+  schema: Ticker,
+  pollFrequency: 2000,
+});
+```
diff --git a/.agents/skills/data-client-vue/references/devtools-debugging.md b/.agents/skills/data-client-vue/references/devtools-debugging.md
deleted file mode 120000
index d75fb0dae66f..000000000000
--- a/.agents/skills/data-client-vue/references/devtools-debugging.md
+++ /dev/null
@@ -1 +0,0 @@
-../../data-client-react/references/devtools-debugging.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/devtools-debugging.md b/.agents/skills/data-client-vue/references/devtools-debugging.md
new file mode 100644
index 000000000000..a6551fccbb53
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/devtools-debugging.md
@@ -0,0 +1,366 @@
+# Debugging Data Client with Chrome DevTools MCP
+
+Debug `@data-client/react` or `@data-client/vue` state and actions programmatically via Chrome DevTools MCP `evaluate_script`. The app's `DevToolsManager` exposes the Controller on `globalThis.__DC_CONTROLLERS__` (a `Map` keyed by `devtoolsName`) in dev mode.
+
+## Prerequisites
+
+1. Dev server running with `NODE_ENV !== 'production'`
+2. Chrome DevTools MCP connected and page loaded
+3. `DevToolsManager` included in `DataProvider` (React) or `DataClientPlugin` (Vue) managers (default in dev mode)
+
+## Step 1: Access the Controller
+
+`DevToolsManager` registers controllers in `globalThis.__DC_CONTROLLERS__` keyed by
+`devtoolsName` — defaults to `"Data Client: <page title>"`.
+
+### Discover available controllers
+
+```js
+// evaluate_script
+() => {
+  const m = globalThis.__DC_CONTROLLERS__;
+  if (!m || m.size === 0) return 'no controllers registered';
+  return [...m.keys()];
+}
+```
+
+### Get a controller by key
+
+Use the key from discovery. Always use `.get(devtoolsName)` with the actual key — not `.values().next().value` — so you target the correct store when multiple `DataProvider`s or Vue apps exist.
+
+```js
+// evaluate_script
+() => {
+  const ctrl = globalThis.__DC_CONTROLLERS__?.get('Data Client: My App');
+  if (!ctrl) return 'not found';
+  return { ok: true, stateKeys: Object.keys(ctrl.getState()) };
+}
+```
+
+## Step 2: Install the Debug Shim
+
+Run this **once** after the page loads. It wraps dispatch to capture all actions in a circular buffer.
+
+```js
+// evaluate_script
+(() => {
+  const ctrl = globalThis.__DC_CONTROLLERS__?.values().next().value;
+  if (!ctrl) return { error: 'No controller found' };
+
+  globalThis.__DC_ACTION_LOG__ = [];
+  const MAX_LOG = 200;
+
+  const origDispatch = ctrl._dispatch.bind(ctrl);
+  ctrl._dispatch = (action) => {
+    const entry = {
+      type: action.type,
+      key: action.key,
+      ts: Date.now(),
+    };
+
+    if (action.endpoint) entry.endpoint = action.endpoint.name || action.endpoint.key;
+    if (action.args) entry.args = JSON.parse(JSON.stringify(action.args));
+    if (action.meta?.date) entry.date = action.meta.date;
+    if (action.error) entry.error = true;
+
+    globalThis.__DC_ACTION_LOG__.push(entry);
+    if (globalThis.__DC_ACTION_LOG__.length > MAX_LOG) {
+      globalThis.__DC_ACTION_LOG__ = globalThis.__DC_ACTION_LOG__.slice(-MAX_LOG / 2);
+    }
+
+    return origDispatch(action);
+  };
+
+  return { ok: true, stateKeys: Object.keys(ctrl.getState()) };
+})()
+```
+
+## Step 3: Read State
+
+### High-level queries (denormalized, schema-aware)
+
+Controller provides `getResponse`, `getError`, and `get` that denormalize through schemas — pass `ctrl.getState()` as the last argument.
+
+```js
+// evaluate_script — get denormalized response for an endpoint
+async () => {
+  const mod = await import('/src/resources/Todo.ts');
+  const ctrl = globalThis.__DC_CONTROLLERS__?.values().next().value;
+  const state = ctrl.getState();
+  const { data, expiryStatus, expiresAt } = ctrl.getResponse(
+    mod.TodoResource.getList,
+    {},
+    state,
+  );
+  return { data, expiryStatus, expiresAt };
+}
+```
+
+```js
+// evaluate_script — check if an endpoint has an error
+async () => {
+  const mod = await import('/src/resources/Todo.ts');
+  const ctrl = globalThis.__DC_CONTROLLERS__?.values().next().value;
+  const state = ctrl.getState();
+  const error = ctrl.getError(
+    mod.TodoResource.get,
+    { id: '5' },
+    state,
+  );
+  return { error: error?.message ?? null };
+}
+```
+
+```js
+// evaluate_script — query a Queryable schema (Entity, Collection, Query)
+async () => {
+  const mod = await import('/src/resources/Todo.ts');
+  const ctrl = globalThis.__DC_CONTROLLERS__?.values().next().value;
+  const state = ctrl.getState();
+  const result = ctrl.get(mod.Todo, { id: '5' }, state);
+  return result;
+}
+```
+
+### Raw normalized state inspection
+
+Use these when you need to see the raw cache structure without denormalization.
+
+```js
+// evaluate_script — state overview
+() => {
+  const ctrl = globalThis.__DC_CONTROLLERS__?.values().next().value;
+  const state = ctrl.getState();
+  return {
+    entityTypes: Object.keys(state.entities),
+    endpointCount: Object.keys(state.endpoints).length,
+    metaCount: Object.keys(state.meta).length,
+    optimisticCount: state.optimistic.length,
+    lastReset: state.lastReset,
+  };
+}
+```
+
+```js
+// evaluate_script — inspect specific entity type by key
+() => {
+  const ctrl = globalThis.__DC_CONTROLLERS__?.values().next().value;
+  const entities = ctrl.getState().entities['Todo'];
+  if (!entities) return { error: 'Entity not found' };
+  const pks = Object.keys(entities);
+  return {
+    count: pks.length,
+    samplePKs: pks.slice(0, 10),
+    sample: pks.length > 0 ? entities[pks[0]] : null,
+  };
+}
+```
+
+```js
+// evaluate_script — find endpoint cache entries by path substring
+() => {
+  const ctrl = globalThis.__DC_CONTROLLERS__?.values().next().value;
+  const state = ctrl.getState();
+  const keys = Object.keys(state.endpoints).filter(k => k.includes('/todos'));
+  return keys.map(k => ({
+    key: k,
+    value: state.endpoints[k],
+    meta: state.meta[k],
+  }));
+}
+```
+
+### Inspect a specific entity by pk
+
+```js
+// evaluate_script
+() => {
+  const ctrl = globalThis.__DC_CONTROLLERS__?.values().next().value;
+  return ctrl.getState().entities?.['Todo']?.['5'];
+}
+```
+
+### Check endpoint metadata (expiry, errors, invalidation)
+
+```js
+// evaluate_script
+() => {
+  const ctrl = globalThis.__DC_CONTROLLERS__?.values().next().value;
+  const state = ctrl.getState();
+  const key = Object.keys(state.meta).find(k => k.includes('/todos'));
+  return key ? { key, ...state.meta[key] } : 'no meta found';
+}
+```
+
+## Step 4: Track Actions
+
+After installing the debug shim (Step 2):
+
+### Read recent actions
+
+```js
+// evaluate_script
+() => globalThis.__DC_ACTION_LOG__?.slice(-20) ?? []
+```
+
+### Filter by action type
+
+```js
+// evaluate_script — track only fetches
+() => (globalThis.__DC_ACTION_LOG__ ?? [])
+  .filter(a => a.type === 'rdc/fetch' || a.type === 'rdc/setresponse')
+  .slice(-20)
+```
+
+### Filter errors
+
+```js
+// evaluate_script
+() => (globalThis.__DC_ACTION_LOG__ ?? []).filter(a => a.error)
+```
+
+### Clear action log
+
+```js
+// evaluate_script
+() => { globalThis.__DC_ACTION_LOG__ = []; return { cleared: true }; }
+```
+
+## Step 5: Mutate State via Controller
+
+Use Controller methods — **never** dispatch raw actions.
+
+### Invalidate an endpoint (force refetch)
+
+```js
+// evaluate_script — triggers refetch for subscribed components
+async () => {
+  const mod = await import('/src/resources/Todo.ts');
+  const ctrl = globalThis.__DC_CONTROLLERS__?.values().next().value;
+  await ctrl.invalidate(mod.TodoResource.get, { id: '5' });
+  return { invalidated: true };
+}
+```
+
+### Invalidate endpoints matching a pattern
+
+```js
+// evaluate_script
+() => {
+  const ctrl = globalThis.__DC_CONTROLLERS__?.values().next().value;
+  ctrl.invalidateAll({ testKey: key => key.includes('/todos') });
+  return 'todo endpoints invalidated';
+}
+```
+
+### Expire endpoints (mark stale, refetch on next use)
+
+```js
+// evaluate_script
+() => {
+  const ctrl = globalThis.__DC_CONTROLLERS__?.values().next().value;
+  ctrl.expireAll({ testKey: key => key.includes('/todos') });
+  return 'todo endpoints expired';
+}
+```
+
+### Set a value directly
+
+```js
+// evaluate_script — use setResponse to inject mock data
+async () => {
+  const mod = await import('/src/resources/Todo.ts');
+  const ctrl = globalThis.__DC_CONTROLLERS__?.values().next().value;
+  await ctrl.setResponse(
+    mod.TodoResource.getList,
+    {},
+    [{ id: 1, title: 'Mock Todo', completed: false }],
+  );
+  return { set: true };
+}
+```
+
+### Reset entire store
+
+```js
+// evaluate_script
+() => {
+  const ctrl = globalThis.__DC_CONTROLLERS__?.values().next().value;
+  ctrl.resetEntireStore();
+  return { reset: true };
+}
+```
+
+## Correlating with Network Requests
+
+Use `list_network_requests` with `resourceTypes: ["fetch", "xhr"]` to see API calls,
+then cross-reference with endpoint keys in state.
+
+## Action Types Reference
+
+| Type | Controller Method | Description |
+|---|---|---|
+| `rdc/fetch` | `fetch()` | Network request initiated |
+| `rdc/setresponse` | `setResponse()` | Response written to cache |
+| `rdc/set` | `set()` | Direct entity value set |
+| `rdc/optimistic` | (automatic) | Optimistic update applied |
+| `rdc/invalidate` | `invalidate()` | Single endpoint invalidated |
+| `rdc/invalidateall` | `invalidateAll()` | Bulk invalidation by key test |
+| `rdc/expireall` | `expireAll()` | Bulk mark-stale by key test |
+| `rdc/reset` | `resetEntireStore()` | Full store reset |
+| `rdc/subscribe` | `subscribe()` | Subscription registered |
+| `rdc/unsubscribe` | `unsubscribe()` | Subscription removed |
+| `rdc/gc` | (automatic) | Garbage collection |
+
+## Controller State Readers
+
+All take `state` (from `ctrl.getState()`) as the **last** argument.
+
+| Method | Signature | Returns |
+|---|---|---|
+| `getResponse` | `(endpoint, ...args, state)` | `{ data, expiryStatus, expiresAt }` — denormalized through schema |
+| `getError` | `(endpoint, ...args, state)` | `ErrorTypes \| undefined` |
+| `get` | `(schema, ...args, state)` | `Denormalized \| undefined` for any Queryable schema |
+| `getQueryMeta` | `(schema, ...args, state)` | `{ data, countRef }` |
+
+`expiryStatus` values: `1` = Invalid, `2` = InvalidIfStale, `3` = Valid.
+
+## State Shape Reference
+
+```ts
+State = {
+  entities: { [entityKey: string]: { [pk: string]: EntityInstance } },
+  endpoints: { [cacheKey: string]: PK | PK[] | unknown },
+  indexes: { [entityKey: string]: { [indexName: string]: { [lookupValue: string]: PK } } },
+  meta: {
+    [key: string]: {
+      date, fetchedAt, expiresAt,
+      prevExpiresAt?, error?, invalidated?, errorPolicy?: 'hard' | 'soft'
+    }
+  },
+  entitiesMeta: { [entityKey: string]: { [pk: string]: { date, expiresAt, fetchedAt } } },
+  optimistic: (SetResponseAction | OptimisticAction)[],
+  lastReset: number,
+}
+```
+
+## Polling Pattern
+
+For monitoring ongoing activity, poll with short intervals:
+
+1. Install shim (Step 2)
+2. Trigger the user action or navigation
+3. Wait 2–3 seconds
+4. Read actions (Step 4) — check for `rdc/fetch` then `rdc/setresponse` pairs
+5. If needed, read entity state (Step 3) to verify cache contents
+6. Repeat if watching for subscription updates
+
+## Debugging Checklist
+
+1. **Verify controller exists**: Check `__DC_CONTROLLERS__` map size
+2. **Inspect state shape**: Get entity types and endpoint count
+3. **Check specific data**: Look up entities by type and pk
+4. **Review endpoint metadata**: Check expiry, errors, invalidation status
+5. **Track actions**: Read the action log for recent dispatches
+6. **Correlate network**: Compare `list_network_requests` with endpoint keys
+7. **Force refresh**: Use `invalidateAll` or `expireAll` to trigger refetches
diff --git a/.agents/skills/data-client-vue/references/getDefaultManagers.md b/.agents/skills/data-client-vue/references/getDefaultManagers.md
deleted file mode 120000
index 8cb0cf50caab..000000000000
--- a/.agents/skills/data-client-vue/references/getDefaultManagers.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../../docs/core/api/getDefaultManagers.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/getDefaultManagers.md b/.agents/skills/data-client-vue/references/getDefaultManagers.md
new file mode 100644
index 000000000000..79cc0d6e9040
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/getDefaultManagers.md
@@ -0,0 +1,112 @@
+<!-- Generated by `yarn build:skills` from docs/core/api/getDefaultManagers.md (vue). Edit the source doc, not this file. -->
+
+# getDefaultManagers()
+
+`getDefaultManagers` returns an Array of [Managers](https://dataclient.io/vue/api/Manager) to be sent to [DataClientPlugin](./installation.md#add-provider-at-top-level-component).
+
+This makes it simple to configure and add custom [Managers](https://dataclient.io/vue/api/Manager), while remaining robust against
+any potential changes to the default managers.
+
+Currently returns \[[DevToolsManager](https://dataclient.io/vue/api/DevToolsManager)\*, [NetworkManager](https://dataclient.io/vue/api/NetworkManager), [SubscriptionManager](https://dataclient.io/vue/api/SubscriptionManager)].
+
+\*(`DevToolsManager` is excluded in production builds.)
+
+## Usage
+
+```ts title="main.ts"
+import { createApp } from 'vue';
+import { DataClientPlugin, getDefaultManagers } from '@data-client/vue';
+import App from './App.vue';
+
+const managers = getDefaultManagers({
+  // set fallback expiry time to an hour
+  networkManager: { dataExpiryLength: 1000 * 60 * 60 },
+});
+
+const app = createApp(App);
+app.use(DataClientPlugin, { managers });
+app.mount('#app');
+```
+
+When `managers` is omitted, `DataClientPlugin` uses `getDefaultManagers()` with no arguments.
+See [installation](./installation.md#add-provider-at-top-level-component) for the
+other `DataClientPlugin` options.
+
+## Arguments
+
+Each argument represents a configuration of the manager. It can be of three possible types:
+
+- Any plain object is used as options to be sent to the manager's constructor.
+- An instance of the manager to be used directly.
+- `null`. When sent will exclude the manager.
+
+```ts
+getDefaultManagers({
+  devToolsManager: { trace: true },
+  networkManager: new NetworkManager({ errorExpiryLength: 1 }),
+  subscriptionManager: null,
+});
+```
+
+### networkManager
+
+> **Note**
+>
+> `null` is not allowed here since NetworkManager is required
+
+`dataExpiryLength` is used as a fallback when an Endpoint does not have [dataExpiryLength](https://dataclient.io/docs/concepts/expiry-policy#endpointdataexpirylength) defined.
+
+`errorExpiryLength` is used as a fallback when an Endpoint does not have [errorExpiryLength](https://dataclient.io/docs/concepts/expiry-policy#endpointerrorexpirylength) defined.
+
+### devToolsManager
+
+[Arguments](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md)
+to send to redux devtools.
+
+### subscriptionManager
+
+A class that implements `SubscriptionConstructable` like [PollingSubscription](https://dataclient.io/vue/api/PollingSubscription)
+
+## Examples
+
+### Tracing actions
+
+For example, we can enable the [trace](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md#trace) option to help track down where actions are dispatched from. This has a large performance impact, so it is normally disabled.
+
+```ts
+const managers = getDefaultManagers({
+  devToolsManager: { trace: true },
+});
+```
+
+### Manager inheritance
+
+Sending manager instances allows us to customize managers using inheritance.
+
+```ts
+import { NetworkManager, type FetchAction } from '@data-client/vue';
+
+class LoggingNetworkManager extends NetworkManager {
+  protected handleFetch(action: FetchAction) {
+    console.log('fetching', action.key);
+    return super.handleFetch(action);
+  }
+}
+
+const managers = getDefaultManagers({
+  networkManager: new LoggingNetworkManager(),
+});
+```
+
+### Disabling
+
+Using `null` will remove managers completely. [NetworkManager](https://dataclient.io/vue/api/NetworkManager) cannot be removed this way.
+
+```ts
+const managers = getDefaultManagers({
+  devToolsManager: null,
+  subscriptionManager: null,
+});
+```
+
+Here we disable every manager except [NetworkManager](https://dataclient.io/vue/api/NetworkManager).
diff --git a/.agents/skills/data-client-vue/references/installation.md b/.agents/skills/data-client-vue/references/installation.md
deleted file mode 120000
index 7fca195ef422..000000000000
--- a/.agents/skills/data-client-vue/references/installation.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../../docs/core/getting-started/installation.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/installation.md b/.agents/skills/data-client-vue/references/installation.md
new file mode 100644
index 000000000000..bc39ca65a263
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/installation.md
@@ -0,0 +1,79 @@
+<!-- Generated by `yarn build:skills` from docs/core/getting-started/installation.md (vue). Edit the source doc, not this file. -->
+
+# Getting Started with Reactive Data Client
+
+> **Tip: Use Agent Skills**
+>
+> Prefer to scaffold via your AI agent? See [Agent Skills](https://dataclient.io/vue/getting-started/agent-skills) and run `/data-client-setup`.
+
+## Install the plugin {#add-provider-at-top-level-component}
+
+Install the [Vue plugin](https://vuejs.org/guide/reusability/plugins.html) when creating your app.
+
+```bash
+npm install @data-client/vue @data-client/rest
+```
+
+```tsx title="main.ts"
+import { createApp } from 'vue';
+import { DataClientPlugin } from '@data-client/vue';
+
+const app = createApp(App);
+
+app.use(DataClientPlugin, {
+  // optional overrides
+  // managers: getDefaultManagers(),
+  // initialState,
+  // Controller,
+  // gcPolicy,
+});
+
+app.mount('#app');
+```
+
+[Next: Define Data »](https://dataclient.io/vue/getting-started/resource)
+
+## Example
+
+Example app: [vue-todo-app](https://github.com/reactive/data-client/tree/master/examples/vue-todo-app) ([`src/main.ts`](https://github.com/reactive/data-client/blob/master/examples/vue-todo-app/src/main.ts), [`src/pages/UserTodos.vue`](https://github.com/reactive/data-client/blob/master/examples/vue-todo-app/src/pages/UserTodos.vue))
+
+## Supported Tools
+
+<details>
+
+<summary>TypeScript 4.0+</summary>
+
+TypeScript is optional, but requires at least version [4.0](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-0.html#variadic-tuple-types) and [strictNullChecks](https://www.typescriptlang.org/tsconfig#strictNullChecks) for full type enforcement.
+
+</details>
+
+<details>
+
+<summary>Older browser support</summary>
+
+If your application targets older browsers (a few years or more), be sure to load polyfills.
+Typically this is done with [@babel/preset-env useBuiltIns: 'entry'](https://babeljs.io/docs/en/babel-preset-env#usebuiltins),
+coupled with importing [core-js](https://www.npmjs.com/package/core-js) at the entrypoint of your application.
+
+This ensures only the needed polyfills for your browser support targets are included in your application bundle.
+
+For instance `TypeError: Object.hasOwn is not a function`
+
+</details>
+
+<details>
+
+<summary>Internet Explorer support</summary>
+
+If you see `Uncaught TypeError: Class constructor Resource cannot be invoked without 'new'`,
+follow the instructions to [add legacy browser support to packages](https://dataclient.io/vue/guides/legacy-browser)
+
+</details>
+
+<details>
+
+<summary>Vue 3</summary>
+
+`@data-client/vue` supports Vue 3 and is built on the [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html).
+
+</details>
diff --git a/.agents/skills/data-client-vue/references/mutations.md b/.agents/skills/data-client-vue/references/mutations.md
deleted file mode 120000
index aaa624e6eb92..000000000000
--- a/.agents/skills/data-client-vue/references/mutations.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../../docs/core/getting-started/mutations.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/mutations.md b/.agents/skills/data-client-vue/references/mutations.md
new file mode 100644
index 000000000000..edc5f7b3b1b5
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/mutations.md
@@ -0,0 +1,376 @@
+<!-- Generated by `yarn build:skills` from docs/core/getting-started/mutations.md (vue). Edit the source doc, not this file. -->
+
+# Data mutations
+
+Using our [Create, Update, and Delete](https://dataclient.io/vue/concepts/atomic-mutations) endpoints with
+[Controller.fetch()](./Controller.md#fetch) reactively updates _all_ appropriate components atomically (at the same time).
+
+[useController()](./useController.md) gives components access to this global supercharged [setState()](https://react.dev/reference/react/useState#setstate).
+
+[//]: # "TODO: Add create, and delete examples as well (in tabs)"
+
+```ts title="TodoResource"
+import { Entity, resource } from '@data-client/rest';
+
+export class Todo extends Entity {
+  id = 0;
+  userId = 0;
+  title = '';
+  completed = false;
+
+  static key = 'Todo';
+}
+export const TodoResource = resource({
+  urlPrefix: 'https://jsonplaceholder.typicode.com',
+  path: '/todos/:id',
+  searchParams: {} as { userId?: string | number } | undefined,
+  schema: Todo,
+  optimistic: true,
+});
+```
+
+```html title="TodoItem.vue" {8-12,14-16}
+<script setup lang="ts">
+  import { useController } from '@data-client/vue';
+  import { TodoResource, type Todo } from './TodoResource';
+
+  const props = defineProps<{ todo: Todo }>();
+  const ctrl = useController();
+
+  const handleChange = (e: Event) =>
+    ctrl.fetch(
+      TodoResource.partialUpdate,
+      { id: props.todo.id },
+      { completed: (e.target as HTMLInputElement).checked },
+    );
+  const handleDelete = () =>
+    ctrl.fetch(TodoResource.delete, {
+      id: props.todo.id,
+    });
+</script>
+
+<template>
+  <div class="listItem nogap">
+    <label>
+      <input
+        type="checkbox"
+        :checked="todo.completed"
+        @change="handleChange"
+      />
+      <strike v-if="todo.completed">{{ todo.title }}</strike>
+      <template v-else>{{ todo.title }}</template>
+    </label>
+    <CancelButton @click="handleDelete" />
+  </div>
+</template>
+```
+
+```html title="CreateTodo.vue" {10-13}
+<script setup lang="ts">
+  import { useController } from '@data-client/vue';
+  import { TodoResource } from './TodoResource';
+
+  const props = defineProps<{ userId: number }>();
+  const ctrl = useController();
+
+  const handleKeyDown = async (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      ctrl.fetch(TodoResource.getList.push, {
+        userId: props.userId,
+        title: (e.target as HTMLInputElement).value,
+      });
+      (e.target as HTMLInputElement).value = '';
+    }
+  };
+</script>
+
+<template>
+  <div class="listItem nogap">
+    <label>
+      <input type="checkbox" name="new" :checked="false" disabled />
+      <TextInput size="small" @keydown="handleKeyDown" />
+    </label>
+    <CancelButton />
+  </div>
+</template>
+```
+
+```html title="TodoList.vue"
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { TodoResource } from './TodoResource';
+  import TodoItem from './TodoItem.vue';
+  import CreateTodo from './CreateTodo.vue';
+
+  const userId = 1;
+  const todos = await useSuspense(TodoResource.getList, { userId });
+</script>
+
+<template>
+  <div>
+    <TodoItem v-for="todo in todos" :key="todo.pk()" :todo="todo" />
+    <CreateTodo :userId="userId" />
+  </div>
+</template>
+```
+
+Rather than triggering invalidation cascades or using manually written update functions,
+Data Client reactively updates appropriate components using the fetch response.
+
+## Optimistic mutations based on previous state {#optimistic-updates}
+
+```ts title="Post"
+import { Entity, schema } from '@data-client/rest';
+
+export class Post extends Entity {
+  id = 0;
+  author = { id: 0 };
+  title = '';
+  body = '';
+  votes = 0;
+
+  static key = 'Post';
+
+  static schema = {
+    author: EntityMixin(
+      class User {
+        id = 0;
+      },
+    ),
+  };
+
+  get img() {
+    return `//loremflickr.com/96/72/kitten,cat?lock=${this.id % 16}`;
+  }
+}
+```
+
+```ts title="PostResource" {15-22}
+import { resource } from '@data-client/rest';
+import { Post } from './Post';
+
+export { Post };
+
+export const PostResource = resource({
+  path: '/posts/:id',
+  searchParams: {} as { userId?: string | number } | undefined,
+  schema: Post,
+}).extend('vote', {
+  path: '/posts/:id/vote',
+  method: 'POST',
+  body: undefined,
+  schema: Post,
+  getOptimisticResponse(snapshot, { id }) {
+    const post = snapshot.get(Post, { id });
+    if (!post) throw snapshot.abort;
+    return {
+      id,
+      votes: post.votes + 1,
+    };
+  },
+});
+```
+
+```html title="PostItem.vue" {9}
+<script setup lang="ts">
+  import { useController } from '@data-client/vue';
+  import { PostResource, type Post } from './PostResource';
+
+  const props = defineProps<{ post: Post }>();
+  const ctrl = useController();
+
+  const handleVote = () => {
+    ctrl.fetch(PostResource.vote, { id: props.post.id });
+  };
+</script>
+
+<template>
+  <div>
+    <div class="voteBlock">
+      <small class="vote">
+        <button class="up" @click="handleVote">&nbsp;</button>
+        {{ post.votes }}
+      </small>
+      <img :src="post.img" width="70" height="52" />
+    </div>
+    <div>
+      <h4>{{ post.title }}</h4>
+      <p>{{ post.body }}</p>
+    </div>
+  </div>
+</template>
+```
+
+```html title="TotalVotes.vue" {13}
+<script setup lang="ts">
+  import { Query } from '@data-client/rest';
+  import { useQuery } from '@data-client/vue';
+  import { PostResource } from './PostResource';
+
+  const queryTotalVotes = new Query(
+    PostResource.getList.schema,
+    posts => posts.reduce((total, post) => total + post.votes, 0),
+  );
+
+  const props = defineProps<{ userId: number }>();
+  const totalVotes = useQuery(queryTotalVotes, () => ({ userId: props.userId }));
+</script>
+
+<template>
+  <center>
+    <small>{{ totalVotes }} votes total</small>
+  </center>
+</template>
+```
+
+```html title="PostList.vue"
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { PostResource } from './PostResource';
+  import PostItem from './PostItem.vue';
+  import TotalVotes from './TotalVotes.vue';
+
+  const userId = 2;
+  const posts = await useSuspense(PostResource.getList, { userId });
+</script>
+
+<template>
+  <div>
+    <PostItem v-for="post in posts" :key="post.pk()" :post="post" />
+    <TotalVotes :userId="userId" />
+  </div>
+</template>
+```
+
+[getOptimisticResponse](https://dataclient.io/rest/guides/optimistic-updates) is just like [setState with an updater function](https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state). [Snapshot](https://dataclient.io/vue/api/Snapshot) provides typesafe access to the previous store value,
+which we use to return the _expected_ fetch response.
+
+Reactive Data Client ensures [data integrity against any possible networking failure or race condition](https://dataclient.io/rest/guides/optimistic-updates#optimistic-transforms), so don't
+worry about network failures, multiple mutation calls editing the same data, or other common
+problems in asynchronous programming.
+
+## Tracking mutation loading
+
+[useLoading()](./useLoading.md) enhances async functions by tracking their loading and error states.
+
+```ts title="PostResource"
+import { Entity, resource } from '@data-client/rest';
+
+export class Post extends Entity {
+  id = 0;
+  author = 0;
+  title = '';
+  body = '';
+  votes = 0;
+
+  static key = 'Post';
+
+  get img() {
+    return `//loremflickr.com/96/72/kitten,cat?lock=${this.id % 16}`;
+  }
+}
+export const PostResource = resource({
+  path: '/posts/:id',
+  schema: Post,
+});
+```
+
+```html title="PostDetail.vue"
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { PostResource } from './PostResource';
+
+  const props = defineProps<{ id: number }>();
+  const post = await useSuspense(PostResource.get, () => ({ id: props.id }));
+</script>
+
+<template>
+  <div>
+    <div class="voteBlock">
+      <img :src="post.img" width="70" height="52" />
+    </div>
+    <div>
+      <h4>{{ post.title }}</h4>
+      <p>{{ post.body }}</p>
+    </div>
+  </div>
+</template>
+```
+
+```html title="PostForm.vue"
+<script setup lang="ts">
+  defineProps<{ loading: boolean; error: Error | undefined }>();
+  const emit = defineEmits<{ submit: [data: FormData] }>();
+
+  const handleSubmit = (e: Event) => {
+    e.preventDefault();
+    const data = new FormData(e.target as HTMLFormElement);
+    emit('submit', data);
+  };
+</script>
+
+<template>
+  <form @submit="handleSubmit">
+    <TextInput
+      label="Title"
+      name="title"
+      defaultValue="My New Post"
+      required
+    />
+    <TextArea name="body" :rows="12" label="Body" required>
+      After clicking 'save', the button will be disabled until the POST
+      is completed. Upon completion the newly created post is displayed
+      immediately as Reactive Data Client is able to use the fetch
+      response to populate the store.
+    </TextArea>
+    <div v-if="error" class="alert alert--danger">{{ error.message }}</div>
+    <div>
+      <button type="submit" :disabled="loading">
+        {{ loading ? 'saving...' : 'Save' }}
+      </button>
+    </div>
+  </form>
+</template>
+```
+
+```html title="PostCreate.vue" {9-14}
+<script setup lang="ts">
+  import { useLoading, useController } from '@data-client/vue';
+  import { PostResource } from './PostResource';
+  import PostForm from './PostForm.vue';
+
+  const emit = defineEmits<{ navigateToPost: [id: number] }>();
+  const ctrl = useController();
+
+  const [handleSubmit, loading, error] = useLoading(
+    async (data: FormData) => {
+      const post = await ctrl.fetch(PostResource.getList.push, data);
+      emit('navigateToPost', post.id);
+    },
+  );
+</script>
+
+<template>
+  <PostForm @submit="handleSubmit" :loading="loading" :error="error" />
+</template>
+```
+
+```html title="Navigation.vue"
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import PostCreate from './PostCreate.vue';
+  import PostDetail from './PostDetail.vue';
+
+  const id = ref<undefined | number>(undefined);
+</script>
+
+<template>
+  <div v-if="id">
+    <PostDetail :id="id" />
+    <center>
+      <button @click="id = undefined">New Post</button>
+    </center>
+  </div>
+  <PostCreate v-else @navigateToPost="id = $event" />
+</template>
+```
diff --git a/.agents/skills/data-client-vue/references/useCache.md b/.agents/skills/data-client-vue/references/useCache.md
deleted file mode 120000
index 3659e1fe1516..000000000000
--- a/.agents/skills/data-client-vue/references/useCache.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../../docs/core/api/useCache.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/useCache.md b/.agents/skills/data-client-vue/references/useCache.md
new file mode 100644
index 000000000000..28a29d8000a4
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/useCache.md
@@ -0,0 +1,130 @@
+<!-- Generated by `yarn build:skills` from docs/core/api/useCache.md (vue). Edit the source doc, not this file. -->
+
+# useCache()
+
+Data rendering without the fetch.
+
+Access any [Endpoint](https://dataclient.io/rest/api/Endpoint)'s response. If the response does not exist, returns
+`undefined`. This can be used to check for an `Endpoint's` existance like for authentication.
+
+`useCache()` is reactive to data [mutations](./mutations.md); rerendering only when necessary.
+
+## Usage
+
+```ts title="UserResource"
+import { Entity, resource } from '@data-client/rest';
+
+export class User extends Entity {
+  id = '';
+  name = '';
+  isAdmin = false;
+
+  static key = 'User';
+}
+export const UserResource = resource({
+  path: '/users/:id',
+  schema: User,
+}).extend('current', {
+  path: '/user',
+  schema: User,
+});
+```
+
+```html title="Unauthed.vue"
+<script setup lang="ts">
+  import { useController, useLoading } from '@data-client/vue';
+  import { UserResource } from './UserResource';
+
+  const ctrl = useController();
+  const [handleLogin, loading] = useLoading(() =>
+    ctrl.fetch(UserResource.current),
+  );
+</script>
+
+<template>
+  <div>
+    <p>Not authorized</p>
+    <template v-if="loading">logging in...</template>
+    <button v-else @click="handleLogin">Login</button>
+  </div>
+</template>
+```
+
+```html title="Authorized.vue"
+<script setup lang="ts">
+  import { useController } from '@data-client/vue';
+  import { UserResource, type User } from './UserResource';
+
+  defineProps<{ user: User }>();
+  const ctrl = useController();
+  const handleLogout = () => ctrl.invalidate(UserResource.current);
+</script>
+
+<template>
+  <div>
+    <p>Welcome, {{ user.name }}!</p>
+    <button @click="handleLogout">Logout</button>
+  </div>
+</template>
+```
+
+```html title="AuthorizedPage.vue"
+<script setup lang="ts">
+  import { useCache } from '@data-client/vue';
+  import { UserResource } from './UserResource';
+  import Unauthed from './Unauthed.vue';
+  import Authorized from './Authorized.vue';
+
+  // currentUser as ComputedRef<User | undefined>
+  const currentUser = useCache(UserResource.current);
+</script>
+
+<template>
+  <!-- currentUser is unwrapped in the template -->
+  <Authorized v-if="currentUser" :user="currentUser" />
+  <!-- user is not logged in -->
+  <Unauthed v-else />
+</template>
+```
+
+See [truthiness narrowing](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#truthiness-narrowing) for
+more information about type handling
+
+## Behavior
+
+`useCache()` returns a [ComputedRef](https://vuejs.org/api/reactivity-core.html#computed). The table
+below describes its `.value`.
+
+| Expiry Status | Returns      | Conditions                                                                                                                                                                                                      |
+| ------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Invalid       | `undefined`  | not in store, [deletion](https://dataclient.io/rest/api/resource#delete), [invalidation](./Controller.md#invalidate), [invalidIfStale](https://dataclient.io/vue/concepts/expiry-policy#endpointinvalidifstale) |
+| Stale         | denormalized | (first-render, arg change) & [expiry < now](https://dataclient.io/vue/concepts/expiry-policy)                                                                                                                   |
+| Valid         | denormalized | fetch completion                                                                                                                                                                                                |
+|               | `undefined`  | `null` used as second argument                                                                                                                                                                                  |
+
+> **Tip: Conditional Dependencies**
+>
+> Use `null` as the second argument to any Data Client hook means "do nothing."
+>
+> ```typescript
+> // todo could be undefined if id is undefined
+> const todo = useCache(
+>   TodoResource.get,
+>   computed(() => (id.value ? { id: id.value } : null)),
+> );
+> ```
+
+## Types
+
+```typescript
+function useCache(
+  endpoint: ReadEndpoint,
+  ...args: MaybeRefsOrGetters<Parameters<typeof endpoint.key>> | [null]
+): ComputedRef<DenormalizeNullable<typeof endpoint.schema>>;
+```
+
+Arguments can be plain values, [refs](https://vuejs.org/api/reactivity-core.html#ref) (including [computed](https://vuejs.org/api/reactivity-core.html#computed)), or getter
+functions like `() => ({ id: props.id })`. A plain object like `{ id: props.id }` is read once and won't
+follow prop or route changes, so use a getter or `computed` when an argument can change.
+
+The result updates when the arguments change.
diff --git a/.agents/skills/data-client-vue/references/useController.md b/.agents/skills/data-client-vue/references/useController.md
deleted file mode 120000
index 68fa2a5921fb..000000000000
--- a/.agents/skills/data-client-vue/references/useController.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../../docs/core/api/useController.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/useController.md b/.agents/skills/data-client-vue/references/useController.md
new file mode 100644
index 000000000000..6ad0b73f00d9
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/useController.md
@@ -0,0 +1,170 @@
+<!-- Generated by `yarn build:skills` from docs/core/api/useController.md (vue). Edit the source doc, not this file. -->
+
+# useController()
+
+[Controller](./Controller.md) provides type-safe methods to access and dispatch actions to the store.
+
+For instance [fetch](./Controller.md#fetch), [invalidate](./Controller.md#invalidate),
+and [setResponse](./Controller.md#setResponse)
+
+```html
+<script setup lang="ts">
+  import { useController } from '@data-client/vue';
+
+  const props = defineProps<{ id: string }>();
+  const ctrl = useController();
+
+  const handleRefresh = async () => {
+    await ctrl.fetch(MyResource.get, { id: props.id });
+  };
+
+  const handleSuspend = async () => {
+    await ctrl.invalidate(MyResource.get, { id: props.id });
+  };
+
+  const handleLogout = () => {
+    ctrl.resetEntireStore();
+  };
+</script>
+```
+
+`useController()` must be called inside `<script setup>` (or `setup()`), and requires the
+[DataClientPlugin](./installation.md#add-provider-at-top-level-component) to be installed.
+The same [Controller](./Controller.md) is also available in templates and the Options API as `$dataClient`.
+
+## Examples
+
+### Form submission
+
+[fetch](./Controller.md#fetch) returns the denormalized response, matching [useSuspense()](./useSuspense.md)'s return type. This allows using Entity methods like `pk()`.
+
+```html title="CreatePost.vue"
+<script setup lang="ts">
+  import { useController } from '@data-client/vue';
+  import { useRouter } from 'vue-router';
+  import { PostResource } from './PostResource';
+
+  const ctrl = useController();
+  const router = useRouter();
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    const post = await ctrl.fetch(
+      PostResource.getList.push,
+      new FormData(e.target as HTMLFormElement),
+    );
+    post.title;
+    post.computedField;
+    router.push(`/post/${post.pk()}`);
+  };
+</script>
+
+<template>
+  <form @submit="handleSubmit"><!-- fields --></form>
+</template>
+```
+
+### Direct entity update
+
+Use [set](./Controller.md#set) for immediate updates without network requests. Supports functional updates to avoid race conditions.
+
+```html title="VoteButton.vue"
+<script setup lang="ts">
+  import { useController } from '@data-client/vue';
+  import { Article } from './Article';
+
+  const props = defineProps<{ articleId: string }>();
+  const ctrl = useController();
+
+  const vote = () =>
+    ctrl.set(Article, { id: props.articleId }, article => ({
+      ...article,
+      votes: article.votes + 1,
+    }));
+</script>
+
+<template>
+  <button @click="vote">Vote</button>
+</template>
+```
+
+### Invalidate after mutation
+
+Force refetch of related data using [invalidate](./Controller.md#invalidate) or [expireAll](./Controller.md#expireAll).
+
+```html title="ClearUserCache.vue"
+<script setup lang="ts">
+  import { useController } from '@data-client/vue';
+  import { UserResource } from './UserResource';
+
+  const ctrl = useController();
+
+  const handleClear = async () => {
+    // invalidate() causes suspense; expireAll() refetches silently
+    ctrl.expireAll(UserResource.get);
+    ctrl.expireAll(UserResource.getList);
+  };
+</script>
+
+<template>
+  <button @click="handleClear">Refresh user data</button>
+</template>
+```
+
+> **Tip**
+>
+> For better performance and consistency, prefer [including side effect updates in mutation responses](https://dataclient.io/rest/guides/side-effects).
+
+### Prefetching
+
+Use [fetchIfStale](./Controller.md#fetchIfStale) to prefetch without overfetching fresh data.
+
+```html title="ArticleLink.vue"
+<script setup lang="ts">
+  import { useController } from '@data-client/vue';
+  import { ArticleResource } from './ArticleResource';
+
+  const props = defineProps<{ id: string }>();
+  const ctrl = useController();
+
+  const prefetch = () =>
+    ctrl.fetchIfStale(ArticleResource.get, { id: props.id });
+</script>
+
+<template>
+  <RouterLink :to="`/article/${id}`" @mouseenter="prefetch">
+    Read more
+  </RouterLink>
+</template>
+```
+
+### Websocket updates
+
+Populate cache with external data via [set](./Controller.md#set).
+
+```ts title="useWebsocket.ts"
+import { onMounted, onUnmounted } from 'vue';
+import { useController } from '@data-client/vue';
+
+export function useWebsocket(url: string) {
+  const ctrl = useController();
+  let ws: WebSocket;
+
+  onMounted(() => {
+    ws = new WebSocket(url);
+    ws.onmessage = event => {
+      const { entity, args, data } = JSON.parse(event.data);
+      ctrl.set(EntityMap[entity], args, data);
+    };
+  });
+  onUnmounted(() => ws?.close());
+}
+```
+
+> **Warning**
+>
+> For production use, implement a [Manager for data streams](https://dataclient.io/vue/concepts/managers#data-stream) rather than component-level lifecycle hooks. Managers handle connection lifecycle globally and work with SSR.
+
+### Todo App
+
+Example app: [vue-todo-app](https://github.com/reactive/data-client/tree/master/examples/vue-todo-app) ([`src/resources/TodoResource.ts`](https://github.com/reactive/data-client/blob/master/examples/vue-todo-app/src/resources/TodoResource.ts), [`src/components/TodoItem.vue`](https://github.com/reactive/data-client/blob/master/examples/vue-todo-app/src/components/TodoItem.vue))
diff --git a/.agents/skills/data-client-vue/references/useDLE.md b/.agents/skills/data-client-vue/references/useDLE.md
deleted file mode 120000
index fa87e066feb2..000000000000
--- a/.agents/skills/data-client-vue/references/useDLE.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../../docs/core/api/useDLE.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/useDLE.md b/.agents/skills/data-client-vue/references/useDLE.md
new file mode 100644
index 000000000000..ad20c87ccdf8
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/useDLE.md
@@ -0,0 +1,270 @@
+<!-- Generated by `yarn build:skills` from docs/core/api/useDLE.md (vue). Edit the source doc, not this file. -->
+
+# useDLE() - \[D]ata \[L]oading \[E]rror
+
+High performance async data rendering without overfetching. With fetch meta data.
+
+In case you cannot use [suspense](./data-dependency.md#async-fallbacks), useDLE() is just like [useSuspense()](./useSuspense.md) but returns \[D]ata \[L]oading \[E]rror values.
+
+`useDLE()` is reactive to data [mutations](./mutations.md); rerendering only when necessary.
+
+## Usage
+
+```typescript title="ProfileResource"
+import { Entity, resource } from '@data-client/rest';
+
+export class Profile extends Entity {
+  id: number | undefined = undefined;
+  avatar = '';
+  fullName = '';
+  bio = '';
+
+  static key = 'Profile';
+}
+
+export const ProfileResource = resource({
+  path: '/profiles/:id',
+  schema: Profile,
+});
+```
+
+```html title="ProfileList.vue"
+<script setup lang="ts">
+  import { useDLE } from '@data-client/vue';
+  import { ProfileResource } from './ProfileResource';
+
+  const { data, loading, error } = useDLE(ProfileResource.getList);
+</script>
+
+<template>
+  <div v-if="error">Error {{ error.status }}</div>
+  <Loading v-else-if="loading || !data" />
+  <div v-else>
+    <div class="listItem" v-for="profile in data" :key="profile.pk()">
+      <Avatar :src="profile.avatar" />
+      <div>
+        <h4>{{ profile.fullName }}</h4>
+        <p>{{ profile.bio }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+## Behavior
+
+`data`, `loading` and `error` are each a [ComputedRef](https://vuejs.org/api/reactivity-core.html#computed).
+Destructure them at the top level of `<script setup>` so they are unwrapped in the template. The table
+below describes their `.value`.
+
+| Expiry Status | Fetch           | Data         | Loading | Error             | Conditions                                                                                                                                                                                                      |
+| ------------- | --------------- | ------------ | ------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Invalid       | yes<sup>1</sup> | `undefined`  | true    | false             | not in store, [deletion](https://dataclient.io/rest/api/resource#delete), [invalidation](./Controller.md#invalidate), [invalidIfStale](https://dataclient.io/vue/concepts/expiry-policy#endpointinvalidifstale) |
+| Stale         | yes<sup>1</sup> | denormalized | false   | false             | (first-render, arg change) & [expiry < now](https://dataclient.io/vue/concepts/expiry-policy)                                                                                                                   |
+| Valid         | no              | denormalized | false   | maybe<sup>2</sup> | fetch completion                                                                                                                                                                                                |
+|               | no              | `undefined`  | false   | false             | `null` used as second argument                                                                                                                                                                                  |
+
+> **Note**
+>
+> 1. Identical fetches are automatically deduplicated
+> 2. [Hard errors](https://dataclient.io/vue/concepts/error-policy#hard) to be [caught](./data-dependency.md#async-fallbacks) by [onErrorCaptured()](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured)
+
+> **Tip: Conditional Dependencies**
+>
+> Use `null` as the second argument to any Data Client hook means "do nothing."
+>
+> ```typescript
+> // todo could be undefined if id is undefined
+> const todo = useDLE(
+>   TodoResource.get,
+>   computed(() => (id.value ? { id: id.value } : null)),
+> );
+> ```
+
+## Types
+
+```typescript
+function useDLE(
+  endpoint: ReadEndpoint,
+  ...args: MaybeRefsOrGetters<Parameters<typeof endpoint>> | [null]
+): {
+  data: ComputedRef<DenormalizeNullable<typeof endpoint.schema>>;
+  loading: ComputedRef<boolean>;
+  error: ComputedRef<ErrorTypes | undefined>;
+};
+```
+
+Arguments can be plain values, [refs](https://vuejs.org/api/reactivity-core.html#ref) (including [computed](https://vuejs.org/api/reactivity-core.html#computed)), or getter
+functions like `() => ({ id: props.id })`. A plain object like `{ id: props.id }` is read once and won't
+follow prop or route changes, so use a getter or `computed` when an argument can change.
+
+The results update when the arguments change.
+
+## Examples
+
+### Detail
+
+```typescript title="ProfileResource"
+import { Entity, resource } from '@data-client/rest';
+
+export class Profile extends Entity {
+  id: number | undefined = undefined;
+  avatar = '';
+  fullName = '';
+  bio = '';
+
+  static key = 'Profile';
+}
+
+export const ProfileResource = resource({
+  path: '/profiles/:id',
+  schema: Profile,
+});
+```
+
+```html title="ProfileDetail.vue"
+<script setup lang="ts">
+  import { useDLE } from '@data-client/vue';
+  import { ProfileResource } from './ProfileResource';
+
+  const {
+    data: profile,
+    loading,
+    error,
+  } = useDLE(ProfileResource.get, { id: 1 });
+</script>
+
+<template>
+  <div v-if="error">Error {{ error.status }}</div>
+  <Loading v-else-if="loading || !profile" />
+  <div v-else class="listItem">
+    <Avatar :src="profile.avatar" />
+    <div>
+      <h4>{{ profile.fullName }}</h4>
+      <p>{{ profile.bio }}</p>
+    </div>
+  </div>
+</template>
+```
+
+### Conditional
+
+`null` will avoid binding and fetching data
+
+```ts title="Resources"
+import { Entity, resource } from '@data-client/rest';
+
+export class Post extends Entity {
+  id = 0;
+  userId = 0;
+  title = '';
+  body = '';
+
+  static key = 'Post';
+}
+export const PostResource = resource({
+  path: '/posts/:id',
+  schema: Post,
+});
+
+export class User extends Entity {
+  id = 0;
+  name = '';
+  username = '';
+  email = '';
+  phone = '';
+  website = '';
+
+  get profileImage() {
+    return `https://i.pravatar.cc/64?img=${this.id + 4}`;
+  }
+
+  static key = 'User';
+}
+export const UserResource = resource({
+  urlPrefix: 'https://jsonplaceholder.typicode.com',
+  path: '/users/:id',
+  schema: User,
+});
+```
+
+```html title="PostWithAuthor.vue" {15-21}
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { useDLE } from '@data-client/vue';
+  import { PostResource, UserResource } from './Resources';
+
+  const props = defineProps<{ id: string }>();
+  const {
+    data: post,
+    loading: postLoading,
+    error: postError,
+  } = useDLE(PostResource.get, () => ({ id: props.id }));
+  const {
+    data: author,
+    loading: authorLoading,
+    error: authorError,
+  } = useDLE(
+    UserResource.get,
+    computed(() =>
+      post.value?.userId
+        ? {
+            id: post.value.userId,
+          }
+        : null,
+    ),
+  );
+</script>
+
+<template>
+  <div v-if="postError">Error {{ postError.status }}</div>
+  <Loading v-else-if="postLoading || !post" />
+  <div v-else-if="authorError">Error {{ authorError.status }}</div>
+  <Loading v-else-if="authorLoading || !author" />
+  <div v-else>{{ author.username }}</div>
+</template>
+```
+
+### Embedded data
+
+When entities are stored in [nested structures](https://dataclient.io/rest/guides/relational-data#nesting), that structure will remain.
+
+```typescript title="api/Post"
+export class PaginatedPost extends Entity {
+  id = '';
+  title = '';
+  content = '';
+
+  static key = 'PaginatedPost';
+}
+
+export const getPosts = new RestEndpoint({
+  path: '/post',
+  searchParams: { page: '' },
+  schema: {
+    results: new Collection([PaginatedPost]),
+    nextPage: '',
+    lastPage: '',
+  },
+});
+```
+
+```html title="ArticleList.vue" {14}
+<script setup lang="ts">
+  import { useDLE } from '@data-client/vue';
+  import { getPosts } from './api/Post';
+
+  const props = defineProps<{ page: string }>();
+  const { data, loading, error } = useDLE(getPosts, () => ({ page: props.page }));
+</script>
+
+<template>
+  <div v-if="error">Error {{ error.status }}</div>
+  <Loading v-else-if="loading || !data" />
+  <div v-else>
+    <div v-for="post in data.results" :key="post.pk()">
+      {{ post.title }}
+    </div>
+  </div>
+</template>
+```
diff --git a/.agents/skills/data-client-vue/references/useDebounce.md b/.agents/skills/data-client-vue/references/useDebounce.md
deleted file mode 120000
index f4d37592acfe..000000000000
--- a/.agents/skills/data-client-vue/references/useDebounce.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../../docs/core/api/useDebounce.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/useDebounce.md b/.agents/skills/data-client-vue/references/useDebounce.md
new file mode 100644
index 000000000000..bcfb7660941c
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/useDebounce.md
@@ -0,0 +1,125 @@
+<!-- Generated by `yarn build:skills` from docs/core/api/useDebounce.md (vue). Edit the source doc, not this file. -->
+
+# useDebounce()
+
+Delays updating the parameters by [debouncing](https://css-tricks.com/debouncing-throttling-explained-examples/).
+
+Useful to avoid spamming network requests when parameters might change quickly (like a typeahead field).
+
+> **Tip**
+>
+> `useDebounce()` returns [refs](https://vuejs.org/api/reactivity-core.html#ref), so the debounced
+> value can be passed directly to other composables or components. `isPending` is true from the moment
+> the input changes until the debounced value is updated.
+
+## Usage
+
+```ts title="IssueQuery"
+import { RestEndpoint, Entity, Collection } from '@data-client/rest';
+
+export class Issue extends Entity {
+  number = 0;
+  repository_url = '';
+  labels_url = '';
+  html_url = '';
+  body = '';
+  title = '';
+  state: 'open' | 'closed' = 'open';
+  locked = false;
+  comments = 0;
+  created_at = Temporal.Instant.fromEpochMilliseconds(0);
+  updated_at = Temporal.Instant.fromEpochMilliseconds(0);
+  closed_at: Temporal.Instant | null = null;
+  authorAssociation = 'NONE';
+  pullRequest: Record<string, any> | null = null;
+  declare draft?: boolean;
+
+  static schema = {
+    created_at: Temporal.Instant.from,
+    updated_at: Temporal.Instant.from,
+    closed_at: Temporal.Instant.from,
+  };
+
+  pk() {
+    return [this.repository_url, this.number].join(',');
+  }
+}
+
+export const issueQuery = new RestEndpoint({
+  urlPrefix: 'https://api.github.com',
+  path: '/search/issues',
+  searchParams: {} as { q: string },
+  paginationField: 'page',
+  schema: {
+    incomplete_results: false,
+    items: new Collection([Issue]),
+    total_count: 0,
+  },
+});
+```
+
+```html title="IssueList.vue"
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { useSuspense } from '@data-client/vue';
+  import { issueQuery } from './IssueQuery';
+
+  const props = defineProps<{
+    query: string;
+    owner: string;
+    repo: string;
+  }>();
+  const response = await useSuspense(issueQuery, computed(() => ({
+    q: `${props.query} repo:${props.owner}/${props.repo}`,
+  })));
+</script>
+
+<template>
+  <small style="display: block">{{ response.total_count }} results</small>
+  <div v-for="issue in response.items.slice(0, 5)" :key="issue.pk()">
+    <a :href="issue.html_url" target="_blank">{{ issue.title }}</a>
+  </div>
+</template>
+```
+
+```html title="SearchIssues.vue"
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { useDebounce } from '@data-client/vue';
+  import IssueList from './IssueList.vue';
+
+  const query = ref('');
+  const [debouncedQuery, isPending] = useDebounce(query, 200);
+</script>
+
+<template>
+  <TextInput
+    spellcheck="false"
+    placeholder="Search react issues"
+    v-model="query"
+    :loading="isPending"
+    autofocus
+    size="large"
+  >
+    <SearchIcon />
+  </TextInput>
+  <Suspense>
+    <IssueList :query="debouncedQuery" owner="facebook" repo="react" />
+    <template #fallback><Loading /></template>
+  </Suspense>
+</template>
+```
+
+## Types
+
+```typescript
+function useDebounce<T>(
+  value: T | Ref<T>,
+  delay: number,
+  updatable?: boolean | Ref<boolean>,
+): [Ref<T>, Ref<boolean>];
+```
+
+`value` and `updatable` can be plain values or [refs](https://vuejs.org/api/reactivity-core.html#ref).
+Returns a tuple of `[debouncedValue, isPending]` refs. When `updatable` is `false`, the debounced
+value stops updating and `isPending` resets to `false`.
diff --git a/.agents/skills/data-client-vue/references/useFetch.md b/.agents/skills/data-client-vue/references/useFetch.md
deleted file mode 120000
index b3c249d05780..000000000000
--- a/.agents/skills/data-client-vue/references/useFetch.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../../docs/core/api/useFetch.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/useFetch.md b/.agents/skills/data-client-vue/references/useFetch.md
new file mode 100644
index 000000000000..b19d1ba8e090
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/useFetch.md
@@ -0,0 +1,165 @@
+<!-- Generated by `yarn build:skills` from docs/core/api/useFetch.md (vue). Edit the source doc, not this file. -->
+
+# useFetch()
+
+Fetch an Endpoint if it is not in cache or stale. Returns a [Ref](https://vuejs.org/api/reactivity-core.html#ref)
+holding the fetch promise (with a `resolved` flag). A new fetch is triggered when the arguments change or
+the data is [invalidated](./Controller.md#invalidate). Use it to start fetches early, then read the data
+with [useSuspense()](./useSuspense.md), [useCache()](./useCache.md) or [useDLE()](./useDLE.md).
+
+## Usage
+
+### Parallel data loading
+
+`await useSuspense()` runs sequentially in `<script setup>`. Calling `useFetch()` for each endpoint first
+starts every fetch in parallel; the following `useSuspense()` calls then reuse the in-flight requests.
+
+```ts title="Resources"
+import { Entity, resource } from '@data-client/rest';
+
+export class Post extends Entity {
+  id = 0;
+  title = '';
+  body = '';
+  static key = 'Post';
+}
+export const PostResource = resource({
+  path: '/posts/:id',
+  schema: Post,
+});
+
+export class Comment extends Entity {
+  id = 0;
+  postId = 0;
+  author = '';
+  text = '';
+  static key = 'Comment';
+}
+export const CommentResource = resource({
+  path: '/comments/:id',
+  searchParams: {} as { postId: number },
+  schema: Comment,
+});
+```
+
+```html title="PostWithComments.vue" {7-15}
+<script setup lang="ts">
+  import { useFetch, useSuspense } from '@data-client/vue';
+  import { PostResource, CommentResource } from './Resources';
+
+  const props = defineProps<{ id: number }>();
+
+  // Both fetches start in parallel
+  useFetch(PostResource.get, () => ({ id: props.id }));
+  useFetch(CommentResource.getList, () => ({ postId: props.id }));
+
+  // useSuspense() reads the results — the second fetch
+  // is already in-flight while the first one is awaited
+  const post = await useSuspense(PostResource.get, () => ({ id: props.id }));
+  const comments = await useSuspense(CommentResource.getList, () => ({
+    postId: props.id,
+  }));
+</script>
+
+<template>
+  <article>
+    <h3>{{ post.title }}</h3>
+    <p>{{ post.body }}</p>
+    <h4>Comments</h4>
+    <div v-for="comment in comments" :key="comment.id" class="listItem">
+      <strong>{{ comment.author }}</strong>: {{ comment.text }}
+    </div>
+  </article>
+</template>
+```
+
+### Prefetching
+
+`useFetch()` can also be used standalone to ensure resources are available early in a render tree before they are needed.
+
+> **Tip**
+>
+> Use in combination with a data-binding hook ([useCache()](./useCache.md), [useSuspense()](./useSuspense.md), [useDLE()](./useDLE.md), [useLive()](./useLive.md))
+> in another component.
+
+```html title="MasterPost.vue"
+<script setup lang="ts">
+  import { useFetch } from '@data-client/vue';
+  import { PostResource } from './Resources';
+
+  const props = defineProps<{ id: number }>();
+  useFetch(PostResource.get, () => ({ id: props.id }));
+  // ...
+</script>
+```
+
+## Behavior
+
+| Expiry Status | Fetch           | `.value`         | `resolved` | Conditions                                                                                                           |
+| ------------- | --------------- | ---------------- | ---------- | -------------------------------------------------------------------------------------------------------------------- |
+| Invalid       | yes<sup>1</sup> | pending promise  | `false`    | not in store, [deletion](https://dataclient.io/rest/api/resource#delete), [invalidation](./Controller.md#invalidate) |
+| Stale         | yes<sup>1</sup> | pending promise  | `false`    | (first-render, arg change) & [expiry < now](https://dataclient.io/vue/concepts/expiry-policy)                        |
+| Valid         | no              | resolved promise | `true`     | fetch completion                                                                                                     |
+| Error         | no              | rejected promise | `true`     | fetch failed                                                                                                         |
+|               | no              | `undefined`      |            | `null` used as second argument                                                                                       |
+
+The returned `Ref` is updated with a new promise whenever a fetch is triggered: on argument change,
+[invalidation](./Controller.md#invalidate), or [reset](./Controller.md#resetEntireStore).
+
+> **Note**
+>
+> 1. Identical fetches are automatically deduplicated
+
+> **Tip: Conditional Dependencies**
+>
+> Use `null` as the second argument to any Data Client hook means "do nothing."
+>
+> ```typescript
+> // todo could be undefined if id is undefined
+> const todo = useFetch(
+>   TodoResource.get,
+>   computed(() => (id.value ? { id: id.value } : null)),
+> );
+> ```
+
+## Types
+
+```typescript
+function useFetch(
+  endpoint: ReadEndpoint,
+  ...args: MaybeRefsOrGetters<Parameters<typeof endpoint>> | [null]
+): Readonly<
+  Ref<
+    | (Promise<Denormalize<typeof endpoint.schema>> & {
+        resolved: boolean;
+      })
+    | undefined
+  >
+>;
+```
+
+Arguments can be plain values, [refs](https://vuejs.org/api/reactivity-core.html#ref) (including [computed](https://vuejs.org/api/reactivity-core.html#computed)), or getter
+functions like `() => ({ id: props.id })`. A plain object like `{ id: props.id }` is read once and won't
+follow prop or route changes, so use a getter or `computed` when an argument can change.
+
+A new fetch is triggered when the arguments change.
+
+## Examples
+
+### Checking fetch status
+
+Use `promise.resolved` to check whether data is still loading:
+
+```html title="MasterPost.vue"
+<script setup lang="ts">
+  import { useFetch } from '@data-client/vue';
+  import { PostResource } from './Resources';
+
+  const props = defineProps<{ id: number }>();
+  const promise = useFetch(PostResource.get, () => ({ id: props.id }));
+  if (promise.value && !promise.value.resolved) {
+    // fetch is in-flight
+  }
+  // ...
+</script>
+```
diff --git a/.agents/skills/data-client-vue/references/useLive.md b/.agents/skills/data-client-vue/references/useLive.md
deleted file mode 120000
index fa4e4d082b41..000000000000
--- a/.agents/skills/data-client-vue/references/useLive.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../../docs/core/api/useLive.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/useLive.md b/.agents/skills/data-client-vue/references/useLive.md
new file mode 100644
index 000000000000..1ea1a4682de2
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/useLive.md
@@ -0,0 +1,113 @@
+<!-- Generated by `yarn build:skills` from docs/core/api/useLive.md (vue). Edit the source doc, not this file. -->
+
+# useLive()
+
+Async rendering of remotely triggered data mutations.
+
+[useSuspense()](./useSuspense.md) + [useSubscription()](./useSubscription.md) in one composable.
+
+`useLive()` is reactive to data [mutations](./mutations.md); rerendering only when necessary.
+
+## Usage
+
+```typescript title="Ticker" {32}
+import { Entity, RestEndpoint } from '@data-client/rest';
+
+export class Ticker extends Entity {
+  product_id = '';
+  trade_id = 0;
+  price = 0;
+  size = '0';
+  time = Temporal.Instant.fromEpochMilliseconds(0);
+  bid = '0';
+  ask = '0';
+  volume = '';
+
+  pk(): string {
+    return this.product_id;
+  }
+  static key = 'Ticker';
+
+  static schema = {
+    price: Number,
+    time: Temporal.Instant.from,
+  };
+}
+
+export const getTicker = new RestEndpoint({
+  urlPrefix: 'https://api.exchange.coinbase.com',
+  path: '/products/:productId/ticker',
+  schema: Ticker,
+  process(value, { productId }) {
+    value.product_id = productId;
+    return value;
+  },
+  pollFrequency: 2000,
+});
+```
+
+```html title="AssetPrice.vue"
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { useLive } from '@data-client/vue';
+  import { getTicker } from './Ticker';
+
+  const props = defineProps<{ productId: string }>();
+  const ticker = await useLive(getTicker, computed(() => ({
+    productId: props.productId,
+  })));
+</script>
+
+<template>
+  <center>
+    {{ productId }}
+    <NumberFlow
+      :value="ticker.price"
+      :format="{ style: 'currency', currency: 'USD' }"
+    />
+  </center>
+</template>
+```
+
+Like [useSuspense()](./useSuspense.md), `useLive()` returns a Promise, so it is used with `await` in
+`<script setup>` and requires a [Suspense](https://vuejs.org/guide/built-ins/suspense.html) ancestor.
+The subscription is removed automatically when the component unmounts.
+
+## Behavior
+
+> **Tip: Conditional Dependencies**
+>
+> Use `null` as the second argument to any Data Client hook means "do nothing."
+>
+> ```typescript
+> // todo could be undefined if id is undefined
+> const todo = useLive(
+>   TodoResource.get,
+>   computed(() => (id.value ? { id: id.value } : null)),
+> );
+> ```
+
+## Types
+
+```typescript
+function useLive(
+  endpoint: ReadEndpoint,
+  ...args: MaybeRefsOrGetters<Parameters<typeof endpoint>> | [null]
+): Promise<DeepReadonly<ComputedRef<Denormalize<typeof endpoint.schema>>>>;
+```
+
+Arguments can be plain values, [refs](https://vuejs.org/api/reactivity-core.html#ref) (including [computed](https://vuejs.org/api/reactivity-core.html#computed)), or getter
+functions like `() => ({ id: props.id })`. A plain object like `{ id: props.id }` is read once and won't
+follow prop or route changes, so use a getter or `computed` when an argument can change.
+
+The result updates (and the subscription is re-established) when the arguments change.
+While data for new arguments loads, the result keeps the previous data instead of becoming `undefined`.
+If that fetch fails, reading the result throws the error (per its [error policy](https://dataclient.io/vue/concepts/error-policy)), so it reaches
+[onErrorCaptured()](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured).
+
+## Examples
+
+### Bitcoin Price (polling)
+
+When our component with `useLive` is rendered, `getTicker` will fetch at [pollFrequency](https://dataclient.io/rest/api/RestEndpoint#pollfrequency)
+miliseconds.
diff --git a/.agents/skills/data-client-vue/references/useLoading.md b/.agents/skills/data-client-vue/references/useLoading.md
deleted file mode 120000
index fdce9d784bd7..000000000000
--- a/.agents/skills/data-client-vue/references/useLoading.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../../docs/core/api/useLoading.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/useLoading.md b/.agents/skills/data-client-vue/references/useLoading.md
new file mode 100644
index 000000000000..fc8db63faa74
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/useLoading.md
@@ -0,0 +1,160 @@
+<!-- Generated by `yarn build:skills` from docs/core/api/useLoading.md (vue). Edit the source doc, not this file. -->
+
+# useLoading()
+
+Helps track loading and error state of imperative async functions.
+
+> **Tip**
+>
+> [useSuspense()](./useSuspense.md) or [useDLE()](./useDLE.md) are better for GET/read endpoints.
+
+## Usage
+
+```ts title="PostResource"
+import { Entity, resource } from '@data-client/rest';
+
+export class Post extends Entity {
+  id = 0;
+  author = 0;
+  title = '';
+  body = '';
+  votes = 0;
+
+  static key = 'Post';
+
+  get img() {
+    return `//loremflickr.com/96/72/kitten,cat?lock=${this.id % 16}`;
+  }
+}
+export const PostResource = resource({
+  path: '/posts/:id',
+  schema: Post,
+});
+```
+
+```html title="PostDetail.vue"
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { useSuspense } from '@data-client/vue';
+  import { PostResource } from './PostResource';
+
+  const props = defineProps<{ id: number }>();
+  const post = await useSuspense(PostResource.get, computed(() => ({
+    id: props.id,
+  })));
+</script>
+
+<template>
+  <div>
+    <div class="voteBlock">
+      <img :src="post.img" width="70" height="52" />
+    </div>
+    <div>
+      <h4>{{ post.title }}</h4>
+      <p>{{ post.body }}</p>
+    </div>
+  </div>
+</template>
+```
+
+```html title="PostForm.vue"
+<script setup lang="ts">
+  defineProps<{
+    loading: boolean;
+    error: Error | undefined;
+  }>();
+  const emit = defineEmits<{ submit: [data: FormData] }>();
+
+  const handleSubmit = (e: Event) => {
+    e.preventDefault();
+    emit('submit', new FormData(e.target as HTMLFormElement));
+  };
+</script>
+
+<template>
+  <form @submit="handleSubmit">
+    <TextInput
+      label="Title"
+      name="title"
+      defaultValue="My New Post"
+      required
+    />
+    <textarea name="body" :rows="12" label="Body" required>
+      After clicking 'save', the button will be disabled until the POST
+      is completed. Upon completion the newly created post is displayed
+      immediately as Reactive Data Client is able to use the fetch
+      response to populate the store.
+    </textarea>
+    <div v-if="error" class="alert alert--danger">{{ error.message }}</div>
+    <div>
+      <button type="submit" :disabled="loading">
+        {{ loading ? 'saving...' : 'Save' }}
+      </button>
+    </div>
+  </form>
+</template>
+```
+
+```html title="PostCreate.vue"
+<script setup lang="ts">
+  import { useLoading, useController } from '@data-client/vue';
+  import { PostResource } from './PostResource';
+  import PostForm from './PostForm.vue';
+
+  const emit = defineEmits<{ navigateToPost: [id: number] }>();
+  const ctrl = useController();
+  const [handleSubmit, loading, error] = useLoading(
+    async (data: FormData) => {
+      const post = await ctrl.fetch(PostResource.getList.push, data);
+      emit('navigateToPost', post.id);
+    },
+  );
+</script>
+
+<template>
+  <PostForm @submit="handleSubmit" :loading="loading" :error="error" />
+</template>
+```
+
+```html title="Navigation.vue"
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import PostCreate from './PostCreate.vue';
+  import PostDetail from './PostDetail.vue';
+
+  const id = ref<number | undefined>(undefined);
+</script>
+
+<template>
+  <div v-if="id">
+    <Suspense>
+      <PostDetail :id="id" />
+    </Suspense>
+    <center>
+      <button @click="id = undefined">New Post</button>
+    </center>
+  </div>
+  <PostCreate v-else @navigate-to-post="id = $event" />
+</template>
+```
+
+Returns the wrapped function along with `loading` and `error` [refs](https://vuejs.org/api/reactivity-core.html#ref).
+The wrapped function is stable, so no dependency list is needed: any refs or props it reads are
+read at call time.
+
+## Types
+
+```typescript
+export default function useLoading<
+  F extends (...args: any) => Promise<any>,
+>(func: F): [F, Ref<boolean>, Ref<Error | undefined>];
+```
+
+`loading` is `true` while the returned promise is pending. If `func` rejects, the rejection is
+caught and stored in `error`; it is cleared again on the next call.
+
+## Examples
+
+### Todo creation
+
+Example app: [vue-todo-app](https://github.com/reactive/data-client/tree/master/examples/vue-todo-app) ([`src/components/TodoList.vue`](https://github.com/reactive/data-client/blob/master/examples/vue-todo-app/src/components/TodoList.vue), [`src/resources/TodoResource.ts`](https://github.com/reactive/data-client/blob/master/examples/vue-todo-app/src/resources/TodoResource.ts))
diff --git a/.agents/skills/data-client-vue/references/useQuery.md b/.agents/skills/data-client-vue/references/useQuery.md
deleted file mode 120000
index 8cbb935c7781..000000000000
--- a/.agents/skills/data-client-vue/references/useQuery.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../../docs/core/api/useQuery.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/useQuery.md b/.agents/skills/data-client-vue/references/useQuery.md
new file mode 100644
index 000000000000..f75097c8cd6e
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/useQuery.md
@@ -0,0 +1,303 @@
+<!-- Generated by `yarn build:skills` from docs/core/api/useQuery.md (vue). Edit the source doc, not this file. -->
+
+# useQuery()
+
+Data rendering without the fetch.
+
+Access any [Queryable Schema](https://dataclient.io/rest/api/schema#queryable)'s store value; like [Entity](https://dataclient.io/rest/api/Entity), [All](https://dataclient.io/rest/api/All), [Collection](https://dataclient.io/rest/api/Collection), [Query](https://dataclient.io/rest/api/Query),
+[Union](https://dataclient.io/rest/api/Union), and [Scalar](https://dataclient.io/rest/api/Scalar). [Lazy](https://dataclient.io/rest/api/Lazy) fields also work via their [`.query`](https://dataclient.io/rest/api/Lazy#query) accessor.
+If the value does not exist, returns `undefined`.
+
+`useQuery()` is reactive to data [mutations](./mutations.md); rerendering only when necessary. Returns `undefined`
+when data is [Invalid](https://dataclient.io/vue/concepts/expiry-policy#invalid).
+
+> **Tip**
+>
+> [Queries](https://dataclient.io/rest/api/Query) are a great companion to efficiently render aggregate computations like those that use [groupBy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy#browser_compatibility),
+> [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce), and [filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter).
+
+## Usage
+
+```ts title="Post"
+import { Entity, schema } from '@data-client/rest';
+
+export class Post extends Entity {
+  id = 0;
+  author = { id: 0 };
+  title = '';
+  body = '';
+  votes = 0;
+
+  static key = 'Post';
+
+  static schema = {
+    author: EntityMixin(
+      class User {
+        id = 0;
+      },
+    ),
+  };
+
+  get img() {
+    return `//loremflickr.com/96/72/kitten,cat?lock=${this.id % 16}`;
+  }
+}
+```
+
+```ts title="PostResource" {15-22}
+import { resource } from '@data-client/rest';
+import { Post } from './Post';
+
+export { Post };
+
+export const PostResource = resource({
+  path: '/posts/:id',
+  searchParams: {} as { userId?: string | number } | undefined,
+  schema: Post,
+}).extend('vote', {
+  path: '/posts/:id/vote',
+  method: 'POST',
+  body: undefined,
+  schema: Post,
+  getOptimisticResponse(snapshot, { id }) {
+    const post = snapshot.get(Post, { id });
+    if (!post) throw snapshot.abort;
+    return {
+      id,
+      votes: post.votes + 1,
+    };
+  },
+});
+```
+
+```html title="PostItem.vue" {9}
+<script setup lang="ts">
+  import { useController } from '@data-client/vue';
+  import { PostResource, type Post } from './PostResource';
+
+  const props = defineProps<{ post: Post }>();
+  const ctrl = useController();
+
+  const handleVote = () => {
+    ctrl.fetch(PostResource.vote, { id: props.post.id });
+  };
+</script>
+
+<template>
+  <div>
+    <div class="voteBlock">
+      <small class="vote">
+        <button class="up" @click="handleVote">&nbsp;</button>
+        {{ post.votes }}
+      </small>
+      <img :src="post.img" width="70" height="52" />
+    </div>
+    <div>
+      <h4>{{ post.title }}</h4>
+      <p>{{ post.body }}</p>
+    </div>
+  </div>
+</template>
+```
+
+```html title="TotalVotes.vue" {13}
+<script setup lang="ts">
+  import { Query } from '@data-client/rest';
+  import { useQuery } from '@data-client/vue';
+  import { PostResource } from './PostResource';
+
+  const queryTotalVotes = new Query(
+    PostResource.getList.schema,
+    posts => posts.reduce((total, post) => total + post.votes, 0),
+  );
+
+  const props = defineProps<{ userId: number }>();
+  const totalVotes = useQuery(queryTotalVotes, () => ({ userId: props.userId }));
+</script>
+
+<template>
+  <center>
+    <small>{{ totalVotes }} votes total</small>
+  </center>
+</template>
+```
+
+```html title="PostList.vue"
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { PostResource } from './PostResource';
+  import PostItem from './PostItem.vue';
+  import TotalVotes from './TotalVotes.vue';
+
+  const userId = 2;
+  const posts = await useSuspense(PostResource.getList, { userId });
+</script>
+
+<template>
+  <div>
+    <PostItem v-for="post in posts" :key="post.pk()" :post="post" />
+    <TotalVotes :userId="userId" />
+  </div>
+</template>
+```
+
+See [truthiness narrowing](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#truthiness-narrowing) for
+more information about type handling
+
+## Types
+
+```typescript
+function useQuery<S extends Queryable>(
+  schema: S,
+  ...args: MaybeRefsOrGetters<SchemaArgs<S>>
+): ComputedRef<DenormalizeNullable<S> | undefined>;
+```
+
+Arguments can be plain values, [refs](https://vuejs.org/api/reactivity-core.html#ref) (including [computed](https://vuejs.org/api/reactivity-core.html#computed)), or getter
+functions like `() => ({ id: props.id })`. A plain object like `{ id: props.id }` is read once and won't
+follow prop or route changes, so use a getter or `computed` when an argument can change.
+
+The result updates when the arguments change.
+
+### Queryable
+
+[Queryable](https://dataclient.io/rest/api/schema#queryable) schemas require an `queryKey()` method that returns something. These include
+[Entity](https://dataclient.io/rest/api/Entity), [All](https://dataclient.io/rest/api/All), [Collection](https://dataclient.io/rest/api/Collection), [Query](https://dataclient.io/rest/api/Query),
+[Union](https://dataclient.io/rest/api/Union), and [Scalar](https://dataclient.io/rest/api/Scalar). [Lazy](https://dataclient.io/rest/api/Lazy) fields produce a Queryable via their [`.query`](https://dataclient.io/rest/api/Lazy#query) accessor.
+
+```ts
+interface Queryable {
+  queryKey(
+    args: readonly any[],
+    queryKey: (...args: any) => any,
+    getEntity: GetEntity,
+    getIndex: GetIndex,
+    // Must be non-void
+  ): {};
+}
+```
+
+## Examples
+
+### Sorting & Filtering
+
+[Query](https://dataclient.io/rest/api/Query) provides programmatic access to the Reactive Data Client store.
+
+```ts title="UserResource"
+export class User extends Entity {
+  id = '';
+  name = '';
+  isAdmin = false;
+
+  static key = 'User';
+}
+export const UserResource = resource({
+  path: '/users/:id',
+  schema: User,
+});
+```
+
+```html title="UsersPage.vue" {22}
+<script setup lang="ts">
+  import { Query, All } from '@data-client/rest';
+  import { useQuery, useFetch } from '@data-client/vue';
+  import { UserResource, User } from './UserResource';
+
+  interface Args {
+    asc: boolean;
+    isAdmin?: boolean;
+  }
+  const sortedUsers = new Query(
+    new All(User),
+    (entries, { asc, isAdmin }: Args = { asc: false }) => {
+      let sorted = [...entries].sort((a, b) =>
+        a.name.localeCompare(b.name),
+      );
+      if (isAdmin !== undefined)
+        sorted = sorted.filter(user => user.isAdmin === isAdmin);
+      if (asc) return sorted;
+      return sorted.reverse();
+    },
+  );
+
+  useFetch(UserResource.getList);
+  const users = useQuery(sortedUsers, { asc: true });
+</script>
+
+<template>
+  <div v-if="!users">No users in cache yet</div>
+  <div v-else>
+    <div v-for="user in users" :key="user.pk()">{{ user.name }}</div>
+  </div>
+</template>
+```
+
+### Lazy relationships
+
+[Lazy](https://dataclient.io/rest/api/Lazy) fields keep raw IDs during parent denormalization. Use [`.query`](https://dataclient.io/rest/api/Lazy#query) with `useQuery` to resolve them on demand,
+isolating re-renders to only the components that need the related data.
+
+```ts title="Resources"
+export class Building extends Entity {
+  id = '';
+  name = '';
+
+  static key = 'Building';
+}
+
+export class Department extends Entity {
+  id = '';
+  name = '';
+  buildings: string[] = [];
+
+  static schema = {
+    buildings: new Lazy([Building]),
+  };
+  static key = 'Department';
+}
+
+export const DepartmentResource = resource({
+  path: '/departments/:id',
+  schema: Department,
+});
+```
+
+```html title="BuildingList.vue" {8-11}
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { useQuery } from '@data-client/vue';
+  import { Department } from './Resources';
+
+  const props = defineProps<{ dept: Department }>();
+
+  const buildings = useQuery(
+    Department.schema.buildings.query,
+    computed(() => props.dept.buildings),
+  );
+</script>
+
+<template>
+  <span v-if="buildings">{{ buildings.map(b => b.name).join(', ') }}</span>
+</template>
+```
+
+```html title="DepartmentsPage.vue"
+<script setup lang="ts">
+  import { All } from '@data-client/rest';
+  import { useQuery, useFetch } from '@data-client/vue';
+  import { DepartmentResource, Department } from './Resources';
+  import BuildingList from './BuildingList.vue';
+
+  useFetch(DepartmentResource.getList);
+  const departments = useQuery(new All(Department));
+</script>
+
+<template>
+  <div v-if="!departments">Loading...</div>
+  <div v-else>
+    <div v-for="dept in departments" :key="dept.pk()">
+      <strong>{{ dept.name }}</strong>: <BuildingList :dept="dept" />
+    </div>
+  </div>
+</template>
+```
diff --git a/.agents/skills/data-client-vue/references/useSubscription.md b/.agents/skills/data-client-vue/references/useSubscription.md
deleted file mode 120000
index 9035c9f29606..000000000000
--- a/.agents/skills/data-client-vue/references/useSubscription.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../../docs/core/api/useSubscription.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/useSubscription.md b/.agents/skills/data-client-vue/references/useSubscription.md
new file mode 100644
index 000000000000..9ddb3aad9f0f
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/useSubscription.md
@@ -0,0 +1,111 @@
+<!-- Generated by `yarn build:skills` from docs/core/api/useSubscription.md (vue). Edit the source doc, not this file. -->
+
+# useSubscription()
+
+Great for keeping resources up-to-date with frequent changes.
+
+When using the default [polling subscriptions](https://dataclient.io/vue/api/PollingSubscription), frequency must be set in
+[Endpoint](https://dataclient.io/rest/api/Endpoint), otherwise will have no effect.
+
+> **Tip**
+>
+> [useLive()](./useLive.md) is a terser way to use in combination with [useSuspense()](./useSuspense.md),
+
+## Usage
+
+```typescript title="api/Price"
+import { RestEndpoint, Entity } from '@data-client/rest';
+
+export class Price extends Entity {
+  symbol = '';
+  price = '0.0';
+  // ...
+
+  pk() {
+    return this.symbol;
+  }
+}
+
+export const getPrice = new RestEndpoint({
+  urlPrefix: 'http://test.com',
+  path: '/price/:symbol',
+  schema: Price,
+  pollFrequency: 5000,
+});
+```
+
+```html title="MasterPrice.vue"
+<script setup lang="ts">
+  import { useSuspense, useSubscription } from '@data-client/vue';
+  import { getPrice } from 'api/Price';
+
+  const props = defineProps<{ symbol: string }>();
+  const price = await useSuspense(getPrice, () => ({ symbol: props.symbol }));
+  useSubscription(getPrice, () => ({ symbol: props.symbol }));
+  // ...
+</script>
+```
+
+## Behavior
+
+> **Tip: Conditional Dependencies**
+>
+> Use `null` as the second argument to any Data Client hook means "do nothing."
+>
+> ```typescript
+> // todo could be undefined if id is undefined
+> const todo = useSubscription(
+>   TodoResource.get,
+>   computed(() => (id.value ? { id: id.value } : null)),
+> );
+> ```
+
+The subscription is created when the component is set up and removed when it unmounts. When
+an argument passed as a [ref](https://vuejs.org/api/reactivity-core.html#ref) changes, the previous
+subscription is removed and a new one is created for the new arguments.
+
+## Types
+
+```typescript
+function useSubscription(
+  endpoint: ReadEndpoint,
+  ...args: MaybeRefsOrGetters<Parameters<typeof endpoint>> | [null]
+): void;
+```
+
+Arguments can be plain values, [refs](https://vuejs.org/api/reactivity-core.html#ref) (including [computed](https://vuejs.org/api/reactivity-core.html#computed)), or getter
+functions like `() => ({ id: props.id })`. A plain object like `{ id: props.id }` is read once and won't
+follow prop or route changes, so use a getter or `computed` when an argument can change.
+
+## Examples
+
+### Only subscribe while element is visible
+
+```html title="MasterPrice.vue"
+<script setup lang="ts">
+  import { computed, useTemplateRef } from 'vue';
+  import { useElementVisibility } from '@vueuse/core';
+  import { useSuspense, useSubscription } from '@data-client/vue';
+  import { getPrice } from 'api/Price';
+
+  const props = defineProps<{ symbol: string }>();
+  const price = await useSuspense(getPrice, () => ({ symbol: props.symbol }));
+  const el = useTemplateRef('el');
+  const isVisible = useElementVisibility(el);
+  // null params means don't subscribe
+  useSubscription(
+    getPrice,
+    computed(() => (isVisible.value ? { symbol: props.symbol } : null)),
+  );
+</script>
+
+<template>
+  <div ref="el">{{ price.price }}</div>
+</template>
+```
+
+When `null` is sent as the second argument, the subscription is deactivated. Of course,
+if other components are still subscribed the data updates will still be active.
+
+[useElementVisibility()](https://vueuse.org/core/useElementVisibility/) from VueUse uses [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API), which is very performant. [Template refs](https://vuejs.org/guide/essentials/template-refs.html) allow
+us to access the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model).
diff --git a/.agents/skills/data-client-vue/references/useSuspense.md b/.agents/skills/data-client-vue/references/useSuspense.md
deleted file mode 120000
index 4542002302e8..000000000000
--- a/.agents/skills/data-client-vue/references/useSuspense.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../../docs/core/api/useSuspense.md
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/useSuspense.md b/.agents/skills/data-client-vue/references/useSuspense.md
new file mode 100644
index 000000000000..bdbf0e3e4995
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/useSuspense.md
@@ -0,0 +1,418 @@
+<!-- Generated by `yarn build:skills` from docs/core/api/useSuspense.md (vue). Edit the source doc, not this file. -->
+
+# useSuspense()
+
+High performance async data rendering without overfetching.
+
+[await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) `useSuspense()` in Vue components. This means the remainder of the component only runs after the data has loaded, avoiding the complexity of handling loading and error conditions. Instead, fallback handling is
+[centralized](./data-dependency.md#boundaries) with Vue's built-in [Suspense](https://vuejs.org/guide/built-ins/suspense.html).
+
+`useSuspense()` is reactive to data [mutations](./mutations.md); rerendering only when necessary.
+
+## Usage
+
+**Rest**
+
+```typescript title="ProfileResource"
+import { Entity, resource } from '@data-client/rest';
+
+export class Profile extends Entity {
+  id: number | undefined = undefined;
+  avatar = '';
+  fullName = '';
+  bio = '';
+
+  static key = 'Profile';
+}
+
+export const ProfileResource = resource({
+  path: '/profiles/:id',
+  schema: Profile,
+});
+```
+
+```html title="ProfileDetail.vue"
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { ProfileResource } from './ProfileResource';
+
+  const profile = await useSuspense(ProfileResource.get, { id: 1 });
+</script>
+
+<template>
+  <div class="listItem">
+    <Avatar :src="profile.avatar" />
+    <div>
+      <h4>{{ profile.fullName }}</h4>
+      <p>{{ profile.bio }}</p>
+    </div>
+  </div>
+</template>
+```
+
+**Promise**
+
+```typescript title="Profile"
+import { Endpoint } from '@data-client/endpoint';
+
+export const getProfile = new Endpoint(
+  (id: number) =>
+    Promise.resolve({
+      id,
+      fullName: 'Jing Chen',
+      bio: 'Creator of Flux Architecture',
+      avatar: 'https://avatars.githubusercontent.com/u/5050204?v=4',
+    }),
+  {
+    key(id) {
+      return `getProfile${id}`;
+    },
+  },
+);
+```
+
+```html title="ProfileDetail.vue"
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { getProfile } from './Profile';
+
+  const profile = await useSuspense(getProfile, 1);
+</script>
+
+<template>
+  <div class="listItem">
+    <Avatar :src="profile.avatar" />
+    <div>
+      <h4>{{ profile.fullName }}</h4>
+      <p>{{ profile.bio }}</p>
+    </div>
+  </div>
+</template>
+```
+
+## Behavior
+
+Cache policy is [Stale-While-Revalidate](https://tools.ietf.org/html/rfc5861) by default but also [configurable](https://dataclient.io/vue/concepts/expiry-policy).
+
+| Expiry Status | Fetch           | Suspend | Error             | Conditions                                                                                                                                                                                                      |
+| ------------- | --------------- | ------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Invalid       | yes<sup>1</sup> | yes     | no                | not in store, [deletion](https://dataclient.io/rest/api/resource#delete), [invalidation](./Controller.md#invalidate), [invalidIfStale](https://dataclient.io/vue/concepts/expiry-policy#endpointinvalidifstale) |
+| Stale         | yes<sup>1</sup> | no      | no                | (first-render, arg change) & [expiry < now](https://dataclient.io/vue/concepts/expiry-policy)                                                                                                                   |
+| Valid         | no              | no      | maybe<sup>2</sup> | fetch completion                                                                                                                                                                                                |
+|               | no              | no      | no                | `null` used as second argument                                                                                                                                                                                  |
+
+> **Note**
+>
+> 1. Identical fetches are automatically deduplicated
+> 2. [Hard errors](https://dataclient.io/vue/concepts/error-policy#hard) to be [caught](./data-dependency.md#async-fallbacks) by [onErrorCaptured()](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured)
+
+> **Tip: Conditional Dependencies**
+>
+> Use `null` as the second argument to any Data Client hook means "do nothing."
+>
+> ```typescript
+> // todo could be undefined if id is undefined
+> const todo = await useSuspense(
+>   TodoResource.get,
+>   computed(() => (id.value ? { id: id.value } : null)),
+> );
+> ```
+
+## Types
+
+```typescript
+function useSuspense(
+  endpoint: ReadEndpoint,
+  ...args: MaybeRefsOrGetters<Parameters<typeof endpoint>> | [null]
+): Promise<DeepReadonly<ComputedRef<Denormalize<typeof endpoint.schema>>>>;
+```
+
+Arguments can be plain values, [refs](https://vuejs.org/api/reactivity-core.html#ref) (including [computed](https://vuejs.org/api/reactivity-core.html#computed)), or getter
+functions like `() => ({ id: props.id })`. A plain object like `{ id: props.id }` is read once and won't
+follow prop or route changes, so use a getter or `computed` when an argument can change.
+
+The result updates when the arguments change.
+While data for new arguments loads, the result keeps the previous data instead of becoming `undefined`.
+If that fetch fails, reading the result throws the error (per its [error policy](https://dataclient.io/vue/concepts/error-policy)), so it reaches
+[onErrorCaptured()](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured).
+
+## Examples
+
+### List
+
+```typescript title="ProfileResource"
+import { Entity, resource } from '@data-client/rest';
+
+export class Profile extends Entity {
+  id: number | undefined = undefined;
+  avatar = '';
+  fullName = '';
+  bio = '';
+
+  static key = 'Profile';
+}
+
+export const ProfileResource = resource({
+  path: '/profiles/:id',
+  schema: Profile,
+});
+```
+
+```html title="ProfileList.vue"
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { ProfileResource } from './ProfileResource';
+
+  const profiles = await useSuspense(ProfileResource.getList);
+</script>
+
+<template>
+  <div>
+    <div class="listItem" v-for="profile in profiles" :key="profile.pk()">
+      <Avatar :src="profile.avatar" />
+      <div>
+        <h4>{{ profile.fullName }}</h4>
+        <p>{{ profile.bio }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+### Pagination
+
+Reactive [pagination](https://dataclient.io/rest/guides/pagination) is achieved with [mutable schemas](https://dataclient.io/rest/api/Collection)
+
+```ts title="User"
+import { Entity } from '@data-client/rest';
+
+export class User extends Entity {
+  id = 0;
+  name = '';
+  username = '';
+  email = '';
+  phone = '';
+  website = '';
+
+  get profileImage() {
+    return `https://i.pravatar.cc/64?img=${this.id + 4}`;
+  }
+
+  pk() {
+    return this.id;
+  }
+  static key = 'User';
+}
+```
+
+```ts title="Post" {22,24}
+import { Entity, resource, Collection } from '@data-client/rest';
+import { User } from './User';
+
+export class Post extends Entity {
+  id = 0;
+  author = User.fromJS();
+  title = '';
+  body = '';
+
+  pk() {
+    return this.id;
+  }
+  static key = 'Post';
+
+  static schema = {
+    author: User,
+  };
+}
+export const PostResource = resource({
+  path: '/posts/:id',
+  schema: Post,
+  paginationField: 'cursor',
+}).extend('getList', {
+  schema: { posts: new Collection([Post]), cursor: '' },
+});
+```
+
+```html title="PostItem.vue"
+<script setup lang="ts">
+  import { type Post } from './Post';
+
+  defineProps<{ post: Post }>();
+</script>
+
+<template>
+  <div class="listItem spaced">
+    <Avatar :src="post.author.profileImage" />
+    <div>
+      <h4>{{ post.title }}</h4>
+      <small>by {{ post.author.name }}</small>
+    </div>
+  </div>
+</template>
+```
+
+```html title="LoadMore.vue"
+<script setup lang="ts">
+  import { useController, useLoading } from '@data-client/vue';
+  import { PostResource } from './Post';
+
+  const props = defineProps<{ cursor: string }>();
+  const ctrl = useController();
+  const [loadPage, isPending] = useLoading(() =>
+    ctrl.fetch(PostResource.getList.getPage, { cursor: props.cursor }),
+  );
+</script>
+
+<template>
+  <center>
+    <button @click="loadPage" :disabled="isPending">
+      {{ isPending ? '...' : 'Load more' }}
+    </button>
+  </center>
+</template>
+```
+
+```html title="PostList.vue"
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import PostItem from './PostItem.vue';
+  import LoadMore from './LoadMore.vue';
+  import { PostResource } from './Post';
+
+  const data = await useSuspense(PostResource.getList);
+</script>
+
+<template>
+  <div>
+    <PostItem v-for="post in data.posts" :key="post.pk()" :post="post" />
+    <LoadMore v-if="data.cursor" :cursor="data.cursor" />
+  </div>
+</template>
+```
+
+### Sequential
+
+When fetch parameters depend on data from another resource.
+
+```html
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { useSuspense } from '@data-client/vue';
+  import { PostResource, UserResource } from './Resources';
+
+  const props = defineProps<{ id: string }>();
+  const post = await useSuspense(PostResource.get, () => ({ id: props.id }));
+  const author = await useSuspense(UserResource.get, () => ({
+    id: post.value.userId,
+  }));
+</script>
+```
+
+### Conditional
+
+`null` will avoid binding and fetching data
+
+```ts title="Resources"
+import { Entity, resource } from '@data-client/rest';
+
+export class Post extends Entity {
+  id = 0;
+  userId = 0;
+  title = '';
+  body = '';
+
+  static key = 'Post';
+}
+export const PostResource = resource({
+  path: '/posts/:id',
+  schema: Post,
+});
+
+export class User extends Entity {
+  id = 0;
+  name = '';
+  username = '';
+  email = '';
+  phone = '';
+  website = '';
+
+  get profileImage() {
+    return `https://i.pravatar.cc/64?img=${this.id + 4}`;
+  }
+
+  static key = 'User';
+}
+export const UserResource = resource({
+  urlPrefix: 'https://jsonplaceholder.typicode.com',
+  path: '/users/:id',
+  schema: User,
+});
+```
+
+```html title="PostWithAuthor.vue" {10-16}
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { useSuspense } from '@data-client/vue';
+  import { PostResource, UserResource } from './Resources';
+
+  const props = defineProps<{ id: string }>();
+  const post = await useSuspense(PostResource.get, () => ({ id: props.id }));
+  const author = await useSuspense(
+    UserResource.get,
+    computed(() =>
+      post.value.userId
+        ? {
+            id: post.value.userId,
+          }
+        : null,
+    ),
+  );
+  // author as ComputedRef<User | undefined>
+</script>
+
+<template>
+  <div v-if="author">
+    <!-- render author -->
+  </div>
+</template>
+```
+
+### Embedded data
+
+When entities are stored in [nested structures](https://dataclient.io/rest/guides/relational-data#nesting), that structure will remain.
+
+```typescript title="api/Post" {12-16}
+export class PaginatedPost extends Entity {
+  id = '';
+  title = '';
+  content = '';
+
+  static key = 'PaginatedPost';
+}
+
+export const getPosts = new RestEndpoint({
+  path: '/post',
+  searchParams: { page: '' },
+  schema: {
+    posts: new Collection([PaginatedPost]),
+    nextPage: '',
+    lastPage: '',
+  },
+});
+```
+
+```html title="ArticleList.vue"
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { getPosts } from './api/Post';
+
+  const props = defineProps<{ page: string }>();
+  const data = await useSuspense(getPosts, () => ({ page: props.page }));
+</script>
+
+<template>
+  <div>
+    <div v-for="post in data.posts" :key="post.pk()">{{ post.title }}</div>
+  </div>
+</template>
+```

From 826baf6b73a27593c737f6fc266035064fd82f6d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 5 Oct 2026 03:28:11 +0000
Subject: [PATCH 14/15] docs(skills): Generate _vueArgs reference; copy Vue
 test utilities guide

Symlinked references are rejected now, so data-client-vue lists _vueArgs in
references.json, and data-client-vue-testing keeps the Vue test utilities
guide as a hand-written reference (the generator only reads docs/).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WEpX2AVQj3Xmn2Q51om3J4
---
 .../data-client-vue-testing/references.json   |   3 +-
 .../references/vue-test-utilities.md          | 307 ++++++++++++++++++
 .../skills/data-client-vue/references.json    |   1 +
 .../data-client-vue/references/_vueArgs.md    |   6 +-
 4 files changed, 314 insertions(+), 3 deletions(-)
 create mode 100644 .agents/skills/data-client-vue-testing/references/vue-test-utilities.md
 mode change 120000 => 100644 .agents/skills/data-client-vue/references/_vueArgs.md

diff --git a/.agents/skills/data-client-vue-testing/references.json b/.agents/skills/data-client-vue-testing/references.json
index 9dab65c84d54..3e2b9c7b8c4d 100644
--- a/.agents/skills/data-client-vue-testing/references.json
+++ b/.agents/skills/data-client-vue-testing/references.json
@@ -3,7 +3,6 @@
     "vue"
   ],
   "docs": {
-    "Fixtures.md": "docs/core/api/Fixtures.md",
-    "vue-test-utilities.md": "packages/vue/src/test/README.md"
+    "Fixtures.md": "docs/core/api/Fixtures.md"
   }
 }
diff --git a/.agents/skills/data-client-vue-testing/references/vue-test-utilities.md b/.agents/skills/data-client-vue-testing/references/vue-test-utilities.md
new file mode 100644
index 000000000000..b9a9cd50af35
--- /dev/null
+++ b/.agents/skills/data-client-vue-testing/references/vue-test-utilities.md
@@ -0,0 +1,307 @@
+# Vue Data Client Testing Utilities
+
+This package provides testing utilities for Vue applications using `@data-client/vue`, similar to `@data-client/test` for React.
+
+## Installation
+
+```bash
+npm install @data-client/vue
+```
+
+## Usage
+
+### Basic Component Testing
+
+```typescript
+import { mountDataClient } from '@data-client/vue/test';
+import { defineComponent, h } from 'vue';
+import { MyResource } from './resources';
+
+const TestComponent = defineComponent({
+  setup() {
+    return () => h('div', 'Hello World');
+  },
+});
+
+const { wrapper, controller, cleanup } = mountDataClient(TestComponent, {
+  initialFixtures: [
+    {
+      endpoint: MyResource.get,
+      args: [{ id: 1 }],
+      response: { id: 1, name: 'Test' },
+    },
+  ],
+});
+
+// Your tests here
+expect(wrapper.text()).toBe('Hello World');
+
+// Clean up after test
+cleanup();
+```
+
+### Testing with Suspense (Automatic)
+
+Suspense is automatically integrated into `mountDataClient`. Your components will automatically suspend and show a fallback while data is loading:
+
+```typescript
+import { mountDataClient } from '@data-client/vue/test';
+import { defineComponent, h } from 'vue';
+import { MyResource } from './resources';
+
+const AsyncComponent = defineComponent({
+  async setup() {
+    const data = await useSuspense(MyResource.get, { id: 1 });
+    return () => h('div', data.value.name);
+  },
+});
+
+const { wrapper, controller, cleanup } = mountDataClient(AsyncComponent);
+
+// Initially shows suspense fallback
+expect(wrapper.find('[data-testid="suspense-fallback"]').exists()).toBe(true);
+
+// Wait for data to load
+await flushUntil(wrapper, () => wrapper.find('div').exists());
+
+// Now shows the actual content
+expect(wrapper.text()).toBe('Test');
+
+cleanup();
+```
+
+### Composable Testing
+
+```typescript
+import { renderDataCompose } from '@data-client/vue/test';
+import { reactive } from 'vue';
+
+const useMyComposable = (props: { id: number }) => {
+  const data = useSuspense(MyResource.get, { id: props.id });
+  return { data, isLoading: false };
+};
+
+const props = reactive({ id: 1 });
+const { result, controller, cleanup, waitForNextUpdate } = renderDataCompose(useMyComposable, {
+  props,
+  initialFixtures: [
+    {
+      endpoint: MyResource.get,
+      args: [{ id: 1 }],
+      response: { id: 1, name: 'Test' },
+    },
+  ],
+});
+
+// Initially suspended
+expect(result.current).toBeUndefined();
+
+// Wait for the composable to resolve
+await waitForNextUpdate();
+
+// Now should have the actual data (useSuspense returns a Promise that resolves to ComputedRef)
+expect(result.current).toBeDefined();
+expect(result.current).toBeInstanceOf(Promise);
+
+// Access the actual data
+const dataRef = await result.current;
+expect(dataRef.value).toBeDefined();
+
+// Update props reactively
+props.id = 2;
+
+cleanup();
+```
+
+### Testing with Reactive Props
+
+Components can receive reactive props that can be updated during tests:
+
+```typescript
+import { mountDataClient } from '@data-client/vue/test';
+import { defineComponent, h, reactive } from 'vue';
+import { MyResource } from './resources';
+
+const ArticleComponent = defineComponent({
+  props: {
+    id: {
+      type: Number,
+      required: true,
+    },
+  },
+  async setup(props) {
+    // a getter so the fetch follows props.id
+    const article = await useSuspense(MyResource.get, () => ({ id: props.id }));
+    return () => h('div', article.value.title);
+  },
+});
+
+// Create a reactive props ref
+const props = reactive({ id: 1 });
+
+const { wrapper, cleanup } = mountDataClient(ArticleComponent, {
+  props,
+  resolverFixtures: [
+    {
+      endpoint: MyResource.get,
+      response: (request) => ({
+        id: request.args[0].id,
+        title: `Article ${request.args[0].id}`,
+      }),
+    },
+  ],
+});
+
+// Wait for initial render
+await flushUntil(wrapper, () => wrapper.find('div').exists());
+expect(wrapper.text()).toBe('Article 1');
+
+// Update props reactively - component will re-render with new data
+props.id = 2;
+await nextTick();
+
+// Wait for new data to load
+await flushUntil(wrapper, () => wrapper.text() === 'Article 2');
+expect(wrapper.text()).toBe('Article 2');
+
+cleanup();
+```
+
+### Using Resolver Fixtures
+
+```typescript
+const { wrapper, controller, cleanup } = mountDataClient(TestComponent, {
+  resolverFixtures: [
+    {
+      endpoint: MyResource.get,
+      response: (request) => {
+        return {
+          id: request.args[0].id,
+          name: `Dynamic ${request.args[0].id}`,
+        };
+      },
+    },
+  ],
+});
+
+// Test dynamic responses
+const result = await controller.fetch(MyResource.get, { id: 123 });
+expect(result.name).toBe('Dynamic 123');
+```
+
+## API Reference
+
+### `mountDataClient(component, options)`
+
+Renders a Vue component with DataClient provider for testing.
+
+**Parameters:**
+- `component`: Vue component to render
+- `options`: Configuration options
+
+**Returns:**
+- `wrapper`: Vue Test Utils wrapper
+- `controller`: DataClient controller instance
+- `app`: Vue app instance
+- `cleanup`: Function to clean up resources
+- `allSettled`: Function to wait for all pending promises
+
+### `renderDataCompose(composable, options)`
+
+Renders a Vue composable with DataClient provider for testing.
+
+**Parameters:**
+- `composable`: Vue composable function
+- `options`: Configuration options
+
+**Returns:**
+- `result`: Object with `current` property containing the composable's return value (`undefined` when suspended, Promise when resolved)
+- `wrapper`: Vue Test Utils wrapper
+- `controller`: DataClient controller instance
+- `cleanup`: Function to clean up resources
+- `allSettled`: Function to wait for all pending promises
+- `waitForNextUpdate`: Function to wait for the composable to resolve from suspended state
+
+### Options
+
+```typescript
+interface RenderDataClientOptions<P = any> {
+  props?: Reactive<P>;                        // Reactive props ref to pass to component
+  initialFixtures?: readonly Fixture[];  // Initial data fixtures
+  resolverFixtures?: readonly (Fixture | Interceptor)[]; // Dynamic response fixtures
+  getInitialInterceptorData?: () => any; // Initial data for interceptors
+  managers?: Manager[];                  // Custom managers
+  initialState?: State<unknown>;         // Custom initial state
+  gcPolicy?: GCInterface;                // Custom garbage collection policy
+  wrapper?: any;                         // Custom wrapper component
+}
+```
+
+### Fixture Types
+
+```typescript
+interface Fixture {
+  endpoint: FixtureEndpoint;
+  args: any[];
+  response: any;
+  error?: boolean;
+}
+
+interface Interceptor {
+  endpoint: FixtureEndpoint;
+  response: (request: {
+    body?: any;
+    headers?: Record<string, string>;
+    url: string;
+    method: string;
+    args: any[];
+  }) => any | Promise<any>;
+  error?: boolean;
+}
+```
+
+## Best Practices
+
+1. **Always call cleanup()** after your tests to prevent memory leaks
+2. **Use fixtures** instead of mocking network requests when possible
+3. **Test both success and error cases** using the `error` property in fixtures
+4. **Use resolver fixtures** for dynamic responses based on request parameters
+5. **Leverage the controller** for testing mutations and state updates
+6. **Suspense is automatic** - no need to manually wrap components in Suspense
+7. **Use reactive props** - Pass a `reactive` in the `props` option and set its members to change component props
+8. **Vue Suspense behavior** - Vue's `useSuspense` returns a Promise that suspends when data is missing, then resolves to a ComputedRef
+9. **Reactive props with async setup** - Async setup runs once per component instance, so pass prop-derived arguments as a getter (`() => ({ id: props.id })`); a plain object is read once and won't follow prop changes.
+
+## Migration from Manual Setup
+
+If you were previously setting up DataClient manually in tests:
+
+```typescript
+// Before
+const wrapper = mount(MyComponent, {
+  global: {
+    plugins: [
+      [
+        DataClientPlugin,
+        {
+          managers: [new NetworkManager()],
+          initialState: mockState,
+        },
+      ],
+    ],
+  },
+});
+
+// After
+const { wrapper, controller, cleanup } = mountDataClient(MyComponent, {
+  initialFixtures: [
+    {
+      endpoint: MyResource.get,
+      args: [{ id: 1 }],
+      response: { id: 1, name: 'Test' },
+    },
+  ],
+});
+```
+
+This approach is more declarative, easier to maintain, and provides better test isolation.
diff --git a/.agents/skills/data-client-vue/references.json b/.agents/skills/data-client-vue/references.json
index 9480208b976b..35c246e63c15 100644
--- a/.agents/skills/data-client-vue/references.json
+++ b/.agents/skills/data-client-vue/references.json
@@ -10,6 +10,7 @@
     "_pagination.md": "docs/core/shared/_pagination.mdx",
     "_useLive.md": "docs/core/shared/_useLive.mdx",
     "_useLoading.md": "docs/core/shared/_useLoading.mdx",
+    "_vueArgs.md": "docs/core/shared/_vueArgs.mdx",
     "data-dependency.md": "docs/core/getting-started/data-dependency.md",
     "getDefaultManagers.md": "docs/core/api/getDefaultManagers.md",
     "installation.md": "docs/core/getting-started/installation.md",
diff --git a/.agents/skills/data-client-vue/references/_vueArgs.md b/.agents/skills/data-client-vue/references/_vueArgs.md
deleted file mode 120000
index 00a326155d94..000000000000
--- a/.agents/skills/data-client-vue/references/_vueArgs.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../../docs/core/shared/_vueArgs.mdx
\ No newline at end of file
diff --git a/.agents/skills/data-client-vue/references/_vueArgs.md b/.agents/skills/data-client-vue/references/_vueArgs.md
new file mode 100644
index 000000000000..b3e3e6504d6b
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/_vueArgs.md
@@ -0,0 +1,5 @@
+<!-- Generated by `yarn build:skills` from docs/core/shared/_vueArgs.mdx (vue). Edit the source doc, not this file. -->
+
+Arguments can be plain values, [refs](https://vuejs.org/api/reactivity-core.html#ref) (including [computed](https://vuejs.org/api/reactivity-core.html#computed)), or getter
+functions like `() => ({ id: props.id })`. A plain object like `{ id: props.id }` is read once and won't
+follow prop or route changes, so use a getter or `computed` when an argument can change.

From 0e3e0084315c47fd812aa8c996d457d6bfc28b21 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 5 Oct 2026 03:39:15 +0000
Subject: [PATCH 15/15] docs(skills): Drop stale :::vue note from
 data-client-vue references

Its references are generated for Vue only, so they have no framework sections.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WEpX2AVQj3Xmn2Q51om3J4
---
 .agents/skills/data-client-vue/SKILL.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/.agents/skills/data-client-vue/SKILL.md b/.agents/skills/data-client-vue/SKILL.md
index 98663a149d03..1ddcf0360a45 100644
--- a/.agents/skills/data-client-vue/SKILL.md
+++ b/.agents/skills/data-client-vue/SKILL.md
@@ -166,8 +166,7 @@ This is useful for websockets, SSE, logging, etc. Pass them to `DataClientPlugin
 
 # References
 
-For detailed API documentation, see the [references](references/) directory. They cover React and Vue;
-read the `:::vue` sections.
+For detailed API documentation, see the [references](references/) directory:
 
 - [useSuspense](references/useSuspense.md);[_pagination.md](references/_pagination.md) - Fetch with Suspense
 - [_vueArgs](references/_vueArgs.md) - Plain, ref, computed, and getter arguments