Agent skill

Tanstack Vue Query Skilld

by skilld-dev in skilld-dev/vue-ecosystem-skills

Hooks for managing, caching and syncing asynchronous and remote data in Vue.

MITAuto-check passedDevelopment

Install Tanstack Vue Query Skilld

skills CLI
$ npx skills add skilld-dev/vue-ecosystem-skills --skill tanstack-vue-query-skilld -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install skilld-dev/vue-ecosystem-skills tanstack-vue-query-skilld --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/skilld-dev/vue-ecosystem-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/tanstack-vue-query-skilld .claude/skills/tanstack-vue-query-skilld && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
tanstack-vue-query-skilld
GitHub stars
181
Token cost
~1.4k tokens
SKILL.md length
385 words
Files
6 (incl. references)
Skills in repo
34
Repo updated
First seen
Licence
MIT

At a glance

Hooks for managing, caching and syncing asynchronous and remote data in Vue.

  • Writing code importing @tanstack/vue-query
  • SKILL.md covers Setup, Basic query, Basic mutation and Rules that catch Vue developers, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Tasks that involve Async programming

What it does

Tanstack Vue Query Skilld is an agent skill from skilld-dev/vue-ecosystem-skills. Hooks for managing, caching and syncing asynchronous and remote data in Vue. ALWAYS use when writing code importing "@tanstack/vue-query". Consult for debugging, best practices, or modifying @tanstack/vue-query, tanstack/vue-query, tanstack vue-query, tanstack vue query, query.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including reference files (for example `references/api.md`, `references/migration.md` and `references/mutations.md`).

It sits in Development, covering Async programming and Caching. It works with Vue.js and TanStack. The repository describes itself as: Agent Skills for the Vue ecosystem, written from current docs, issues, and releases. The licence is MIT.

When your agent uses it

  • Writing code importing @tanstack/vue-query
  • Tasks that involve Async programming
  • Tasks that involve Caching

Example prompts

  • “@tanstack/vue-query”
  • “Use the tanstack-vue-query-skilld skill to hook for managing, caching and syncing asynchronous and remote data in Vue”
  • “/tanstack-vue-query-skilld”

What it can do on your machine

Read from SKILL.md and the folder at commit c8994af. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are vue and typescript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • tanstack.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Tanstack Vue Query Skilld loads about 1.4k tokens when it runs, and up to ~7.1k if it reads all its reference files. Until then it costs about 76 tokens; SKILL.md has 385 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~76
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~7.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from skilld-dev/vue-ecosystem-skills at commit c8994af, republished under its MIT licence (© skilld-dev). 385 words, ~1,441 tokens.

Download SKILL.mdSave it as .claude/skills/tanstack-vue-query-skilld/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.
name
tanstack-vue-query-skilld
description
Hooks for managing, caching and syncing asynchronous and remote data in Vue. ALWAYS use when writing code importing "@tanstack/vue-query". Consult for debugging, best practices, or modifying @tanstack/vue-query, tanstack/vue-query, tanstack vue-query, tanstack vue query, query.

@tanstack/vue-query@5.103.2

Async data hooks for Vue. Version 5.103.2, prepared source at input/source. Peer deps: vue ^2.6.0 || ^3.3.0; Vue 2 needs @vue/composition-api (optional peer) (package.json:56-59). Re-exports everything from @tanstack/query-core 5.103.2, so keepPreviousData, skipToken, focusManager, onlineManager, hydration utils, and observer classes import from @tanstack/vue-query directly (src/index.ts:1).

Setup

Install the plugin once per app. It creates (or accepts) a QueryClient, provides it app-wide, and mounts/unmounts it (src/vueQueryPlugin.ts:74-154):

ts
import { createApp } from 'vue'
import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'

const app = createApp(App)

// Option A: pass your own client (required for SSR — one fresh client per request)
const queryClient = new QueryClient()
app.use(VueQueryPlugin, { queryClient })

// Option B: let the plugin build one with your defaults
app.use(VueQueryPlugin, {
  queryClientConfig: { defaultOptions: { queries: { staleTime: 5 * 1000 } } },
})

VueQueryPluginOptions: queryClient or queryClientConfig (one or the other), queryClientKey (only when installing multiple clients), clientPersister + clientPersisterOnSuccess (persisted cache restore), enableDevtoolsV6Plugin (src/vueQueryPlugin.ts:11-38). The client is not mounted on the server (src/vueQueryPlugin.ts:87-89).

useQueryClient(id?) throws outside an injection context or without the plugin (src/useQueryClient.ts:27-44).

Basic query

vue
<script setup lang="ts">
import { ref } from 'vue'
import { useQuery } from '@tanstack/vue-query'

const postId = ref(1)
const { status, data, error, refetch } = useQuery({
  queryKey: ['post', postId],          // ref inside the key: tracked, no .value
  queryFn: () => fetchPost(postId.value),
})
</script>

<template>
  <span v-if="status === 'pending'">Loading...</span>
  <span v-else-if="status === 'error'">Error: {{ error!.message }}</span>
  <h1 v-else>{{ data!.title }}</h1>
