用途
该技能提供现代前端开发模式的参考集合，主要面向使用 React、Next.js 构建高性能用户界面的场景。它把常见的前端工程问题整理为可复用的模式与代码示例，帮助开发者在组件设计、状态管理、性能优化、表单处理、动画和无障碍等方面采用较为规范的实现方式。
主要能力
技能内容按主题组织，覆盖以下方面：
- 组件模式：组合优于继承（Composition Over Inheritance）、复合组件（Compound Components）、Render Props 模式。
- 自定义 Hooks 模式：状态管理 Hook（如 useToggle）、异步数据获取 Hook（useQuery）、防抖 Hook（useDebounce）。
- 状态管理模式：Context + Reducer 模式，通过 useReducer 与 createContext 管理共享状态。
- 性能优化：使用 useMemo、useCallback、React.memo 进行 memo 化；使用 lazy 与 Suspense 实现代码分割与懒加载；使用 @tanstack/react-virtual 实现长列表虚拟化。
- 表单处理模式：受控表单与校验（validate 函数、错误状态管理、提交处理）。
- 错误边界模式：基于类组件的 ErrorBoundary，配合 getDerivedStateFromError 与 componentDidCatch。
- 动画模式：使用 framer-motion 的 motion 与 AnimatePresence 实现列表动画与模态框动画。
- 无障碍模式：键盘导航（方向键、Enter、Escape 处理）与焦点管理（打开时保存并聚焦、关闭时恢复焦点）。
每个主题均配有 TypeScript/React 代码示例，展示推荐写法。
使用方式
该技能以模式参考与代码示例的形式提供，适用于在开发 React/Next.js 前端时查阅和套用相应模式。资料中说明：此技能适用于执行概述中描述的工作流或操作；仅当任务明确匹配上述范围时使用。
适用场景
- 设计可维护的 React 组件结构（组合、复合组件、Render Props）。
- 抽取可复用的自定义 Hooks。
- 使用 Context + Reducer 组织应用状态。
- 优化渲染性能、拆分代码包、处理长列表。
- 实现带校验的表单、错误边界、动画与无障碍交互。
限制
- 仅当任务明确匹配上述范围时使用该技能。
- 不应将输出视为针对具体环境的验证、测试或专家评审的替代。
- 若缺少必要输入、权限、安全边界或成功标准，应停止并请求澄清。
- 关于收费、价格、平台支持等具体信息，资料中暂未提供。