[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EG9YN91HP87Z1KVASKA5DQ":3,"skill-same:01M6EG9YN91HP87Z1KVASKA5DQ":69},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":20,"frontMatter":21,"refName":22,"commitSha":23,"skillDirectory":24,"forksCount":25,"repositoryHtmlUrl":26,"repositoryHomepageUrl":27,"ownerHtmlUrl":28,"ownerBlogUrl":6,"ownerDescription":29,"updatedAt":30,"install":31,"resources":44},"01M6EG9YN91HP87Z1KVASKA5DQ","swr",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fswr\u002FSKILL.md",[],[5],"2026-11-10 10:12:30",false,"# SWR\n\n## Overview\n\nSWR (stale-while-revalidate) is a React data fetching library — show cached data instantly, then revalidate in the background. Built by Vercel, it handles caching, deduplication, revalidation on focus\u002Freconnect, pagination, and optimistic updates. Simpler than TanStack Query for straightforward data fetching, with a smaller API surface.\n\n## When to Use\n\n- Fetching API data in React components\n- Need instant page loads with background revalidation\n- Real-time data that should refresh automatically\n- Paginated or infinite scroll data\n- Simpler alternative to TanStack Query for most use cases\n\n## Instructions\n\n### Setup\n\n```bash\nnpm install swr\n```\n\n### Basic Data Fetching\n\n```tsx\n\u002F\u002F hooks\u002FuseUser.ts — Fetch and cache user data\nimport useSWR from \"swr\";\n\nconst fetcher = (url: string) => fetch(url).then((r) => r.json());\n\nexport function useUser(userId: string) {\n  const { data, error, isLoading, mutate } = useSWR(\n    `\u002Fapi\u002Fusers\u002F${userId}`,\n    fetcher,\n  );\n\n  return {\n    user: data,\n    isLoading,\n    isError: error,\n    mutate,  \u002F\u002F Manually revalidate\n  };\n}\n\n\u002F\u002F Usage in component\nfunction UserProfile({ userId }) {\n  const { user, isLoading } = useUser(userId);\n  if (isLoading) return \u003Cdiv>Loading...\u003C\u002Fdiv>;\n  return \u003Cdiv>{user.name}\u003C\u002Fdiv>;\n}\n```\n\n### Global Configuration\n\n```tsx\n\u002F\u002F app\u002Fproviders.tsx — Global SWR config\nimport { SWRConfig } from \"swr\";\n\nconst fetcher = async (url: string) => {\n  const res = await fetch(url);\n  if (!res.ok) throw new Error(\"API error\");\n  return res.json();\n};\n\nexport function Providers({ children }) {\n  return (\n    \u003CSWRConfig\n      value={{\n        fetcher,\n        revalidateOnFocus: true,      \u002F\u002F Refresh when tab regains focus\n        revalidateOnReconnect: true,   \u002F\u002F Refresh when internet reconnects\n        dedupingInterval: 2000,        \u002F\u002F Dedupe requests within 2s\n        errorRetryCount: 3,\n      }}\n    >\n      {children}\n    \u003C\u002FSWRConfig>\n  );\n}\n```\n\n### Mutation and Optimistic Updates\n\n```tsx\n\u002F\u002F components\u002FTodoList.tsx — Optimistic updates\nimport useSWR, { useSWRConfig } from \"swr\";\n\nfunction TodoList() {\n  const { data: todos, mutate } = useSWR(\"\u002Fapi\u002Ftodos\");\n\n  const addTodo = async (title: string) => {\n    const newTodo = { id: Date.now(), title, done: false };\n\n    \u002F\u002F Optimistic update — show immediately, revalidate in background\n    await mutate(\n      async () => {\n        await fetch(\"\u002Fapi\u002Ftodos\", {\n          method: \"POST\",\n          body: JSON.stringify({ title }),\n        });\n        \u002F\u002F Return updated data (or let SWR refetch)\n      },\n      {\n        optimisticData: [...(todos || []), newTodo],\n        rollbackOnError: true,  \u002F\u002F Revert if API fails\n        revalidate: true,       \u002F\u002F Refetch after mutation\n      }\n    );\n  };\n}\n```\n\n### Pagination\n\n```tsx\n\u002F\u002F components\u002FPostList.tsx — Paginated data\nimport useSWR from \"swr\";\n\nfunction PostList() {\n  const [page, setPage] = useState(1);\n\n  const { data, isLoading } = useSWR(`\u002Fapi\u002Fposts?page=${page}&limit=20`);\n\n  return (\n    \u003Cdiv>\n      {data?.posts.map((post) => \u003CPostCard key={post.id} post={post} \u002F>)}\n      \u003Cbutton onClick={() => setPage(page - 1)} disabled={page \u003C= 1}>Previous\u003C\u002Fbutton>\n      \u003Cbutton onClick={() => setPage(page + 1)} disabled={!data?.hasMore}>Next\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n### Infinite Loading\n\n```tsx\n\u002F\u002F components\u002FInfiniteFeed.tsx — Infinite scroll\nimport useSWRInfinite from \"swr\u002Finfinite\";\n\nfunction InfiniteFeed() {\n  const { data, size, setSize, isLoading } = useSWRInfinite(\n    (index) => `\u002Fapi\u002Ffeed?page=${index + 1}&limit=20`,\n  );\n\n  const posts = data?.flatMap((page) => page.posts) || [];\n  const hasMore = data?.[data.length - 1]?.hasMore;\n\n  return (\n    \u003Cdiv>\n      {posts.map((post) => \u003CPostCard key={post.id} post={post} \u002F>)}\n      {hasMore && (\n        \u003Cbutton onClick={() => setSize(size + 1)} disabled={isLoading}>\n          Load More\n        \u003C\u002Fbutton>\n      )}\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n## Examples\n\n### Example 1: Dashboard with auto-refreshing data\n\n**User prompt:** \"Build a dashboard that shows live metrics — refresh every 5 seconds.\"\n\nThe agent will use SWR with `refreshInterval: 5000`, show cached data instantly on mount, and handle loading\u002Ferror states.\n\n### Example 2: CRUD with optimistic updates\n\n**User prompt:** \"Build a todo app where adding\u002Fdeleting feels instant.\"\n\nThe agent will use SWR mutations with optimistic data, rollback on error, and automatic revalidation after changes.\n\n## Guidelines\n\n- **Key = cache key** — same key = same cached data across components\n- **`null` key skips fetching** — conditional fetching: `useSWR(userId ? \u002Fapi\u002F... : null)`\n- **Revalidation on focus** — data refreshes when user returns to tab\n- **Optimistic updates** — show changes immediately, revert on error\n- **`mutate` for cache updates** — bound (per-key) or global\n- **`useSWRInfinite` for infinite scroll** — accumulates pages\n- **Deduplication** — multiple components using same key = one request\n- **Error retry built-in** — automatic with exponential backoff\n- **Smaller than TanStack Query** — simpler API for simpler needs\n- **Works with any fetcher** — fetch, axios, GraphQL clients\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002FTerminalSkills\u002Fskills\u002Fswr",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":32,"prompt":42,"zipAvailable":43},[33,36,39],{"tool":34,"command":35},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill swr",{"tool":37,"command":38},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill swr",{"tool":40,"command":41},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill swr","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fswr\u002FSKILL.md",true,[45,51,55,59,65],{"path":46,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":49,"sourceHtmlUrl":50},"examples\u002Fconsole_logging.py","SCRIPT","脚本",1027,"https:\u002F\u002Fgithub.com\u002FTorchiaHub\u002FSkills\u002Fblob\u002Fmaster\u002F01-Inbox\u002Fdownloads\u002Fanthropics-skills\u002F20260514T124609Z\u002Fsource\u002Fskills\u002Fwebapp-testing\u002Fexamples\u002Fconsole_logging.py",{"path":52,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":53,"sourceHtmlUrl":54},"examples\u002Felement_discovery.py",1463,"https:\u002F\u002Fgithub.com\u002FTorchiaHub\u002FSkills\u002Fblob\u002Fmaster\u002F01-Inbox\u002Fdownloads\u002Fanthropics-skills\u002F20260514T124609Z\u002Fsource\u002Fskills\u002Fwebapp-testing\u002Fexamples\u002Felement_discovery.py",{"path":56,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":57,"sourceHtmlUrl":58},"examples\u002Fstatic_html_automation.py",953,"https:\u002F\u002Fgithub.com\u002FTorchiaHub\u002FSkills\u002Fblob\u002Fmaster\u002F01-Inbox\u002Fdownloads\u002Fanthropics-skills\u002F20260514T124609Z\u002Fsource\u002Fskills\u002Fwebapp-testing\u002Fexamples\u002Fstatic_html_automation.py",{"path":60,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":63,"sourceHtmlUrl":64},"LICENSE.txt","LICENSE","许可证",11345,"https:\u002F\u002Fgithub.com\u002FTorchiaHub\u002FSkills\u002Fblob\u002Fmaster\u002F01-Inbox\u002Fdownloads\u002Fanthropics-skills\u002F20260514T124609Z\u002Fsource\u002Fskills\u002Fwebapp-testing\u002FLICENSE.txt",{"path":66,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":67,"sourceHtmlUrl":68},"scripts\u002Fwith_server.py",3693,"https:\u002F\u002Fgithub.com\u002FTorchiaHub\u002FSkills\u002Fblob\u002Fmaster\u002F01-Inbox\u002Fdownloads\u002Fanthropics-skills\u002F20260514T124609Z\u002Fsource\u002Fskills\u002Fwebapp-testing\u002Fscripts\u002Fwith_server.py",[70,84,94,103,109,116],{"skillNo":71,"name":72,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":80,"publishedAt":18},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[75],{"categoryNo":76,"categoryName":77,"taxonomyType":78,"taxonomyTypeDesc":79},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[81,82,83],"model","model hierarchy","model hierarchy skill",{"skillNo":85,"name":86,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":90,"publishedAt":18},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[89],{"categoryNo":76,"categoryName":77,"taxonomyType":78,"taxonomyTypeDesc":79},[91,92,93],"MCP","zoom","zoom mcp",{"skillNo":95,"name":96,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":99,"publishedAt":18},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[100,101,102,92],"sdk","zoom apps sdk","apps",{"skillNo":104,"name":105,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":18},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[105],{"skillNo":110,"name":111,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":112,"categories":113,"keywords":115,"publishedAt":18},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[114],{"categoryNo":76,"categoryName":77,"taxonomyType":78,"taxonomyTypeDesc":79},[111],{"skillNo":117,"name":118,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":121,"publishedAt":18},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[118]]