</template>

Basic mutation

vue
<script setup lang="ts">
import { useMutation, useQueryClient } from '@tanstack/vue-query'

const queryClient = useQueryClient()
const addMutation = useMutation({
  mutationFn: addTodo,
  onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
})

function onAdd() {
  addMutation.mutate('Item', {
    onError: (error) => console.error('Failed:', error),
  })
}
</script>

<template>
  <button @click="onAdd">Add</button>
</template>

mutate swallows rejection by design; per-call callbacks fire only for the latest call. Use mutateAsync for a promise per call (src/useMutation.ts:262-270).

Rules that catch Vue developers

  • Returns are Refs. Every result field of useQuery/useInfiniteQuery/useMutation is a Ref (data.value in script, auto-unwrapped in template), except the functions refetch, fetchNextPage, fetchPreviousPage, mutate, mutateAsync, reset, plus suspense() (src/useBaseQuery.ts:27-40, src/useMutation.ts:53-68).
  • useQueries returns one Ref of the whole result array (or the combine value), not a reactive array (src/useQueries.ts:357-376).
  • Never unwrap refs for the query key. Put the ref itself into queryKey and read .value inside queryFn (src/utils.ts:84-111).
  • Only queryKey and enabled accept reactive getters. A function anywhere else is the real callback (queryFn, select, ...). To make any option reactive, pass a whole-options getter useQuery(() => ({ ... })) (src/queryOptions.ts:67-76, src/useQuery.ts:225-227).
  • initialData is not reactive; it is read once (src/queryOptions.ts:136-148).
  • Call composables in setup() or an effectScope. Outside a scope, dev mode warns about memory leaks (src/useBaseQuery.ts:82-88).
  • Imperative fetches go through queryClient.query() / queryClient.infiniteQuery(). fetchQuery, prefetchQuery, fetchInfiniteQuery, prefetchInfiniteQuery, ensureQueryData are deprecated and slated for removal (src/queryClient.ts:251-253, src/queryClient.ts:311-313).
  • Declare shared queries with queryOptions() so the key carries its data type for getQueryData, invalidateQueries, and prefetch reuse (src/queryOptions.ts:244-251).
Show full SKILL.md (90 more words)Show less

Environment limits

  • Prepared source: @tanstack/vue-query 5.103.2 with @tanstack/query-core 5.103.2 (package.json:2,45). Docs match v5; v4 APIs may appear in old examples.
  • Vue 3.3+ for Vue 3; Vue 2.6+ with @vue/composition-api, or Vue 2.7 native (package.json:52-59).
  • ESM-first dual build (build/modern, build/legacy); sideEffects: false (package.json:21-35).

References

Official docs: https://tanstack.com/query/latest/docs/framework/vue/overview

© skilld-dev, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 5 other files (references) in skills/tanstack-vue-query-skilld of skilld-dev/vue-ecosystem-skills.

  • SKILL.md
  • references/api.md
  • references/migration.md
  • references/mutations.md
  • references/query-client.md
  • references/reactivity.md

Open the folder on GitHubat commit c8994af

Compare with similar skills

Tanstack Vue Query Skilld next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Tanstack Vue Query Skilld compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Tanstack Vue Query Skilld this skillskilld-dev/vue-ecosystem-skills181—~1.4kAutomated safety check: PassMIT
Tanstack Querybskimball/tanstack-hono1191 repos~5.4kAutomated safety check: PassMIT
Olore Tanstack Query 4olorehq/olore103—~583Automated safety check: PassMIT
Olore Tanstack Query Latestolorehq/olore103—~487Automated safety check: PassMIT
Native Data FetchingCherryHQ/cherry-studio-app4k6 repos~2.9kAutomated safety check: NotesMIT
Pre PR AblationPopupMaker/Popup-Maker110—~2.5kAutomated safety check: PassNone

Similar skills

  • Tanstack Query

    bskimball/tanstack-hono

    Powerful asynchronous state management, server-state utilities, and data fetching for TS/JS, React, Vue, Solid, Svelte & Angular.

    119 GitHub starsUsed in 1 repo~5.4k tokens
    Frontend & DesignAuto-check passed
  • Local TanStack Query documentation reference (v4). An agent skill from olorehq/olore.

    103 GitHub stars~583 tokensUpdated yesterday
    Backend & APIsAuto-check passed
  • Local TanStack Query documentation reference (latest). An agent skill from olorehq/olore.

    103 GitHub stars~487 tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Native Data Fetching

    CherryHQ/cherry-studio-app

    A skill your agent uses when implementing or debugging ANY network request, API call, or data fetching.

    4k GitHub starsUsed in 6 repos~2.9k tokens
    DevelopmentAuto-check: notes
  • Pre PR Ablation

    PopupMaker/Popup-Maker

    Use before finalizing or opening/updating a PR for non-trivial code changes, especially third-party integrations, compatibility layers, hooks and filters, lifecycle code, providers, abstractions…

    110 GitHub stars~2.5k tokensUpdated 2 days ago
    DevelopmentAuto-check passed
  • Walks through adding a Wagmi feature across its layers: a Viem-based core action, TanStack Query options, and React and Vue bindings.

    6.8k GitHub stars~3.8k tokensUpdated 6 days ago
    DevelopmentAuto-check passed

