Frameworks

Data fetching

Loads and changes server data in front-end apps - framework loaders, TanStack Query, SWR, Nuxt useFetch, Angular httpResource - with correct cache keys, one stable client, loading and error states, race-free effects and invalidation after mutations. Use when fetching data in a component, adding a query or mutation, or fixing stale, duplicated or flickering data.

fe-data-fetchingreact, vue, svelte, angular, next, nuxt8 rules76 tokens always loaded, 876 tokens when used, 1803 tokens in references on demand.

Install

init installs this skill when the project uses react, vue, svelte, angular, next, nuxt. Pick your agent to see where its files land.

npx github:dawidolko/frontend-skills init

Not tested yet with this runner. npx and pnpm dlx are tested; if this one fails, use one of them.

Without --agents, init finds the agents from what the project already has, and asks when it finds none:

How init finds each of the 17 agents

Agent	Found by
Claude Code	`CLAUDE.md` `.claude` `CLAUDE.local.md`
OpenAI Codex	`.codex` `AGENTS.override.md`
Cursor	`.cursor` `.cursorrules`
GitHub Copilot	`.github/copilot-instructions.md` `.github/instructions` `.github/skills` `.github/prompts`
Gemini CLI	`GEMINI.md` `.gemini`
Antigravity CLI	`.agents/rules` `.agent/rules`
Devin / Windsurf	`.devin` `.windsurf` `.windsurfrules`
OpenCode	`opencode.json` `opencode.jsonc` `.opencode`
Cline	`.clinerules` `.cline`
Zed	`.rules` `.zed`
JetBrains Junie	`.junie`
Kiro	`.kiro`
Augment	`.augment` `.augment-guidelines`
Trae	`.trae`
Continue	`.continue`
Amazon Q Developer	`.amazonq`
Aider	`.aider.conf.yml` `CONVENTIONS.md`

Where fe-data-fetching lands for Claude Code

.claude/skills/fe-data-fetching/SKILL.mdskill
.claude/skills/fe-data-fetching/references/data-fetching.mdskill
.claude/rules/fe-data-fetching.mdrule file
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.claude/rules/fe-data-fetching.md

---
paths:
  - "**/*.js"
  - "**/*.jsx"
  - "**/*.ts"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
---

# Data fetching (frontend-skills)

Loads and changes server data in front-end apps - framework loaders, TanStack Query, SWR, Nuxt useFetch, Angular httpResource - with correct cache keys, one stable client, loading and error states, race-free effects and invalidation after mutations. Use when fetching data in a component, adding a query or mutation, or fixing stale, duplicated or flickering data.

- Read server data through the framework loader or a server-state library, not per-component fetch plus loading flags (state/server-state-cache).
- A query key holds every variable its function reads (state/query-key-deps).
- TanStack Query 5 takes one options object: `useQuery({ queryKey, queryFn })` (state/query-object-syntax).
- Create the `QueryClient` once, never in a component body (state/query-client-stable).
- Render pending, error (with retry) and success states; never data only (state/query-error-state).
- Query functions throw on HTTP errors: check `res.ok` (js/fetch-check-ok).
- An effect that fetches into state ignores or aborts stale responses in its cleanup (state/fetch-effect-cleanup).
- After a mutation, invalidate or update every query it changed (state/invalidate-after-mutation).
- Start independent requests together (`Promise.all`, parallel queries), never one after another.
- Pass the `signal` the library gives you to `fetch` so cancelled queries stop.

