// 当 cook-web 需要调整 Next.js App Router 全局或路由级错误兜底页时使用本技能。错误页应直接展示错误名称、message、digest、cause、URL 和可用 stack，避免只提示用户查看控制台。
当修复 ai-shifu 聊天页在移动端与桌面端布局判定不一致的问题时使用本技能。基于真实可见视口宽度而不是仅 `#root.clientWidth` 计算 `frameLayout`，在 `resize` 与 `visualViewport.resize` 时同步，并在断点纠正后关闭过期的移动端抽屉状态。
当处理听课模式的流式音频、buffering、TTS 请求门禁与播放连续性问题时使用本技能。统一音频来源选择、分段合并策略和请求触发时机。
当 ai-shifu 聊天流从 block 粒度向 element 粒度演进，或历史记录与 SSE 渲染一致性出现问题时使用本技能。统一 element_bid 渲染键、兼容旧字段并收敛 AskBlock 归并逻辑。
当 learner 端听课模式需要接入 markdown-flow-ui 的移动端播放器新能力时使用本技能。覆盖横竖屏状态透传、自定义横屏 header、以及播放器文案国际化接入。
当 cook-web 页面在浏览器 fullscreen 场景下需要展示基于 Dialog 的支付弹窗、设置弹窗或业务弹层时，使用本技能排查 portal 容器是否落在全屏节点外。
当 cook-web 需要新增共享 loading 动画时，使用本技能统一公共组件目录、非破坏性导出方式，以及圆点序列动画的可配置实现。
| name | app-error-boundary-display |
| description | 当 cook-web 需要调整 Next.js App Router 全局或路由级错误兜底页时使用本技能。错误页应直接展示错误名称、message、digest、cause、URL 和可用 stack，避免只提示用户查看控制台。 |
src/app/error.tsx 和 src/app/global-error.tsx；前者处理路由段错误，后者处理根布局或更外层错误。name、message、digest、cause、当前 URL；有 stack 时可截断后直接展示，便于截图定位。global-error.tsx 需要自己返回 <html> 和 <body>，不要依赖根布局里的 Provider、i18n 或运行时配置已经初始化。@/store barrel，避免错误页加载时触发 unrelated store 的模块副作用。dvh，不要使用 vh 或 env(safe-area-inset-bottom)。src/app/error.tsx 与 src/app/global-error.tsx。window、document 或触发 store 初始化副作用。npm run type-check，确认 App Router 特殊文件签名和 client component 类型通过。