More from skilld-dev/vue-ecosystem-skills

All 34 skills in this repo
  • Floating UI Vue Skilld

    skilld-dev/vue-ecosystem-skills

    Floating UI for Vue (@floating-ui/vue@2.0.1). An agent skill from skilld-dev/vue-ecosystem-skills.

    181 GitHub stars~1.3k tokensUpdated 15 days ago
    Auto-check passed
  • Formkit Core Skilld

    skilld-dev/vue-ecosystem-skills

    A skill your agent uses whenever writing, debugging, or reviewing code that imports @formkit/core — FormKit's framework-agnostic core (node trees, values, events, hooks, message stores, ledgers…

    181 GitHub stars~2.1k tokensUpdated 15 days ago
    Auto-check passed
  • Pinia Colada Skilld

    skilld-dev/vue-ecosystem-skills

    Data fetching layer for Vue built on Pinia. An agent skill from skilld-dev/vue-ecosystem-skills.

    181 GitHub stars~1.9k tokensUpdated 15 days ago
    Auto-check passed
  • Pinia Skilld

    skilld-dev/vue-ecosystem-skills

    A skill your agent uses when writing, debugging, or refactoring code that imports "pinia", the Vue 3 store library.

    181 GitHub stars~1.5k tokensUpdated 15 days ago
    Auto-check passed
  • Primevue Skilld

    skilld-dev/vue-ecosystem-skills

    A skill your agent uses when writing, debugging, or updating code that imports primevue (PrimeVue v5, UI component library for Vue 3).

    181 GitHub stars~1.9k tokensUpdated 15 days ago
    Auto-check passed
  • Quasar Skilld

    skilld-dev/vue-ecosystem-skills

    Build, configure, and debug apps with the Quasar framework (quasar npm package, v2.33.1).

    181 GitHub stars~1.6k tokensUpdated 15 days ago
    Auto-check passed

Works with

Questions about Tanstack Vue Query Skilld

What does Tanstack Vue Query Skilld do?

Hooks for managing, caching and syncing asynchronous and remote data in Vue. Tanstack Vue Query Skilld is an agent skill from skilld-dev/vue-ecosystem-skills. Hooks for managing, caching and syncing asynchronous and remote data in Vue.

When should I use Tanstack Vue Query Skilld?

Tanstack Vue Query Skilld fits situations like: writing code importing @tanstack/vue-query; tasks that involve Async programming; tasks that involve Caching.

How do I install Tanstack Vue Query Skilld in Claude Code?

Run `npx skills add skilld-dev/vue-ecosystem-skills --skill tanstack-vue-query-skilld -a claude-code`. Or copy the skill folder (skills/tanstack-vue-query-skilld in skilld-dev/vue-ecosystem-skills) into .claude/skills/tanstack-vue-query-skilld in your project. Claude Code loads it when a task matches its description.

How do I install Tanstack Vue Query Skilld in Codex?

Run `npx skills add skilld-dev/vue-ecosystem-skills --skill tanstack-vue-query-skilld -a codex`. Or copy the skill folder (skills/tanstack-vue-query-skilld in skilld-dev/vue-ecosystem-skills) into .agents/skills/tanstack-vue-query-skilld in your project. Codex loads it when a task matches its description.

Can I use Tanstack Vue Query Skilld in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add skilld-dev/vue-ecosystem-skills --skill tanstack-vue-query-skilld -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/tanstack-vue-query-skilld, .gemini/skills/tanstack-vue-query-skilld, .github/skills/tanstack-vue-query-skilld and .opencode/skills/tanstack-vue-query-skilld in your project.

What does Tanstack Vue Query Skilld need to run?

SKILL.md names no scripts, command-line tools or credentials: Tanstack Vue Query Skilld is instructions for the agent only.

Does Tanstack Vue Query Skilld access the network?

SKILL.md names 1 domain. As links in the text: tanstack.com. This is read from the text; nothing was executed.

Is Tanstack Vue Query Skilld safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Tanstack Vue Query Skilld use?

Tanstack Vue Query Skilld is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Tanstack Vue Query Skilld use?

About 1.4k tokens (SKILL.md is roughly 5.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.7k tokens, read only when the agent opens those files.

What are the alternatives to Tanstack Vue Query Skilld?

Skills that share tags, products or a category with Tanstack Vue Query Skilld: Tanstack Query (bskimball/tanstack-hono, 119 stars), Olore Tanstack Query 4 (olorehq/olore, 103 stars), Olore Tanstack Query Latest (olorehq/olore, 103 stars) and Native Data Fetching (CherryHQ/cherry-studio-app, 4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Tanstack Vue Query Skilld?

skilld-dev (a GitHub organization) maintains it in skilld-dev/vue-ecosystem-skills, which has 181 GitHub stars. The repository holds 34 skills in this directory. The repository was last updated on September 22, 2026.

Source: skilld-dev/vue-ecosystem-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.