用途：该技能面向 React、Next.js 及高性能用户界面的现代前端开发模式，在构建组件、管理状态、实现数据获取、优化性能、处理表单、处理客户端路由与导航、构建可访问且响应式的 UI 时激活。
主要能力：组件模式涵盖组合优于继承、复合组件、Render Props；自定义 Hook 涵盖状态管理与异步数据获取、防抖；状态管理涵盖 Context 与 useReducer；性能优化涵盖 useMemo、useCallback、React.memo 记忆化、代码分割与懒加载、长列表虚拟化；表单处理涵盖受控表单与验证；错误处理涵盖错误边界；动画涵盖 Framer Motion 的列表与弹窗动画；可访问性涵盖键盘导航与焦点管理。数据获取提及 SWR、React Query、服务端组件，表单验证提及 Zod 模式，状态管理提及 Zustand、Context。
使用方式：文档以代码示例展示各模式写法，例如组合式 Card 组件、Tabs 复合组件、DataLoader 的 Render Props、useToggle 与 useQuery 自定义 Hook、useDebounce 防抖、Context + Reducer 提供者、useMemo 排序、lazy 与 Suspense 懒加载、@tanstack/react-virtual 的 useVirtualizer、受控表单 validate 函数、ErrorBoundary 类组件、AnimatePresence 动画以及 role=combobox/dialog 的键盘与焦点管理。用户需按项目复杂度选择合适模式并自行集成到代码中。
适用场景：React 与 Next.js 项目的前端组件设计、状态与数据流组织、渲染性能排查与优化、表单交互、动效实现和可访问性改进。
限制：资料未提供安装命令、依赖安装方式、版本要求、收费与价格信息、平台支持范围或实际效果数据，这些内容暂未提供。示例中的具体 API 与库用法需结合项目实际情况验证。