Agent Skills

备注

这篇翻译之后英文原文有更新，内容可能已过时。

最快的上手方式是让 AI 智能体通过 skill /data-client-setup 完成安装。

安装

Claude Code plugin

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

Skills CLI

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

OpenSkills

npx openskills install reactive/data-client/.agents/skills/data-client-setup

然后运行 skill /data-client-setup。它会检测你的框架和 API 风格（REST、GraphQL、自定义），安装下面相应的 skill，接好 provider，并迁移现有的 endpoint。

预先安装所有 skill

如果你想现在就安装适用于你的框架的所有 skill，而不让智能体执行安装：

Claude Code plugin

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

TanStack Intent

# run after installing Data Client: loads the skills its packages ship
npm install -D @tanstack/intent
npx intent install

Skills CLI

npx skills add reactive/data-client \
  --skill data-client \
  --skill data-client-setup \
  --skill data-client-rest-setup \
  --skill data-client-endpoint-setup \
  --skill data-client-graphql-setup \
  --skill data-client-schema \
  --skill data-client-rest \
  --skill data-client-manager \
  --skill data-client-vue \
  --skill data-client-vue-testing

OpenSkills

npx openskills install reactive/data-client/.agents/skills/data-client
npx openskills install reactive/data-client/.agents/skills/data-client-setup
npx openskills install reactive/data-client/.agents/skills/data-client-rest-setup
npx openskills install reactive/data-client/.agents/skills/data-client-endpoint-setup
npx openskills install reactive/data-client/.agents/skills/data-client-graphql-setup
npx openskills install reactive/data-client/.agents/skills/data-client-schema
npx openskills install reactive/data-client/.agents/skills/data-client-rest
npx openskills install reactive/data-client/.agents/skills/data-client-manager
npx openskills install reactive/data-client/.agents/skills/data-client-vue
npx openskills install reactive/data-client/.agents/skills/data-client-vue-testing

可用的 skill

• /data-client-setup — 根据你的框架和 API 风格安装并配置 Data Client，以及它所需的 skill。
• /data-client-rest-setup — 设置 @data-client/rest 并迁移现有的 fetch/axios 客户端。
• /data-client-endpoint-setup — 用 Endpoint 包装自定义异步函数，适用于非 REST、非 GraphQL 的工作流。
• /data-client-graphql-setup — 为 GraphQL API 配置 @data-client/graphql 和 GQLEndpoint。
• /data-client-schema — 设计 Entity、Collection、Union、Query 及相关 schema。
• /data-client-rest — 用 resource()、RestEndpoint、 CRUD 方法和响应解析来定义 REST API。
• /data-client-manager — 实现自定义 Manager，用于 websocket、SSE、轮询、订阅、日志和中间件。

• /data-client-vue — 结合 DataClientPlugin 使用 useSuspense、useFetch、useQuery、useLive 及变更相关组合式函数，并借助 Chrome DevTools MCP 调试运行中的应用。
• /data-client-vue-testing — 使用 renderDataCompose、 mountDataClient、fixture 和 nock 编写 Vue 测试。

在 skills.sh/reactive/data-client 浏览完整目录。

面向 LLM 的文档

没有安装 skill 的智能体可以按照 llms.txt 约定，以纯 markdown 形式阅读这些文档：

• llms.txt — 所有页面的索引，附有每个页面 markdown 的链接
• llms-full.txt — 将所有 Vue、REST 和 GraphQL 文档合并为一个文件

任何文档页面都可以在其 URL 后加上 .md 获取 markdown 版本，例如 /vue/api/useSuspense.md。