Saltar al contenido principal

Data Client para agentes de programación

· 7 min de lectura
Nathaniel Tucker
Nathaniel Tucker
Creator of Reactive Data Client

Los agentes de programación escriben hoy mucho código de Data Client, y lo escriben mejor cuando cuentan con la documentación y los flujos de trabajo actuales en lugar de adivinar a partir de versiones anteriores. Este ciclo de lanzamientos facilita configurar eso para cualquier agente.

Nuevo:

  • Plugin de Claude Code - claude plugin install react@data-client instala las skills para tu framework
  • Skills de Vue - Los proyectos de Vue reciben composables y pruebas de Vue, no hooks de React
  • llms.txt - Cualquier agente puede leer la documentación como markdown, y cada página le indica dónde buscar

También disponible:

Primeros pasos​

Instala la skill /data-client-setup y ejecútala. Detecta React o Vue y tu estilo de API (REST, GraphQL o personalizado), instala las skills que tu proyecto necesita y configura Data Client. Para REST delega en data-client-rest-setup, que migra las llamadas existentes a fetch o axios a endpoints (#4153).

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

Agent Skills enumera todas las skills y cómo instalarlas todas desde el principio.

Plugin de Claude Code​

El repositorio de Data Client es un marketplace de plugins de Claude Code. El plugin core contiene las skills de configuración, REST, GraphQL, schemas y Managers; los plugins react y vue añaden las skills de su framework e incorporan core; y el plugin migrations añade las skills de actualización (#4153). La página Agent Skills muestra la misma instalación con la CLI de skills y OpenSkills.

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

Usa vue@data-client para Vue, core@data-client si no usas ninguno de los dos, y añade migrations@data-client antes de una actualización.

Skills de Vue​

Los proyectos de Vue antes recibían la skill de hooks de React, así que los agentes recurrían a patrones de React. La skill data-client-vue escribe código de DataClientPlugin y de composables, y depura una aplicación en ejecución (#4126). data-client-vue-testing escribe pruebas con renderDataCompose() y mountDataClient() (#4126) que siguen las guías de pruebas de Vue (#4181).

llms.txt​

Los agentes sin skills pueden leer la documentación como markdown, siguiendo la convención llms.txt (#4171, #4236):

Cada página enlaza su llms.txt en <head>, y cada página de la documentación enlaza su markdown, de modo que un agente al que se le da la URL de cualquier página los encuentra por su cuenta.

Las skills coinciden con la documentación​

Las páginas de referencia de las skills ahora se generan por framework a partir de esta documentación, así que incluyen fragmentos compartidos como los comandos de instalación y dan a los proyectos de Vue solo código de Vue. Una comprobación de CI falla cuando una skill se desvía de la documentación, así que las skills se mantienen al día con cada lanzamiento (#4170).

También disponible​

Skills para cada tarea​

Más allá de la configuración, hay skills para cada parte de una aplicación de Data Client. /data-client-setup instala las que tu proyecto usa:

Explóralas todas en skills.sh/reactive/data-client.

Depurar una aplicación en ejecución​

Pregúntale a tu agente "¿por qué esto no volvió a obtener los datos?" o "¿qué hay en la caché ahora mismo?" y podrá revisar la aplicación en ejecución en lugar de adivinar a partir del código. En modo de desarrollo, DevToolsManager coloca el Controller de cada store en globalThis.__DC_CONTROLLERS__, así que un agente conectado mediante Chrome DevTools MCP, o Expo MCP para React Native, puede leer el store, seguir las acciones despachadas y relacionarlas con las solicitudes de red. El mapa está disponible en navegadores, React Native y Node (#3753).

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

Las skills de React y Vue aprovechan esto mediante Chrome DevTools MCP; consulta depuración con agentes para ver qué pueden inspeccionar.

Skills de actualización​

Las skills también se encargan de las actualizaciones. La skill de v0.18 ejecuta el codemod y luego se ocupa de lo que este no puede, como registrar argsKey para los schemas cuya salida depende de los argumentos del endpoint (migración a v0.18). La skill de path-to-regexp v8 reescribe la sintaxis de rutas en tus endpoints.

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