Before larger changes, read the full skill: `.claude/skills/fe-data-fetching/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-data-fetching lands for OpenAI Codex

.agents/skills/fe-data-fetching/SKILL.mdskill
.agents/skills/fe-data-fetching/references/data-fetching.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenAI Codex has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-data-fetching lands for Cursor

.agents/skills/fe-data-fetching/SKILL.mdskill
.agents/skills/fe-data-fetching/references/data-fetching.mdskill
.cursor/rules/fe-data-fetching.mdcrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.cursor/rules/fe-data-fetching.mdc

---
description: Loads and changes server data in front-end apps - framework loaders, TanStack Query, SWR, Nuxt useFetch, Angular httpResource - with correct cache keys, one stable client, loading and error states, race-free effects and invalidation after mutations. Use when fetching data in a component, adding a query or mutation, or fixing stale, duplicated or flickering data.
globs: **/*.js, **/*.jsx, **/*.ts, **/*.tsx, **/*.vue, **/*.svelte
alwaysApply: false
---

# Data fetching (frontend-skills)

- Read server data through the framework loader or a server-state library, not per-component fetch plus loading flags (state/server-state-cache).
- A query key holds every variable its function reads (state/query-key-deps).
- TanStack Query 5 takes one options object: `useQuery({ queryKey, queryFn })` (state/query-object-syntax).
- Create the `QueryClient` once, never in a component body (state/query-client-stable).
- Render pending, error (with retry) and success states; never data only (state/query-error-state).
- Query functions throw on HTTP errors: check `res.ok` (js/fetch-check-ok).
- An effect that fetches into state ignores or aborts stale responses in its cleanup (state/fetch-effect-cleanup).
- After a mutation, invalidate or update every query it changed (state/invalidate-after-mutation).
- Start independent requests together (`Promise.all`, parallel queries), never one after another.
- Pass the `signal` the library gives you to `fetch` so cancelled queries stop.

Before larger changes, read the full skill: `.agents/skills/fe-data-fetching/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-data-fetching lands for GitHub Copilot

.agents/skills/fe-data-fetching/SKILL.mdskill
.agents/skills/fe-data-fetching/references/data-fetching.mdskill
.github/instructions/fe-data-fetching.instructions.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.github/instructions/fe-data-fetching.instructions.md

---
applyTo: "**/*.js,**/*.jsx,**/*.ts,**/*.tsx,**/*.vue,**/*.svelte"
description: "Loads and changes server data in front-end apps - framework loaders, TanStack Query, SWR, Nuxt useFetch, Angular httpResource - with correct cache keys, one stable client, loading and error states, race-free effects and invalidation after mutations. Use when fetching data in a component, adding a query or mutation, or fixing stale, duplicated or flickering data."
---

# Data fetching (frontend-skills)

- Read server data through the framework loader or a server-state library, not per-component fetch plus loading flags (state/server-state-cache).
- A query key holds every variable its function reads (state/query-key-deps).
- TanStack Query 5 takes one options object: `useQuery({ queryKey, queryFn })` (state/query-object-syntax).
- Create the `QueryClient` once, never in a component body (state/query-client-stable).
- Render pending, error (with retry) and success states; never data only (state/query-error-state).
- Query functions throw on HTTP errors: check `res.ok` (js/fetch-check-ok).
- An effect that fetches into state ignores or aborts stale responses in its cleanup (state/fetch-effect-cleanup).
- After a mutation, invalidate or update every query it changed (state/invalidate-after-mutation).
- Start independent requests together (`Promise.all`, parallel queries), never one after another.
- Pass the `signal` the library gives you to `fetch` so cancelled queries stop.

