# Data Fetching

> >-

- **Type:** Skill
- **Install:** `agentstack add skill-sukirman1901-frontend-expert-data-fetching`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [sukirman1901](https://agentstack.voostack.com/s/sukirman1901)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [sukirman1901](https://github.com/sukirman1901)
- **Source:** https://github.com/sukirman1901/frontend-expert/tree/main/skills/data-fetching
- **Website:** https://github.com/sukirman1901/frontend-expert

## Install

```sh
agentstack add skill-sukirman1901-frontend-expert-data-fetching
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Data Fetching

## Overview

Separate **server state** from UI chrome. Every remote surface needs loading / error / empty / success — with retry where useful. Parity with Conventions **States** line.

## When to use

- Lists, detail, search results, dashboards from API
- Introducing React Query, SWR, router loaders, `useEffect` fetch
- Fixing spinner-forever or silent failure UIs

## When to skip

- Static content / mock-only prototypes with no async
- Pure presentational components receiving props only

## MUST (ship)

| State | Required UX |
|-------|-------------|
| **Loading** | Skeleton/placeholder — not a blank hole (prefer local to the widget) |
| **Error** | User-safe message + **Retry** (or clear next step) |
| **Empty** | Real empty copy + optional action (not Lorem) |
| **Success** | Render data; don’t leave stale error UI |

Also: abort/cancel on unmount when using raw `fetch`; don’t block the whole app shell for one panel.

## Workflow

1. **Choose ownership** — server state in query/loader; local UI state stays in the component
2. **Required states** — loading · error (message + retry) · empty · success
3. **UX** — skeleton preferred; isolate loading to the widget when possible
4. **Errors** — user-safe message; log details; retry for transient failures
5. **Cache** — stale-while-revalidate when the stack supports it; invalidate on mutations
6. **Hand off** — presentation via `ui-components`; tokens + `responsive-ui` still apply
7. **Conventions** — report `States: loading / empty / error covered? yes`

## Agent boundaries

- **May decide:** Query lib vs loader vs `useEffect` machine; skeleton vs spinner; toast vs inline error
- **Must not:** Swallow errors to `console.log` only; ship success-only UI; invent off-token loading colors

## Checklist

- [ ] Loading / error / empty / success covered
- [ ] Retry or clear next step on error
- [ ] Empty copy is real (not Lorem)
- [ ] Fetch logic not tangled inside giant presentational files
- [ ] Race/unmount handled for raw fetch
- [ ] Responsive + tokens still apply to async UI
- [ ] Conventions States line filled when shipping

## Depth

Patterns: `references/data-fetching.md`.  
State org: `references/architecture.md`.  
Ship gate: `references/compliance-gates.md` (States).

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [sukirman1901](https://github.com/sukirman1901)
- **Source:** [sukirman1901/frontend-expert](https://github.com/sukirman1901/frontend-expert)
- **License:** MIT
- **Homepage:** https://github.com/sukirman1901/frontend-expert

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-sukirman1901-frontend-expert-data-fetching
- Seller: https://agentstack.voostack.com/s/sukirman1901
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.