Skip to main content

Data Client for Coding Agents

· 7 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, Cursor and Codex plugins - claude plugin install data-client@data-client gives your agent the skills for the version you installed
  • 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
  • Skills in the packages - Each @data-client/* package ships the skills for its version, linked into .agents/skills with one command

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).

claude plugin marketplace add reactive/data-client
claude plugin install data-client@data-client
Run in your terminal

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

Claude Code, Cursor and Codex plugins​

The Data Client repo is a Claude Code plugin marketplace with one data-client plugin. Before Data Client is installed, it sets your app up. After that, it points your agent at the skills that ship inside your @data-client packages, so a React app gets the React skills and a Vue app the Vue ones, each for the version you installed. The Agent Skills page shows the same skills with the skills CLI and OpenSkills.

claude plugin marketplace add reactive/data-client
claude plugin install data-client@data-client
Run in your terminal

Codex installs the same plugin from the same marketplace (#4425):

codex plugin marketplace add reactive/data-client \
  --sparse .claude-plugin --sparse .agents/skills
codex plugin add data-client@data-client
Run in your terminal

In Cursor, add it from an Agent chat:

Copy prompt for Cursor

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 in the packages​

Skills now ship inside the packages they cover, so your agent follows the version you have installed and gets new guidance with npm update. One command links them into .agents/skills, with .claude/skills linking to it, where Claude Code, Cursor and Codex load them as their own skills:

npx --no data-client-skills
Run in your terminal

Commit the links. They point into node_modules, so they follow upgrades; run it again after adding, removing or upgrading @data-client packages to pick up new skills. If you use TanStack Intent, it finds the same skills.

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 the store on globalThis.__DC__: __DC__.controller is its Controller and __DC__.actions its recent actions, recorded from the moment the app starts, so the agent also sees the fetches made while the page loaded, with or without the Redux DevTools extension. 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.

Browser DevTools console
__DC__.controller.getState();
__DC__.actions.slice(-10);

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
Run in your terminal