Before larger changes, read the full skill: `.agents/skills/fe-data-fetching/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-data-fetching lands for Gemini CLI

.agents/skills/fe-data-fetching/SKILL.mdskill
.agents/skills/fe-data-fetching/references/data-fetching.mdskill
GEMINI.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Gemini CLI: Gemini CLI was replaced by Antigravity CLI for unpaid tiers on 2026-06-18; choose "antigravity" too if you use it.

Gemini CLI has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

GEMINI.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-data-fetching lands for Antigravity CLI

.agents/skills/fe-data-fetching/SKILL.mdskill
.agents/skills/fe-data-fetching/references/data-fetching.mdskill
.agents/rules/fe-data-fetching.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.agents/rules/fe-data-fetching.md

---
trigger: glob
globs: "**/*.js, **/*.jsx, **/*.ts, **/*.tsx, **/*.vue, **/*.svelte"
description: "Loads and changes server data in front-end apps - framework loaders, TanStack Query, SWR, Nuxt useFetch, Angular httpResource - with correct cache keys, one stable client, loading and error states, race-free effects and invalidation after mutations. Use when fetching data in a component, adding a query or mutation, or fixing stale, duplicated or flickering data."
---

# Data fetching (frontend-skills)

- Read server data through the framework loader or a server-state library, not per-component fetch plus loading flags (state/server-state-cache).
- A query key holds every variable its function reads (state/query-key-deps).
- TanStack Query 5 takes one options object: `useQuery({ queryKey, queryFn })` (state/query-object-syntax).
- Create the `QueryClient` once, never in a component body (state/query-client-stable).
- Render pending, error (with retry) and success states; never data only (state/query-error-state).
- Query functions throw on HTTP errors: check `res.ok` (js/fetch-check-ok).
- An effect that fetches into state ignores or aborts stale responses in its cleanup (state/fetch-effect-cleanup).
- After a mutation, invalidate or update every query it changed (state/invalidate-after-mutation).
- Start independent requests together (`Promise.all`, parallel queries), never one after another.
- Pass the `signal` the library gives you to `fetch` so cancelled queries stop.

Before larger changes, read the full skill: `.agents/skills/fe-data-fetching/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-data-fetching lands for Devin / Windsurf

.agents/skills/fe-data-fetching/SKILL.mdskill
.agents/skills/fe-data-fetching/references/data-fetching.mdskill
.devin/rules/fe-data-fetching.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Devin / Windsurf: Devin CLI also reads .cursor/rules; with Cursor chosen too, the CLI sees both rule files of a skill.

Planned by the installer itself for the example React project in the repository.

.devin/rules/fe-data-fetching.md

---
trigger: glob
globs: "**/*.js,**/*.jsx,**/*.ts,**/*.tsx,**/*.vue,**/*.svelte"
---

# Data fetching (frontend-skills)

Loads and changes server data in front-end apps - framework loaders, TanStack Query, SWR, Nuxt useFetch, Angular httpResource - with correct cache keys, one stable client, loading and error states, race-free effects and invalidation after mutations. Use when fetching data in a component, adding a query or mutation, or fixing stale, duplicated or flickering data.

- Read server data through the framework loader or a server-state library, not per-component fetch plus loading flags (state/server-state-cache).
- A query key holds every variable its function reads (state/query-key-deps).
- TanStack Query 5 takes one options object: `useQuery({ queryKey, queryFn })` (state/query-object-syntax).
- Create the `QueryClient` once, never in a component body (state/query-client-stable).
- Render pending, error (with retry) and success states; never data only (state/query-error-state).
- Query functions throw on HTTP errors: check `res.ok` (js/fetch-check-ok).
- An effect that fetches into state ignores or aborts stale responses in its cleanup (state/fetch-effect-cleanup).
- After a mutation, invalidate or update every query it changed (state/invalidate-after-mutation).
- Start independent requests together (`Promise.all`, parallel queries), never one after another.
- Pass the `signal` the library gives you to `fetch` so cancelled queries stop.

