用于审查或改进前端无障碍、语义结构、键盘支持、焦点管理、ARIA 标签、屏幕阅读器行为、WCAG 2.2 问题、触控无障碍或辅助技术回归；中文触发词包括 无障碍、accessibility、a11y、WCAG、屏幕阅读器。
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
bovinphang/frontend-craft222026년 9월 26일 업데이트
무료GitHub에 공개
fec-data-fetching
用于实现或审查前端服务端状态流程：类型化查询、请求缓存、失效、mutation、乐观更新、无限查询、预取、SSR hydration 或 API 层整合。不要用于本地 UI 状态或 Service Worker 缓存；中文触发词包括 数据获取、缓存、乐观更新。
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
설치 방법 보기포함된 파일(2)
- SKILL.md2.8 KB
- references/query-patterns.md3.7 KB
SKILL.md(원문)
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Server State 数据获取
用途
为前端 server state 建立清晰的数据获取、缓存、失效和提交边界，避免请求状态散落在页面组件中。
流程
- 判断状态来源：来自服务端且需要缓存、去重、刷新、分页或 mutation 时使用请求缓存方案；纯本地 UI 状态用组件 state 或 store。
- 先沿用项目已有数据获取库；新增依赖时 React/Vue/Solid/Svelte 可考虑 TanStack Query，也可沿用 SWR、Nuxt/Nitro 数据获取或项目封装。
- 设计稳定 cache key/query key：结构包含实体、动作和所有影响结果的参数。
- API 函数保持纯请求函数，数据 hook/composable 负责缓存、select、loading/error/empty 状态。
- mutation 成功后 invalidation；需要即时反馈时使用 optimistic update 并在失败时回滚。
React 快速开始
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
export function UserList({ keyword }: { keyword: string }) {
const query = useQuery({
queryKey: ["users", "list", { keyword }],
queryFn: () => getUserList({ keyword, page: 1, pageSize: 20 }),
select: (response) => response.list,
});
if (query.isLoading) return <Skeleton />;
if (query.isError) return <ErrorFallback onRetry={() => query.refetch()} />;
if (!query.data?.length) return <EmptyState />;
return query.data.map((user) => <UserRow key={user.id} user={user} />);
}
export function useCreateUser() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: createUser,
onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }),
});
}
详细参考
涉及是否需要查询库、QueryClient 默认配置、Vue adapter、乐观更新、无限滚动查询、预取、SSR 水合和 API 层整合时，加载 references/query-patterns.md。
约束
- 相同数据必须复用相同 cache key/query key；参数缺失会造成缓存串读。
staleTime过长会显示旧数据，过短会造成频繁请求。- 请求缓存库不管理本地 UI 状态；不要把 modal、输入框值放进 query cache。
- 乐观更新必须保存快照并在失败时回滚。
- SSR/SSG 场景必须使用框架支持的预取、水合或服务端数据边界。
预期输出
数据获取层具备 loading/error/empty/data 状态，重复请求自动去重，mutation 后缓存正确失效或回滚，API 层与 UI 层边界清晰。
리뷰
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
댓글
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
같은 저장소의 스킬
Use when reviewing or improving frontend accessibility, semantic structure, keyboard support, focus management, ARIA labels, screen reader behavior, WCAG 2.2 issues, touch accessibility, or assistive-technology regressions; Chinese triggers include accessibility, accessibility, a11y, WCAG, screen reader.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
bovinphang/frontend-craft222026년 9월 26일 업데이트
Use when absorbing ideas, capabilities, workflows, architecture, quality systems, ecosystem extensions, or engineering practices from any reference system into the current project through original, project-native redesign rather than copying.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
bovinphang/frontend-craft222026년 9월 26일 업데이트
用于从参考系统中吸收想法、能力、工作流、架构、质量体系、生态扩展或工程实践，并通过原创的项目内重设计转化为当前项目能力，而不是复制原实现。
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
bovinphang/frontend-craft222026년 9월 26일 업데이트
用于设计、实现或审查前后端 API 集成、类型化 API client、REST/tRPC/OpenAPI 客户端选型、认证刷新、API 错误映射、上传流程、SSE/WebSocket/轮询选择、CORS 相关前端行为或跨边界 loading/error 状态。不要用于纯后端服务架构或仅 TanStack Query 缓存策略；中文触发词包括 API 集成、前后端联调、typed API client、接口错误处理、SSE、WebSocket。
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
bovinphang/frontend-craft222026년 9월 26일 업데이트
Use when designing, implementing, or reviewing frontend-to-backend API integration, typed API clients, REST/tRPC/OpenAPI client choices, auth refresh, API error mapping, upload flows, SSE/WebSocket/polling choices, CORS-facing frontend behavior, or cross-boundary loading/error states. Do not use for backend-only service architecture or TanStack Query cache policy alone; Chinese triggers include API integration, front-end and back-end joint debugging, typed API client, Interface error handling, SSE, WebSocket.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
bovinphang/frontend-craft222026년 9월 26일 업데이트