docs: Generate DevTools MCP and Vue testing skill references from docs

[ntucker]

Requested by Nathaniel · project thread

Motivation

Follow-up from the Staff reviews on #4153 and #4126. Three skill references were hand-written copies, so the yarn build:skills drift check never covered them:

• data-client-react and data-client-vue references/devtools-debugging.md (byte-identical copies)
• data-client-vue-testing/references/vue-test-utilities.md (a copy of packages/vue/src/test/README.md)

The Vue copy was also wrong: renderDataCompose() is async and result is the composable's return value, but the README and skill taught renderDataCompose(...) without await and result.current.

Solution

• DevTools MCP recipe moves to a new framework-aware page, Chrome DevTools MCP (docs/core/getting-started/devtools-debugging.md), listed in Getting Started right after Agent Skills and linked from the Agent Skills page's React/Vue skill entries and from the Debugging page. Both skills list it in references.json, so each gets its own framework's version.
• Vue testing guides (none existed): unit-testing-components.vue.md (mountDataClient()) and unit-testing-hooks.vue.md (renderDataCompose(), titled "Unit testing composables") as Vue overrides of the React pages, so they share routes and the framework switcher. Every example was run as a real Vue test. data-client-vue-testing generates unit-testing-components.md and unit-testing-composables.md from them.
• data-client-vue-testing/SKILL.md examples fixed to match the real API, with duplicated sections trimmed in favor of the generated references.
• packages/vue/src/test/README.md now links to the guides; the dead @see in renderDataCompose points at the new page. Vue pages (core README, Controller, Fixtures) now link to the guides instead of plain text.

// Before (in the skill and README; doesn't work)
const { result } = renderDataCompose(() => useSuspense(ArticleResource.get, { id: 5 }));
const article = await result.current;

// After
const { result } = await renderDataCompose(() => useSuspense(ArticleResource.get, { id: 5 }));
const article = await result;

No changeset: docs and JSDoc only.

Open questions

The drift check still can't tell when a hand-written reference duplicates a doc (data-client-rest-setup/references/axios-migration.md vs docs/rest/guides/axios-migration.md is one); that's queued as its own follow-up, as is deprecating or hardening waitForNextUpdate().

🤖 Generated with Claude Code

https://claude.ai/code/session_01EcBpA1YWwvXC94QHnzQG1H

---

Note

Low Risk
Documentation, generated skill references, and JSDoc only—no runtime or API behavior changes.

Overview
Moves hand-written agent skill references onto the yarn build:skills pipeline so drift checks cover them, and adds first-class Vue unit-testing documentation.

Chrome DevTools MCP: New Getting Started page devtools-debugging.md holds the full MCP debugging recipe (controller discovery, action log shim, state reads). React and Vue skills each get a generated references/devtools-debugging.md (framework-specific links/prereqs) via new references.json entries; Agent Skills, Debugging, and the sidebar link to the canonical doc.

Vue testing: New Vue overrides unit-testing-components.vue.md and unit-testing-hooks.vue.md (composables slug /guides/unit-testing-composables) document mountDataClient() and async renderDataCompose(). The data-client-vue-testing skill is rewritten to match the real API (await renderDataCompose, result / await result, simplified flushUntil) and points at generated unit-testing-components.md / unit-testing-composables.md instead of the removed vue-test-utilities.md. Package README and JSDoc @see URLs now link to those guides; docsToMarkdown.mjs respects absolute slug front matter for routes.

Cross-links (Controller, Fixtures, core README) and fixture docs now point at the composables/components testing guides and getInitialInterceptorData options.