Before larger changes, read the full skill: `.agents/skills/fe-data-fetching/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-data-fetching lands for OpenCode

.agents/skills/fe-data-fetching/SKILL.mdskill
.agents/skills/fe-data-fetching/references/data-fetching.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenCode has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-data-fetching lands for Cline

.claude/skills/fe-data-fetching/SKILL.mdskill
.claude/skills/fe-data-fetching/references/data-fetching.mdskill
.clinerules/fe-data-fetching.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Cline: If .clinerules is a single file rather than a folder, Cline rule files are not written; skills still are.

Planned by the installer itself for the example React project in the repository.

.clinerules/fe-data-fetching.md

---
paths:
  - "**/*.js"
  - "**/*.jsx"
  - "**/*.ts"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
---

# Data fetching (frontend-skills)

Loads and changes server data in front-end apps - framework loaders, TanStack Query, SWR, Nuxt useFetch, Angular httpResource - with correct cache keys, one stable client, loading and error states, race-free effects and invalidation after mutations. Use when fetching data in a component, adding a query or mutation, or fixing stale, duplicated or flickering data.

- Read server data through the framework loader or a server-state library, not per-component fetch plus loading flags (state/server-state-cache).
- A query key holds every variable its function reads (state/query-key-deps).
- TanStack Query 5 takes one options object: `useQuery({ queryKey, queryFn })` (state/query-object-syntax).
- Create the `QueryClient` once, never in a component body (state/query-client-stable).
- Render pending, error (with retry) and success states; never data only (state/query-error-state).
- Query functions throw on HTTP errors: check `res.ok` (js/fetch-check-ok).
- An effect that fetches into state ignores or aborts stale responses in its cleanup (state/fetch-effect-cleanup).
- After a mutation, invalidate or update every query it changed (state/invalidate-after-mutation).
- Start independent requests together (`Promise.all`, parallel queries), never one after another.
- Pass the `signal` the library gives you to `fetch` so cancelled queries stop.

Before larger changes, read the full skill: `.claude/skills/fe-data-fetching/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-data-fetching lands for Zed

.agents/skills/fe-data-fetching/SKILL.mdskill
.agents/skills/fe-data-fetching/references/data-fetching.mdskill
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Zed: Zed reads only the first instruction file of its list; the block is placed in that file.

Zed has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CLAUDE.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-data-fetching lands for JetBrains Junie

.agents/skills/fe-data-fetching/SKILL.mdskill
.agents/skills/fe-data-fetching/references/data-fetching.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

JetBrains Junie: Junie reads .agents/skills only in a trusted project.

JetBrains Junie has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-data-fetching lands for Kiro

.kiro/skills/fe-data-fetching/SKILL.mdskill
.kiro/skills/fe-data-fetching/references/data-fetching.mdskill
.kiro/steering/fe-data-fetching.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.kiro/steering/fe-data-fetching.md

---
inclusion: fileMatch
fileMatchPattern: ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "**/*.vue", "**/*.svelte"]
---

# Data fetching (frontend-skills)

Loads and changes server data in front-end apps - framework loaders, TanStack Query, SWR, Nuxt useFetch, Angular httpResource - with correct cache keys, one stable client, loading and error states, race-free effects and invalidation after mutations. Use when fetching data in a component, adding a query or mutation, or fixing stale, duplicated or flickering data.

- Read server data through the framework loader or a server-state library, not per-component fetch plus loading flags (state/server-state-cache).
- A query key holds every variable its function reads (state/query-key-deps).
- TanStack Query 5 takes one options object: `useQuery({ queryKey, queryFn })` (state/query-object-syntax).
- Create the `QueryClient` once, never in a component body (state/query-client-stable).
- Render pending, error (with retry) and success states; never data only (state/query-error-state).
- Query functions throw on HTTP errors: check `res.ok` (js/fetch-check-ok).
- An effect that fetches into state ignores or aborts stale responses in its cleanup (state/fetch-effect-cleanup).
- After a mutation, invalidate or update every query it changed (state/invalidate-after-mutation).
- Start independent requests together (`Promise.all`, parallel queries), never one after another.
- Pass the `signal` the library gives you to `fetch` so cancelled queries stop.

