UI 组件拆分

按业务语义、变化原因和状态所有权选择最小充分边界。不要用文件行数、JSX 深度或 props 数量代替工程判断。

Common Path

读取项目事实
- 先读项目指令、架构约定、目标模块 README 和验证命令。
- 查看目标组件、直接调用方、相邻实现、样式、测试和公开导入方式。
- 确认框架、路由、状态管理、数据获取和组件库约束。
盘点职责
- 分别标记渲染结构、数据获取、状态、派生计算、副作用、业务交互、无障碍语义、样式和资源。
- 识别哪些职责因同一个业务原因一起变化，哪些只是恰好写在同一文件。
选择边界
- 非平凡判断先读 decision-framework.md。
- React 任务必须再读 react.md；其他框架不要套用 React 的 Hook、Effect、key 或渲染树规则。
- 边界仍不清晰或需要对照反例时读 examples.md。