Swr
Implement client-side fetch, cache, revalidation, mutations, and infinite scroll in React with SWR best practices.
Overview
SWR is an agent skill for the Build phase that teaches React client-side data fetching, caching, revalidation, mutations, and infinite loading with the SWR library.
Install
npx skills add https://github.com/vercel-labs/vercel-plugin --skill swrWhat is this skill?
- Path, import, bash, and prompt signals to auto-attach when swr or useSWR appears in the repo
- Guidance for stale-while-revalidate caching, focus/reconnect revalidation, and mutation flows
- Covers optimistic UI, pagination, and infinite loading intents
- Official docs and sitemap retrieval aliases for data fetching and client cache questions
- Metadata priority level 4 in skill frontmatter
- minScore 6 prompt signal gate for auto-retrieval
Adoption & trust: 58 installs on skills.sh; 187 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your React app refetches blindly or shows stale UI because cache, revalidate, and mutation patterns for SWR are not wired consistently.
Who is it for?
Solo builders shipping React or Next.js frontends that consume REST or JSON APIs with interactive lists and forms.
Skip if: Server Components–only data loading with no client hooks, or non-React stacks where SWR does not apply.
When should I use this skill?
Building React apps with client-side data fetching, caching, revalidation, mutations, optimistic UI, pagination, or infinite loading using the SWR library.
What do I get? / Deliverables
You implement fetchers and useSWR hooks with coherent revalidation, mutations, and paginated or infinite lists aligned with SWR docs.
- Fetcher utilities and useSWR hook implementations
- Mutation and revalidation patterns for lists and detail views
Recommended Skills
Journey fit
How it compares
Opinionated SWR workflow skill—not a generic React Query substitute guide or an MCP data proxy.
Common Questions / FAQ
Who is swr for?
Indie developers and agents building React UIs that need cached client fetches, revalidation, and mutations using the SWR package.
When should I use swr?
During Build frontend work when adding useSWR, fetcher utilities, optimistic updates, or infinite scroll to a SaaS or content app.
Is swr safe to install?
It is guidance tied to the public SWR docs and local code patterns; review the Security Audits panel on this Prism page for the vercel-plugin package provenance.
SKILL.md
READMESKILL.md - Swr
# SWR — React Hooks for Data Fetching You are an expert in SWR v2 (latest: 2.4.1), the React Hooks library for data fetching by Vercel. SWR implements the stale-while-revalidate HTTP cache invalidation strategy — serve from cache first, then revalidate in the background. ## Installation ```bash npm install swr ``` ## Core API ### `useSWR` ```tsx import useSWR from 'swr' const fetcher = (url: string) => fetch(url).then(res => res.json()) function Profile() { const { data, error, isLoading, mutate } = useSWR('/api/user', fetcher) if (isLoading) return <div>Loading...</div> if (error) return <div>Error loading data</div> return <div>Hello, {data.name}</div> } ``` **Key parameters:** - `key` — unique string, array, or function identifying the resource (often a URL) - `fetcher` — async function that receives the key and returns data - `options` — optional config object **Return values:** `data`, `error`, `isLoading`, `isValidating`, `mutate` ### `useSWRMutation` — Remote Mutations ```tsx import useSWRMutation from 'swr/mutation' async