Before larger changes, read the full skill: `.kiro/skills/fe-data-fetching/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-data-fetching lands for Augment

.agents/skills/fe-data-fetching/SKILL.mdskill
.agents/skills/fe-data-fetching/references/data-fetching.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Augment has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-data-fetching lands for Trae

.trae/skills/fe-data-fetching/SKILL.mdskill
.trae/skills/fe-data-fetching/references/data-fetching.mdskill
.trae/rules/fe-data-fetching.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Trae: Trae reads AGENTS.md only after it is enabled in its settings.

Planned by the installer itself for the example React project in the repository.

.trae/rules/fe-data-fetching.md

---
description: "Loads and changes server data in front-end apps - framework loaders, TanStack Query, SWR, Nuxt useFetch, Angular httpResource - with correct cache keys, one stable client, loading and error states, race-free effects and invalidation after mutations. Use when fetching data in a component, adding a query or mutation, or fixing stale, duplicated or flickering data."
globs: **/*.js,**/*.jsx,**/*.ts,**/*.tsx,**/*.vue,**/*.svelte
alwaysApply: false
---

# Data fetching (frontend-skills)

- Read server data through the framework loader or a server-state library, not per-component fetch plus loading flags (state/server-state-cache).
- A query key holds every variable its function reads (state/query-key-deps).
- TanStack Query 5 takes one options object: `useQuery({ queryKey, queryFn })` (state/query-object-syntax).
- Create the `QueryClient` once, never in a component body (state/query-client-stable).
- Render pending, error (with retry) and success states; never data only (state/query-error-state).
- Query functions throw on HTTP errors: check `res.ok` (js/fetch-check-ok).
- An effect that fetches into state ignores or aborts stale responses in its cleanup (state/fetch-effect-cleanup).
- After a mutation, invalidate or update every query it changed (state/invalidate-after-mutation).
- Start independent requests together (`Promise.all`, parallel queries), never one after another.
- Pass the `signal` the library gives you to `fetch` so cancelled queries stop.

Before larger changes, read the full skill: `.trae/skills/fe-data-fetching/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-data-fetching lands for Continue

.frontend-skills/skills/fe-data-fetching/SKILL.mdskill
.frontend-skills/skills/fe-data-fetching/references/data-fetching.mdskill
.continue/rules/fe-data-fetching.mdrule file

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.continue/rules/fe-data-fetching.md

---
name: "Data fetching"
description: "Loads and changes server data in front-end apps - framework loaders, TanStack Query, SWR, Nuxt useFetch, Angular httpResource - with correct cache keys, one stable client, loading and error states, race-free effects and invalidation after mutations. Use when fetching data in a component, adding a query or mutation, or fixing stale, duplicated or flickering data."
globs: ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "**/*.vue", "**/*.svelte"]
alwaysApply: false
---

# Data fetching (frontend-skills)

- Read server data through the framework loader or a server-state library, not per-component fetch plus loading flags (state/server-state-cache).
- A query key holds every variable its function reads (state/query-key-deps).
- TanStack Query 5 takes one options object: `useQuery({ queryKey, queryFn })` (state/query-object-syntax).
- Create the `QueryClient` once, never in a component body (state/query-client-stable).
- Render pending, error (with retry) and success states; never data only (state/query-error-state).
- Query functions throw on HTTP errors: check `res.ok` (js/fetch-check-ok).
- An effect that fetches into state ignores or aborts stale responses in its cleanup (state/fetch-effect-cleanup).
- After a mutation, invalidate or update every query it changed (state/invalidate-after-mutation).
- Start independent requests together (`Promise.all`, parallel queries), never one after another.
- Pass the `signal` the library gives you to `fetch` so cancelled queries stop.

Before larger changes, read the full skill: `.frontend-skills/skills/fe-data-fetching/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-data-fetching lands for Amazon Q Developer

.frontend-skills/skills/fe-data-fetching/SKILL.mdskill
.frontend-skills/skills/fe-data-fetching/references/data-fetching.mdskill
.amazonq/rules/frontend-skills.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Amazon Q Developer: Amazon Q Developer IDE plugins reach end of support on 2027-04-30; AWS points to Kiro.

Amazon Q Developer has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

.amazonq/rules/frontend-skills.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-data-fetching` (Data fetching): when editing `**/*.js`, `**/*.jsx`, `**/*.ts`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, first read `.frontend-skills/skills/fe-data-fetching/SKILL.md`.

The real file

Where fe-data-fetching lands for Aider

