用途：该技能用于指导构建技术上可靠、性能良好且视觉出色的 Web 应用，合并自 11 个旧版前端、React 与 Next.js 技能。
主要能力：
- 架构与可行性：编码前计算前端可行性与复杂度指数 FFCI =（架构契合 + 可复用性 + 性能）−（复杂度 + 维护成本）。10-15 为优秀可推进；6-9 可接受需谨慎；低于 6 应重新设计或简化。
- React 19 与 Next.js 15 模式：App Router 使用基于文件夹的路由、并行路由与拦截路由；默认使用服务端组件（RSC）获取数据，仅在需要交互时用 'use client'；边缘优先，优先在 Edge 运行中间件与 Edge Functions 以降低 TTFB；构建小而逻辑独立的 Hooks/Composables，开发偏好 Vite、测试偏好 Vitest；使用 useActionState、useOptimistic 与 use API；以 Suspense 优先，避免手动 isLoading 标志。
- 状态管理与数据获取：服务端状态用 TanStack Query 做缓存与同步；组件级用 useState，复杂全局状态用 Zustand，子树配置用 Context；遵循“Props down, Actions up”；在 API/表单边界用 Zod 或 Valibot 做端到端类型安全校验。
- 高水准 UI 设计：每个 UI 需有明确美学方向（如编辑式粗野主义、奢华极简）；用 DFII =（冲击力 + 上下文契合 + 可行性 + 性能）− 一致性风险 评估；禁止通用“AI UI”或默认 Tailwind/ShadCN 布局；要求自定义字体、有目的动效（Framer Motion）、纹理层次，每页一个“记忆锚点”（如 Magic UI 的 Bento Grid）。
- 性能优化：实现 ISR 与 PPR；用 Turborepo 智能缓存加速 monorepo 构建与测试；对重型模块用 React.lazy 动态导入；优化 Core Web Vitals（LCP < 2.5s，CLS < 0.1）；用 Next.js <Image> 自动优化图片；用 npm list 或打包分析器审计依赖，优先轻量库（如 lucide-react 而非 font-awesome）。
执行流程：阶段 1 设计思考，定义基调与美学方向；阶段 2 数据架构，划分服务端与客户端组件；阶段 3 FFCI/DFII 检查；阶段 4 组件实现，小而专注并标注 Props 类型；阶段 5 验证，做性能审计与无障碍检查。
限制：资料未提供具体安装命令、收费方式、支持平台与版本兼容性细节，暂未提供。