Pular para o conteúdo principal

Data Client para Coding Agents

· 7 min para ler
Nathaniel Tucker
Nathaniel Tucker
Creator of Reactive Data Client

Coding agents escrevem muito código com Data Client hoje, e escrevem melhor quando têm a documentação e os fluxos de trabalho atuais em vez de adivinhar a partir de versões antigas. Este ciclo de lançamento torna isso mais fácil de configurar para qualquer agent.

Novidades:

  • Plugin do Claude Code - claude plugin install react@data-client instala as skills do seu framework
  • Skills de Vue - Projetos Vue recebem composables e testes de Vue, não hooks de React
  • llms.txt - Qualquer agent pode ler a documentação como markdown, e cada página indica onde procurar

Também disponível:

Primeiros passos​

Instale a skill /data-client-setup e execute-a. Ela detecta React ou Vue e o estilo da sua API (REST, GraphQL ou personalizada), instala as skills que o seu projeto precisa e configura o Data Client. Para REST, ela delega para data-client-rest-setup, que migra chamadas fetch ou axios existentes para endpoints (#4153).

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

Agent Skills lista todas as skills e como instalá-las todas de antemão.

Plugin do Claude Code​

O repositório do Data Client é um marketplace de plugins do Claude Code. O plugin core contém as skills de setup, REST, GraphQL, schema e Manager; os plugins react e vue adicionam as skills do seu framework e trazem o core junto; e o plugin migrations adiciona as skills de atualização (#4153). A página Agent Skills mostra a mesma instalação com a CLI de skills e o OpenSkills.

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

Use vue@data-client para Vue, core@data-client para nenhum dos dois, e adicione migrations@data-client antes de uma atualização.

Skills de Vue​

Projetos Vue costumavam receber a skill de hooks do React, então os agents recorriam a padrões de React. A skill data-client-vue escreve código com DataClientPlugin e composables, e depura um app em execução (#4126). data-client-vue-testing escreve testes com renderDataCompose() e mountDataClient() (#4126) que seguem os guias de testes para Vue (#4181).

llms.txt​

Agents sem skills podem ler a documentação como markdown, seguindo a convenção llms.txt (#4171, #4236):

Toda página referencia seu llms.txt no <head>, e toda página da documentação referencia seu markdown, então um agent que receba a URL de qualquer página os encontra sozinho.

Skills acompanham a documentação​

As páginas de referência das skills agora são geradas por framework a partir desta documentação, então trazem trechos compartilhados como comandos de instalação e dão aos projetos Vue apenas código Vue. Uma verificação de CI falha quando uma skill diverge da documentação, então as skills se mantêm atualizadas a cada lançamento (#4170).

Também disponível​

Skills para cada tarefa​

Além do setup, há skills para cada parte de um app com Data Client. O /data-client-setup instala as que o seu projeto usa:

Veja todas em skills.sh/reactive/data-client.

Depure um app em execução​

Pergunte ao seu agent "por que isso não buscou de novo?" ou "o que está no cache agora?" e ele pode verificar o app em execução em vez de adivinhar a partir do código. Em modo de desenvolvimento, o DevToolsManager coloca o Controller de cada store em globalThis.__DC_CONTROLLERS__, então um agent conectado via Chrome DevTools MCP, ou Expo MCP para React Native, pode ler a store, acompanhar as ações despachadas e relacioná-las às requisições de rede. O mapa está disponível em navegadores, React Native e Node (#3753).

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

As skills de React e Vue fazem isso por meio do Chrome DevTools MCP; veja depuração com agents para saber o que elas conseguem inspecionar.

Skills de atualização​

As skills também cuidam de atualizações. A skill da v0.18 executa o codemod e depois trata do que ele não consegue, como registrar argsKey para schemas cuja saída depende dos argumentos do endpoint (migração para a v0.18). A skill do path-to-regexp v8 reescreve a sintaxe de paths nos seus endpoints.

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