← All skills
data-client-react
82 / 100 · Low risk
Fine to try.
By reactive/data-client (GitHub) · coding · 2,041 stars · scanned at commit 030e750
Read, change and render async and shared state in React with @data-client/react: any data from an API or other async source, and global state shared across components (it has to persist somewhere, which makes it async). Use it for loading and error states, mutations and forms, filtered or derived views, and debugging data that looks wrong or stale on screen. Use it in place of fetch in useEffect, or app-wide useState and context; its main hooks are useSuspense, useQuery and useController.
Works with any agent that supports SKILL.md skills.
What this skill can do
Connects to the internet
This is disclosed by the author in the skill's SKILL.md or README.
Found in 38 places.
Show 17 more
- .agents/skills/data-client-react/SKILL.md, line 53
const addTodoToEnd = todo => ctrl.fetch(TodoResource.getList.push, { userId: 1 }, todo); - .agents/skills/data-client-react/SKILL.md, line 55
const deleteTodo = id => ctrl.fetch(TodoResource.delete, { id }); - .agents/skills/data-client-react/SKILL.md, line 57
const getNextPage = (page) => ctrl.fetch(TodoResource.getList.getPage, { userId: 1, page }) - .agents/skills/data-client-react/SKILL.md, line 60
An optimistic `ctrl.fetch()` renders before paint. If that slows a click even with React Compiler or `memo()`, call it in - .agents/skills/data-client-react/SKILL.md, line 69
const post = await ctrl.fetch(PostResource.getList.push, data); - .agents/skills/data-client-react/SKILL.md, line 109
| One endpoint+args | `ctrl.fetch(endpoint, args)`: unawaited reads need no `.catch()` | - .agents/skills/data-client-react/evals/evals.json, line 60
"expected_output": "The click handler calls ctrl.fetch(TodoResource.getList.getPage, { ...args, page }); TodoList keeps rendering useSuspense(TodoResource.getLi - .agents/skills/data-client-react/evals/evals.json, line 82
"prompt": "After `ctrl.fetch(TodoResource.markAllDone)` (returns no body), refresh every cached todo list. Lists are cached under many `{ userId }` filters. Kee - .agents/skills/data-client-react/evals/evals.json, line 108
"`resolveData` calls `controller.fetchIfStale()` for both `IssueResource.get` and `CommentResource.getList` (not `controller.fetch()`).", - .agents/skills/data-client-react/references/Controller.md, line 20
fetch(endpoint, ...args): ReturnType<E>; - .agents/skills/data-client-react/references/Controller.md, line 60
ctrl.fetch(PostResource.getList.push, new FormData(e.currentTarget)) - .agents/skills/data-client-react/references/Controller.md, line 81
ctrl.fetch(PostResource.update, { id }, new FormData(e.currentTarget)) - .agents/skills/data-client-react/references/Controller.md, line 104
await ctrl.fetch(PostResource.delete, { id: post.id }); - .agents/skills/data-client-react/references/Controller.md, line 137
[sideEffect](https://dataclient.io/rest/api/Endpoint#sideeffect) changes how `fetch()` behaves: - .agents/skills/data-client-react/references/Controller.md, line 258
await ctrl.fetch(TradeResource.getList.push, { user: userId }, trade); - .agents/skills/data-client-react/references/Controller.md, line 756
const websocket = new WebSocket(url); - .agents/skills/data-client-react/references/Controller.md, line 977
To act on a mutation's result, use the value `fetch()` resolves with instead of `getState()`. A
and 18 more places
Downloads and installs other software
The author does not mention this.
Found in 3 places.
Install
Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.
if [ -e ~/.agents/skills/'data-client-react' ] || [ -L ~/.agents/skills/'data-client-react' ]; then echo 'A skill folder named data-client-react already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/reactive/data-client' "$d" && git -C "$d" checkout --quiet '030e7507ec1d0dd339a0b2aac7a2a00120caf187' -- '.agents/skills/data-client-react' && mkdir -p ~/.agents/skills && cp -R "$d"/'.agents/skills/data-client-react' ~/.agents/skills/'data-client-react' && rm -rf "$d"; fi
Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'data-client-react' ~/.claude/skills/'data-client-react' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.
Badge for your README
The badge for reactive/data-client shows the score of its lowest-scoring skill.
[](https://zalavijaysinh.github.io/skilltrust/repos/reactive/data-client/)
Score history
| Date | Version | Score |
|---|
| 2026-11-12 | 030e750 | 82 |