Frontend Excellence

下表中的“默认读取”建立在已经读过 00 01 03 这三个必读入口的前提上，表示当前主模式需要额外补读的专题。

主模式输出契约

• 实现
  • 交代边界、状态归属、关键用户状态、实施顺序、验证与未执行项。
• 重构
  • 交代复杂度来源、行为保持点、删冗余顺序、旧路径退出和回滚边界。
• 评审
  • 默认 findings-first，按严重度给问题、依据、验证缺口和不确定点。
• 调试
  • 分开现象、证据、假设、验证顺序和可信修复路径。
• 性能优化
  • 交代基线症状、高杠杆瓶颈、改造顺序、验证指标和局部回滚边界。
• UI / 交互打磨
  • 交代视觉方向、信息层级、记忆点、交互反馈、响应式，以及哪些结构问题要先改。
• 架构 / 方案
  • 交代事实源分工、组件边界、实现顺序、风险点和验证边界。

复杂度触发器

• 同一业务事实被存了多份
• 派生值通过状态或 effect 同步
• 组件同时承担请求、整形、编排、渲染和副作用
• hook、helper 或配置对象比问题本身更难懂
• 包装层不断增加却没有清楚退出边界
• 用 memo 化、缓存或性能技巧掩盖结构问题

快速误判校正

• “页面很卡” 不等于先上 memo、虚拟化或缓存；先判断状态影响范围、重复转换、async waterfall 和客户端边界。
• “React / Next.js 任务” 不等于先找框架技巧；先看结构、事实源和所有权，再看框架适配层。
• “页面太普通 / 太土” 不等于先改颜色、阴影和圆角；先看信息层级、阅读路径、交互反馈和内容节奏。
• “状态不同步 / effect 很多” 不等于继续补 effect；先回到单一事实源、派生逻辑和事件边界。

使用边界

• 不要把所有前端问题都解释成 React / Next.js 技巧问题。
• 不要把所有视觉问题都收窄成 CSS 问题。
• 不要默认读取全部 references。
• 不要把宿主 prompt 已经覆盖的通用工程规则再重复展开。