用途
frontend-patterns 是一份现代前端开发模式参考，面向 React、Next.js 以及注重性能的用户界面。它用于在构建或审查 React 组件、管理状态、实现数据获取、优化性能、处理表单、处理客户端路由与导航、构建可访问且响应式的 UI 模式时提供实践指导。
主要能力
该技能按主题组织了大量模式与代码示例：
- 组件模式：组合优于继承（Card 系列组件）、复合组件（Tabs/TabList/Tab 通过 Context 共享状态）、Render Props（DataLoader 泛型组件）。
- 自定义 Hooks：状态管理 Hook（useToggle）、异步数据获取 Hook（useQuery，含 onSuccess/onError/enabled 选项与 refetch 稳定性处理）、防抖 Hook（useDebounce）。
- 状态管理模式：Context + Reducer 模式，通过 useReducer 与 createContext 管理 markets、selectedMarket、loading 等状态，并提供 useMarkets 自定义 Hook。
- 性能优化：memoization（useMemo 用于昂贵计算、useCallback 用于传给子组件的函数、React.memo 用于纯组件）、代码分割与懒加载（lazy + Suspense）、长列表虚拟化（@tanstack/react-virtual 的 useVirtualizer）。
- 表单处理：受控表单与校验（字段级错误提示、提交前 validate）。
- 错误边界：基于类组件的 ErrorBoundary，含 getDerivedStateFromError 与 componentDidCatch。
- 动画模式：Framer Motion 的列表动画与模态框动画（AnimatePresence、motion.div）。
- 无障碍模式：键盘导航（方向键、Enter、Escape 处理，role/aria 属性）与焦点管理（打开时保存并聚焦、关闭时恢复焦点）。
使用方式
资料以代码示例形式呈现各模式，示例使用 TypeScript 与 React 语法，可直接参考其结构编写组件、Hooks 与工具函数。示例中包含注释说明关键设计意图，例如 useQuery 中通过 ref 保持 fetcher 与 options 的引用稳定，避免无限请求循环；useMemo 排序前先复制数组以避免原地修改。
适用场景
- 构建或审查 React / Next.js 组件。
- 管理组件状态（useState、useReducer、Zustand、Context）。
- 实现数据获取（SWR、React Query、服务端组件）。
- 优化性能（memoization、虚拟化、代码分割）。
- 处理表单（校验、受控输入、Zod schema）。
- 处理客户端路由与导航。
- 构建可访问、响应式的 UI 模式。
限制
资料未提供该技能的安装命令、版本要求、依赖清单、收费方式、平台支持范围或效果数据，这些信息暂未提供。示例中涉及的第三方库（如 @tanstack/react-virtual、framer-motion、Zod、SWR、React Query、Zustand）仅作为模式示例出现，具体集成方式需参考各自文档。