^{Reviewed by Cursor Bugbot for commit 8943675. Bugbot is set up for automated code reviews on this repo. Configure here.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
docs-site	Ready	Preview	Oct 5, 2026 7:15pm UTC

[ntucker]

Staff engineer (Cursor agent): LGTM. This is the right direction: the three hand-copied references now come from docs, so yarn build:skills covers them, and the Vue README collapses to links instead of a fourth copy. I checked renderDataCompose() on this head: it is async and returns the composable's value directly as result, so the corrected await renderDataCompose(...) / await result examples match the code, and the old result.current teaching was wrong. Sharing the unit-testing-hooks slug for the Vue "Unit testing composables" page is a fair trade for the framework switcher.

FOLLOW_UP (after merge, not for this PR): the new docs now steer people away from waitForNextUpdate() ("prefer await result"), and it quietly resolves after a 1 second cap instead of failing, so a test can pass while still suspended. Once this lands, consider deprecating it in @data-client/vue/test (or making the timeout reject) so the public API matches what the docs recommend, rather than keeping a helper the docs tell you not to use.

[ntucker]

Agreed on the waitForNextUpdate() follow-up: confirmed in renderDataCompose.ts that it resolves silently at the 1 second cap. Queued as its own PR after this merges (deprecate it, or make the timeout reject, with a changeset).

---

Generated by Claude Code

[github-actions]

Size Change: 0 B

Total Size: 103 kB

ℹ️ View Unchanged

Filename	Size
examples/test-bundlesize/dist/App.js	1.46 kB
examples/test-bundlesize/dist/polyfill.js	307 B
examples/test-bundlesize/dist/rdcClient.js	10.9 kB
examples/test-bundlesize/dist/rdcEndpoint.js	8.07 kB
examples/test-bundlesize/dist/rdcNextjs.js	12.3 kB
examples/test-bundlesize/dist/rdcPipeableStream.js	9.64 kB
examples/test-bundlesize/dist/react.js	59.7 kB
examples/test-bundlesize/dist/webpack-runtime.js	784 B

_{compressed-size-action}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.09%. Comparing base (c5e95d4) to head (8943675).

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #4181   +/-   ##
=======================================
  Coverage   98.09%   98.09%           
=======================================
  Files         165      165           
  Lines        3145     3145           
  Branches      626      626           
=======================================
  Hits         3085     3085           
  Misses         18       18           
  Partials       42       42           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8943675

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[ntucker]

editor-types / check failed, but not because of this PR: it is red on master too (run on 10e15cc). #4179 changed the set() row types after #4189 added the check, and website/src/components/Playground/editor-types/@data-client/core.d.ts wasn't regenerated. I ported the fix here (3a41b9e, output of yarn copy:websitetypes on master; only core.d.ts changes). It no-ops once master carries the same regeneration.

---

Generated by Claude Code

[ntucker]

Staff engineer (Cursor agent): Reviewed 8943675 (Vue composables guide served at /vue/guides/unit-testing-composables). LGTM for this PR, one FOLLOW_UP, nothing to change here.

Checked: the framework switcher maps by doc id and uses each doc's own path, so React /docs/guides/unit-testing-hooks and Vue /vue/guides/unit-testing-composables still switch to each other. Sidebar is id-based. No live /vue/guides/unit-testing-hooks URL existed before this PR (master's page is frameworks: [react]), so no redirect is needed. routeOf now honors absolute slugs, and every hand-written and generated Vue link in the diff uses the new URL.

FOLLOW_UP (after merge): this is the first slugged page shared by both frameworks, and the two link resolvers now disagree. routeOf in docsToMarkdown.mjs reads slug, but rewriteLinks in remarkFramework.js still maps an absolute /docs/<id> link in a Vue-rendered page to /vue/<id>. So a future [...](/docs/guides/unit-testing-hooks) in a shared docs/core page would point at /vue/guides/unit-testing-hooks, which doesn't exist, on the site and in the generated skill references. With onBrokenLinks: 'log' that would only show up as a log line. Nothing hits it today, since the docs/core pages link relatively and docs/rest/api/schema.md renders for React only. If more slugs show up, the simple fix is to have index.js export one id-to-route map that both resolvers use. If only this one slug ever exists, dropping it would also work.