用途
该技能为全栈应用提供专业 UI/UX 设计支持，定位是扩展通用 UX 设计技能（Generic UX Designer），在其设计思维流程、研究方法和评审框架基础上，补充全栈特有的 UX 考量。资料明确指出其服务对象为 Next.js/NestJS 全栈应用。
主要能力
全栈 UX 考量
针对服务端渲染场景，资料给出以下对应关系：初始页面加载使用水合安全的骨架屏；数据获取上，静态内容用服务器组件、动态内容用客户端组件；认证使用带重定向 UX 的受保护路由；表单提交采用渐进增强。
水合安全模式
给出一个组件示例：时间戳组件通过 useState 与 useEffect 在客户端设置格式化文本，未完成时显示 Loading，以避免水合不匹配。
API 加载与错误状态
加载状态按耗时分级：小于 100ms 不显示指示器（如按钮点击）；100ms 至 1s 使用轻微 spinner（如表单提交）；1s 至 5s 使用骨架屏（如页面拉取）；大于 5s 使用进度条（如文件上传）。错误状态设计流程为：API 错误 → 解析错误 → 用户友好消息 → 恢复动作，并区分类别：400 校验错误显示字段错误、修复后重试；401 未授权提示请登录、重定向到登录；404 未找到提示条目不存在、返回；500 服务器错误提示出现问题、提供重试按钮。
乐观 UI
给出切换点赞的示例：先立即更新 UI，再调用 API，失败时回滚并提示。适用性上：点赞/收藏适合（低风险、常见动作）；添加评论适合（可显示待定状态）；删除条目不适用（破坏性、需确认）；支付不适用（关键操作、必须验证）；表单提交视复杂度而定。
表单提交与多步骤表单
客户端到服务端流程为：用户输入 → 客户端校验 → 提交 → 服务端校验 → 响应，对应反馈、行内错误、加载、字段错误、成功/失败。多步骤表单示例使用 FormStepper 展示进度并允许返回。
认证 UX
登录流程状态包括：加载认证时显示整页骨架屏；未登录显示登录表单；登录中禁用表单并显示 spinner；成功后重定向并显示提示；出错显示行内错误并保留表单数据。受保护路由模式示例为未登录且非加载中时重定向到登录页并携带来源位置。
实时更新
轮询用于低频更新（通知）；WebSocket 用于聊天与实时协作；SSE 用于单向服务端更新。在线状态提示包括在线状态点、正在输入提示和协作光标。
全栈设计评审
评审维度包括：API 调用期间显示什么、用户能否从错误中恢复、无网络时的行为、登录/登出的过渡是否顺畅、过期数据是否被清晰标示。
使用方式
资料未提供该技能的安装命令或调用方式，仅说明其通过「Extends」方式引用通用 UX 设计技能，并参见 UX Principles 与 Design Patterns 两个共享文档。
适用场景
设计功能、改进 UX、解决用户问题，或进行设计评审时使用，尤其针对 Next.js/NestJS 全栈应用。
限制
资料未说明收费、价格、平台支持范围或效果保证；除上述模式与示例外，未提供其他功能细节。