Skip to main content

Data Client for Coding Agents

· 6 min read
Nathaniel Tucker
Nathaniel Tucker
Creator of Reactive Data Client

Coding agents write a lot of Data Client code now, and they write it better when they have the current docs and workflows instead of guessing from older releases. This release cycle makes that easier to set up for any agent.

New:

  • Claude Code plugin - claude plugin install react@data-client installs the skills for your framework
  • Vue skills - Vue projects get Vue composables and tests, not React hooks
  • llms.txt - Any agent can read the docs as markdown, and every page tells it where to look

Also available:

Get started​

Install the /data-client-setup skill and run it. It detects React or Vue and your API style (REST, GraphQL or custom), installs the skills your project needs, and sets up Data Client. For REST it hands off to data-client-rest-setup, which moves existing fetch or axios calls to endpoints (#4153).

npx skills add reactive/data-client --skill data-client-setup

Agent Skills lists every skill and how to install them all up front.

Claude Code plugin​

The Data Client repo is a Claude Code plugin marketplace. The core plugin holds the setup, REST, GraphQL, schema and Manager skills; the react and vue plugins add their framework's skills and pull in core; and the migrations plugin adds the upgrade skills (#4153). The Agent Skills page shows the same install with the skills CLI and OpenSkills.

claude plugin marketplace add reactive/data-client
claude plugin install react@data-client

Use vue@data-client for Vue, core@data-client for neither, and add migrations@data-client before an upgrade.

Vue skills​

Vue projects used to get the React hooks skill, so agents reached for React patterns. The data-client-vue skill writes DataClientPlugin and composable code, and debugs a running app (#4126). data-client-vue-testing writes renderDataCompose() and mountDataClient() tests (#4126) that follow the Vue testing guides (#4181).

llms.txt​

Agents without skills can read the docs as markdown, following the llms.txt convention (#4171, #4236):

Every page links its llms.txt in <head>, and every docs page links its markdown, so an agent given any page URL finds them on its own.

Skills match the docs​

Skill reference pages are now generated per framework from these docs, so they carry shared snippets like install commands and give Vue projects only Vue code. A CI check fails when a skill drifts from the docs, so skills stay current with each release (#4170).

Also available​

Skills for each task​

Beyond setup, there are skills for each part of a Data Client app. /data-client-setup installs the ones your project uses:

Browse them all at skills.sh/reactive/data-client.

Debug a running app​

Ask your agent "why didn't this refetch?" or "what's in the cache right now?" and it can check the running app instead of guessing from code. In dev mode, DevToolsManager puts each store's Controller on globalThis.__DC_CONTROLLERS__, so an agent connected through Chrome DevTools MCP, or Expo MCP for React Native, can read the store, follow dispatched actions, and match them to network requests. The map is there in browsers, React Native and Node (#3753).

Browser DevTools console
__DC_CONTROLLERS__.get('Data Client: My App').getState();

The React and Vue skills drive this through Chrome DevTools MCP; see debugging with agents for what they can inspect.

Upgrade skills​

Skills also handle upgrades. The v0.18 skill runs the codemod, then handles what it can't, like registering argsKey for schemas whose output depends on endpoint args (v0.18 migration). The path-to-regexp v8 skill rewrites path syntax in your endpoints.

npx skills add reactive/data-client \
  --skill data-client-v0.18-migration \
  --skill path-to-regexp-v8-migration