用途：开发不依赖 Next.js 的完整 React SPA，覆盖路由、状态、数据获取、表单、鉴权、可访问性与性能。可复用组件的细节由 react-component-engineering 负责。
典型技术栈：打包器优先 Vite 或沿用项目现有方案；路由用 React Router；远程数据用 TanStack Query 或项目已采用的等价方案；表单用 React Hook Form 加 Zod schema；样式沿用项目体系（Tailwind、CSS Modules 等），视觉识别见 frontend-design。若仓库已有不同约定，不要强加新库。
架构：src 下分 app（providers、router、shell）、routes（按路由的页面）、features（领域：api、hooks、ui、model）、shared（ui kit、lib、通用 hooks）。重型功能用 lazy 加 Suspense 懒加载路由；provider 放在边缘（query client、主题、鉴权）；路由错误用 error boundary 处理。
状态：本地状态用于短暂 UI；远程状态用 Query 缓存，不必再复制到 Redux；会话全局状态只保留最小 auth/user；可分享的筛选与分页用 URL 作为状态。
数据与表单：类型化 API 层加边缘 schema；mutation 显式失效缓存；表单做校验、字段级错误、pending/disabled 状态；401/403 集中处理（重定向或事件）。
路由与鉴权：在 loader 或 wrapper 中做路由守卫，而非仅隐藏按钮；用嵌套布局区分已登录与公开外壳；处理深链接与 404 回退。
质量：可访问性关注 landmark、焦点、label、对比度；性能用代码分割、大列表虚拟化、有依据的 memo；测试用 Testing Library 覆盖功能，Playwright 覆盖关键流程。
反模式：在 useEffect 中临时抓取且无缓存；过度 prop drilling 而不用组合或局部 context；用全局 store 存服务端状态；把领域逻辑塞进巨型页面组件；在本技能中假设 Next.js API（getServerSideProps、RSC）。
与其他技能集成：组件见 react-component-engineering，Next.js 见 nextjs-architecture，国际化见 i18n-frontend。
完成标准：路由与功能组织清晰；服务端状态与表单可预测；客户端鉴权守卫与 API 对齐；生产构建通过；主流程已测试或按清单人工验证。