.frontend-skills/skills/fe-data-fetching/SKILL.mdskill
.frontend-skills/skills/fe-data-fetching/references/data-fetching.mdskill
CONVENTIONS.mdinstruction block
.aider.conf.ymlconfig

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Aider has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CONVENTIONS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-data-fetching` (Data fetching): when editing `**/*.js`, `**/*.jsx`, `**/*.ts`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, first read `.frontend-skills/skills/fe-data-fetching/SKILL.md`.

The real file

How to use it

Once installed, the agent loads the skill by itself when a task matches its description. You can also ask for it in your own words, for example:

And to check and fix the work:

Use the fe-data-fetching skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain state/server-state-cache and fix it here.

Rules it teaches

state/server-state-cache
Server data comes from the framework loader or a server-state library, not fetch plus useState and loading flags in each component.
moderatemanual
state/query-key-deps
A TanStack Query key holds every variable its query function reads, so a new id fetches new data instead of showing the old.
seriousstatic
state/query-object-syntax
TanStack Query 5 hooks take one options object; the v4 positional form useQuery(key, fn) and useMutation(fn) no longer works.
seriousstatic
state/query-client-stable
The QueryClient is created once - in useState(() => new QueryClient()) or a module helper - never in a component's render.
seriousstatic
state/query-error-state
A component that reads a query (TanStack Query, SWR) also reads its error and shows it; it never renders only data.
moderatestatic
state/fetch-effect-cleanup
An effect that fetches into state returns a cleanup that ignores or aborts stale responses.
moderatestatic
state/invalidate-after-mutation
After a mutation succeeds, invalidate or update every cached query it changed, so lists and details show the new data.
moderatemanual
js/fetch-check-ok
After fetch, check response.ok (or the status) before reading the body; fetch does not reject on 404 or 500.
moderatestatic

The rule digest

This part is copied into each agent's scoped rule file, so it stands on its own:

Read server data through the framework loader or a server-state library, not per-component fetch plus loading flags (state/server-state-cache).
A query key holds every variable its function reads (state/query-key-deps).
TanStack Query 5 takes one options object: useQuery({ queryKey, queryFn }) (state/query-object-syntax).
Create the QueryClient once, never in a component body (state/query-client-stable).
Render pending, error (with retry) and success states; never data only (state/query-error-state).
Query functions throw on HTTP errors: check res.ok (js/fetch-check-ok).
An effect that fetches into state ignores or aborts stale responses in its cleanup (state/fetch-effect-cleanup).
After a mutation, invalidate or update every query it changed (state/invalidate-after-mutation).
Start independent requests together (Promise.all, parallel queries), never one after another.
Pass the signal the library gives you to fetch so cancelled queries stop.

Steps the agent follows

Use the stack's own loader first: Server Components or route loaders (Next.js, React Router), load (SvelteKit), useFetch/useAsyncData (Nuxt), httpResource or resolvers (Angular). Add TanStack Query or SWR for client-side server state.
Define each query once with queryOptions({ queryKey, queryFn }) or a key factory (todoKeys.detail(id)) and reuse it in components, prefetching and invalidation.
Set staleTime deliberately (the default 0 refetches on every mount and window focus); use gcTime for how long unused data stays.
Write mutations with useMutation({ mutationFn, onSuccess }); invalidate by key prefix, or setQueryData from the response; optimistic updates roll back in onError.
Announce loading with role="status" and errors with role="alert" where the change is not otherwise visible; keep layout stable with skeletons of the final size.
Use plain fetch (or $fetch in Nuxt) only in event handlers and outside components, through one helper that checks ok.

How the agent checks the work

npx github:dawidolko/frontend-skills audit --changed reports missing key variables, v4 query syntax, per-render clients, queries without an error state and effects that fetch without a cleanup.
Enable @tanstack/query/exhaustive-deps in ESLint where TanStack Query is used.
In the Network panel, navigate between two items quickly: each view must show its own data, with no duplicate requests for the same key.

Checked by the audit

The static checks of these rules run in audit; this is a real session on the example project:

Terminal recording: audit lists findings by severity with rule ids and file:line, and fails at serious. — `audit`: counts by severity, each rule with its first location, the exit code.

Reference files

references/data-fetching.md1803 tokens

SKILL.md on GitHub